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

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

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

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

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

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

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

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

Cocoon標準ソースコード設定

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

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

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

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

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

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

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

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

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

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

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

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

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

通常「font-family」には、３～４個の候補を記述します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

２．コードエディターで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>

３．カスタム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>	

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

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

１、カスタム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>

２、<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>

３、カスタム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'''

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

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

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

Source Han Code JP

Ricty Diminished

Cica

Myrica

フォントのダウンロード

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

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

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

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

まとめ

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

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

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

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

@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'''

@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'''

参考

ソースコードをハイライト表示させる方法

テーマ内でソースコードをハイライト表示し、見やすくする方法の紹介です。highlight.jsプラグインのみを利用したシンプルなものを実装しています。

wp-cocoon.com