Blog

ブログのコードを長期的におしゃれに表記する

更新日:

皆さんはブログでプログラミングのコードを表記する際、プラグインを使用していますか?
私は最近まで「Crayon Syntax Highlighter」を使用していました。
突然Googleさんからサイトにソフト404エラーがあると連絡があるまでは。

ブログを見てみると、トップ画面に表示されている記事がほぼ無くなっていました。
原因をネットで調べてみるとプラグインに問題があると発生するようです。
表示されなくなった記事が、軒並みコード表記に上記プラグインをしていたので、もしやと思い停止するとエラーが解消されました。
どうやら3年前からプラグインの更新がされていなかったようです。

解消はされたがコード表記はどうしようかと思い、
Googleさんがオープンソースで提供している「Code Prettify」を選定しました。
選定の理由は以下の3点です。
・開発が継続している(長期利用が可能)
・画面表示のスピードが速い(軽い)
・カスタマイズができる

今回はAuto-Loader(CDN:Content Delivery Network)というネットから必要なライブラリを自動的に読み込んで利用できる方法で設定しました。

環境
ブログソフト:WordPress

Code Prettifyの設定

まずはWordPressのダッシュボード上での設定です。
外観>テーマエディターを開き、function.phpを編集します。
下記のコードを下部に追記して下さい。

add_action('wp_enqueue_scripts', 'themeslug_enqueue_script');
function themeslug_enqueue_script(){
wp_register_script('code-prettify-js', 'https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=css&skin=sons-of-obsidian');
wp_enqueue_script('code-prettify-js');
}

Code Prettifyで表記方法を数テーマから選択することができます。
Sons-Of-Obsidianを選択しました。
他のテーマを使用したい場合は、上記コードの3行目にあるskin=の後にお好きなテーマ名へ変更してください。テーマのイメージを参照。

他サイトでRawGitを使われているものがありましたが2019年10月に提供が終了するため、上記cdn.jsdelivr.netで設定を行っています。

詳細はhttps://github.com/google/code-prettifyを参照ください。

Code Prettifyをコードに反映する

反映したいコード(...)を<pre class="prettyprint linenums">...</pre> で挟んでください。
行番号を表示させたくない場合は、linenumsを消してください。

#行番号あり
for i in range(3):
    print("Hello World!")

 

#行番号なし
for i in range(3):
    print("Hello World!")

 

以上です。
WordPressのヘッダーやフッターに直接記述する方法も試しましたが、反映されませんでしたので、子テーマのfunction.phpを使いました。
もしうまく反映されていない場合は、今回の方法を試してみて下さい。

Code Prettify導入の参考サイト

ワードプレスでシンタックスハイライトを実装する方法
head内にソースコードを追加する手順(子テーマのfunctions.phpを使った方法)
Code prettifyオートローダー、ダウンロード方法

 

レクタングル(大)

レクタングル(大)

-Blog

Copyright© nimorlog , 2019 All Rights Reserved Powered by STINGER.