Cocoonソースコード表示のフォントを変更する方法

サンプルソースコードWordPress
スポンサーリンク

WordPressの無料テーマ「Cocoon」は標準機能で記事内にソースコードの埋め込みができ、ハイライト表示行番号の表示ができます。

プラグインを利用してコードの埋め込みを試したところ、不具合が発生。

具体的にはページの編集中、ビジュアルエディターとコードエディターの切り替えをすると、ページが応答しないエラーが発生しました。

コードを埋め込むプラグインを外すと不具合は解消したので、プラグインを利用してソースコードを埋め込むことを断念。

もともとプラグインほどの多機能は必要としていなかったので「Cocoon」標準機能のコード埋め込みを利用することにしました。

ここでは「Cocoon」標準機能のソースコードの埋め込み方と、フォントの変更の方法、

プログラミングに今人気の日本語対応フォントを紹介します。

Cocoon標準ソースコード設定

「Cocoon設定」をクリックして出てきたタブの「コード」を選択するとソースコード設定ができます。

ソースコードをハイライト表示させたい場合は「ソースコードをハイライト表示」にチェックを入れます。

行番号を表示させたい場合は「行番号表示」にチェックを入れます。

ハイライトスタイルは90テーマ以上あります。

atom-one-dark
nord

ハイライト表示と行番号表示に対応

Cocoon設定のコードタブでソースコードのハイライト表示がプラグイン無しでできます。

ご覧のとおり「Cocoon」標準機能のソースコード表示は、ハイライト表示の表示・非表示と行番号表示の有・無が選択できます。

ハイライト表示とは、ソースコードに色を付けて視認性が増すようにできることです。

DarkやLightといった、背景色も変更されます。

ソースコードのハイライトは90テーマ以上あり、highlight.js demoで参照することができます。

Default #f0f0f0

A 11 Y Dark #2b2b2b

A 11 Y Light #fefefe

Agate #333333

An Old Hope #1c1d21

Androidstudio #282b2e

Arduino Light #ffffff

Arta #222222

Ascetic #ffffff

Atelier Cave Dark #19171c

Atelier Cave Light #efecf4

Atelier Dune Dark #20201d

Atelier Dune Light #fefbec

Atelier Estuary Dark #22221b

Atelier Estuary Light #f4f3ec

Atelier Forest Dark #1b1918

Atelier Forest Light #f1efee

Atelier Heath Dark #1b181b

Atelier Heath Light #f7f3f7

Atelier Lakeside Dark #161b1d

Atelier Lakeside Light #ebf8ff

Atelier Plateau Dark #1b1818

Atelier Plateau Light #f4ecec

Atelier Savanna Dark #171c19

Atelier Savanna Light #ecf4ee

Atelier Seaside Dark #131513

Atelier Seaside Light #f4fbf4

Atelier Sulphurpool Dark #202746

Atelier Sulphurpool Light #f5f7ff

Atom One Dark Reasonable #282c34

Atom One Dark #282c34

Atom One Light #fafafa

Brown Paper #b7a68e

Codepen Embed #222222

Color Brewer #ffffff

Darcula #2b2b2b

Dark #444444

Docco #f8f8ff

Dracula #282a36

Far #000080

Foundation #eeeeee

Github Gist #ffffff

Github #f8f8f8

Gml #222222

Googlecode #ffffff

Gradient Dark #2820b3

Grayscale #ffffff

Gruvbox Dark #282828

Gruvbox Light #fbf1c7

Hopscotch #322931

Hybrid #1d1f21

Idea #ffffff

Ir Black #000000

Isbl Editor Dark #404040

Isbl Editor Light #ffffff

Kimbie Dark #221a0f

Kimbie Light #fbfbd4

Lightfair #7d1212

Magula #f4f4f4

Mono Blue #eaeef3

Monokai Sublime #23241f

Monokai #272822

Night Owl #011627

Nord #2e3440

Obsidian #282b2e

Ocean #2b303b

Paraiso Dark #2f1e2e

Paraiso Light #e7e9de

Pojoaque #181914

Purebasic #ffffdf

Qtcreator Dark #000000

Qtcreator Light #ffffff

Railscasts #232323

Rainbow #474949

Routeros #f0f0f0

School Book #f6f6ae

Shades Of Purple #2d2b57

Solarized Dark #002b36

Solarized Light #fdf6e3

Srcery #1c1b19

Sunburst #000000

Tomorrow Night Blue #002451

Tomorrow Night Bright #000000

Tomorrow Night Eighties #2d2d2d

Tomorrow Night #1d1f21

Tomorrow #ffffff

Vs #ffffff

Vs 2015 #1e1e1e

Xcode #ffffff

Xt 256 #000000

Zenburn #3f3f3f

気になるのはフォントがデフォルトでは「monospace」になっていることです。

そこでフォントを好みのものに変えてみたいので、CSSを記述してみます。

ソースコードのフォントを変更する方法

PCにインストールされていないフォントを指定しても表示されません。
「コントロールパネル」から「フォント」を選択するとインストールされているフォントが確認できます。

通常「font-family」には、3~4個の候補を記述します。

font-family: Menlo, Monaco, Consolas, "Courier New", monospace;

下記のソースコードのハイライトスタイルは「Atom One Dark Reasonable」を選択していて背景はDark系になっています。

まずは、ブロックの追加>フォーマット>コード を選択して表示させたいコードを記述します。

ハイライトスタイル:Atom One Dark Reasonable 行番号:無 フォント:monospace 
<div class="wp-cocoon-blok btn btn-shine">
	<a href="makokichi.net">まこきちねっとはこちら</a>
</div>	

このコードのフォントを「Courier New」に、サイズも「18px」と大きくしてみます。

ハイライトスタイル:Atom One Dark Reasonable  行番号:無 フォント:Courier New
<div class="wp-cocoon-blok btn btn-shine">
	<a href="makokichi.net">まこきちねっとはこちら</a>
</div>	

このコードのフォントを「メイリオ」に、サイズを「16px」にしてみます。

ハイライトスタイル:Atom One Dark Reasonable 行番号:無 フォント:メイリオ
<div class="wp-cocoon-blok btn btn-shine">
	<a href="makokichi.net">まこきちねっとはこちら</a>
</div>	

フォント指定のやり方は2つ

フォント指定のやり方は2つあります。

1つはビジュアルエディターとコードエディターに記入するやり方と、

もう一つは、ビジュアルエディターだけに記入するやり方です。

1、「コード」でフォントやサイズを指定する

1、ブロックの追加>フォーマット>コード を選択して表示させたいコードを記入。
2、コードエディターに移って、記述したコードのcodeタグにclassを指定する。
  例:<code class=”courier-new-font”>
3、カスタムCSSで  font-family と font-size を記入する。

1.ブロックの追加>フォーマット>コード でコードを記入

<div class="wp-cocoon-blok btn btn-shine">
	<a href="makokichi.net">まこきちねっとはこちら</a>
</div>	

2.コードエディターでcodeタグにclassを記入

<pre class="wp-block-code html"><code class="courier-new-font">&lt;div class="wp-cocoon-blok btn btn-shine">
	&lt;a href="makokichi.net">まこきちねっとはこちら&lt;/a>
&lt;/div>	</code></pre>

3.カスタムCSSでフォントなどを指定

.courier-new-font{
    font-family: 'Courier New';
    font-size: 16px;  
}

フォントが「monospace」から「Courier New」に、サイズも変更されました。

<div class="wp-cocoon-blok btn btn-shine">
	<a href="makokichi.net">まこきちねっとはこちら</a>
</div>	

2、「カスタムHTML」でフォントやサイズを指定する

1、ブロックの追加>フォーマット>カスタムHTML にコードを記入する。
  <pre><code class=””>ここに表示させたいコード</code></pre>と記入する。
2、codeタグにclassを指定する。 例:<code class=”myfont”>
3、カスタムCSSで  font-family と font-size を記入する。

1、カスタムHTMLにコードを記述

<pre><code class="">
@requires_authorization
def somefunc(param1='', param2=0):
    r'''A docstring'''
    if param1 > param2: # interesting
        print 'Gre\'ater'
    return (param2 - param1 + 1 + 0b10l) or None

class SomeClass:
    pass

>>> message = '''interpreter
... prompt'''
</code></pre>

2、<code class=””>にclassを記入

<pre><code class="myfont">
@requires_authorization
def somefunc(param1='', param2=0):
    r'''A docstring'''
    if param1 > param2: # interesting
        print 'Gre\'ater'
    return (param2 - param1 + 1 + 0b10l) or None

class SomeClass:
    pass

>>> message = '''interpreter
... prompt'''	
</code></pre>

3、カスタムCSSでフォントなどを指定

.myfont{
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体";
    font-size: 18px;  

}

こちらもフォントが「monospace」から「游ゴシック」に変更されました。


@requires_authorization
def somefunc(param1='', param2=0):
    r'''A docstring'''
    if param1 > param2: # interesting
        print 'Gre\'ater'
    return (param2 - param1 + 1 + 0b10l) or None

class SomeClass:
    pass

>>> message = '''interpreter
... prompt'''

どちらのやり方も難しいことはないですが、2番目の方が「カスタムHTML」と「カスタムCSS」への記入だけで済むので、少しは簡単かもしれません。

人気の日本語対応フォント

プログラミングに人気の日本語対応フォントを紹介します。

画像をクリックするとダウンロードページに飛びます。(Github.com)

Source Han Code JP

SourceCodeJP

Ricty Diminished

RictyDiminished

Cica

CicaFont

Myrica

Myrica
フォントのダウンロード
githubダウンロード

「Clone or download」から「Download ZIP」を選択し圧縮フォルダをダウンロードして展開する。
展開したファイルの「.otf(OpenType)」や「.ttf(TrueType)」、「.ttc(TrueType)」のいずれかのファイルをまとめてコントロールパネル>フォントフォルダにドラッグ&ドロップすればOK。

展開したフォルダの中に「OpenType」と「TrueType」の2種類の拡張子ファイルがあった場合

OpenType:Windows-Mac間で互換性があるので文字化けする心配がない。高度であるためプロユーザー向けである。

TrueType:Windows-Mac間で互換性がない。歴史が古く広く普及している。初心者から上級者まで幅広いユーザー向けである。

まとめ

「Cocoon」標準のソースコード表示はハイライトスタイルと行番号表示ができて、とても軽快に動作します。

もう少し多機能なものが必要な方(コードの中の一行だけマーカーしたいなど)には向きませんが、多機能を必要とせずに軽快さを求めるなら十分な機能です。

さらに今回紹介したフォント変更を付け加えるだけでも、見え方がグッと良くなります。

背景色も自由に変えられますが、コードが見えづらくなるので注意が必要です。

ハイライトスタイル:Atom One Dark Reasonable
@requires_authorization
def somefunc(param1='', param2=0):
    r'''A docstring'''
    if param1 > param2: # interesting
        print 'Gre\'ater'
    return (param2 - param1 + 1 + 0b10l) or None

class SomeClass:
    pass

>>> message = '''interpreter
... prompt'''
ハイライトスタイル:Atom One Dark Reasonableの背景色を「#b0c4de」に変更してみた。
@requires_authorization
def somefunc(param1='', param2=0):
    r'''A docstring'''
    if param1 > param2: # interesting
        print 'Gre\'ater'
    return (param2 - param1 + 1 + 0b10l) or None

class SomeClass:
    pass

>>> message = '''interpreter
... prompt'''

参考

コメント