BETA

prism.jsをWordPressのテーマに組み込む

投稿日:2019-08-29
最終更新:2020-07-11

初めに

WordPressでソースコードを読みやすく掲載する方法として、以前はCrayon Syntax Highlighterが好まれていたが、開発が止まっていることもあって、最近はprism.jsがよく紹介されている。

WordPressでprism.jsを使う方法は二つある。prism.jsを導入するWordPressプラグインを利用する方法、一つはテーマにprism.jsを直接組み込む方法である。明らかに前者の方が容易だが、問題がないわけではない。

prism.jsを導入するWordPressプラグインの問題点

prism.jsには機能を追加するプラグインが20以上あるが、WordPressプラグインでprism.jsを導入するとその一部しか利用できない。たとえば、もっとも利用者の多いCode Syntax Blockは、 Line HighlightLine NumbersAutoloaderにしか対応しない。次に利用者の多いPrismaticは、Line HighlightとLine NumbersとShow LanguageCopy to Clipboard Buttonだけである。

HTMLやXMLを掲載するときに<&lt;のようにエスケープしなくてもよくなるUnescaped Markupにいずれも対応していないが、どちらも独自にエスケープするので、これは利用できなくても問題ない。以前のPrismaticのエスケープは期待通りの動作をしなかったが、バージョン2.4で確認したところ問題なくなっていた。

prism.jsをテーマに組み込む

Code Syntax BlockやPrismaticが利用したいプラグインに対応していない場合は、自分でプラグインを追加したprism.jsを、直接テーマに組み込んでしまえばいい。方法はそれほど難しくない。

最初に、子テーマをまだ作っていないなら、この記事を参考にして必ず作ること。これからfunctions.phpを編集するが、親テーマのfunctions.phpを直接いじると、サイトがめちゃくちゃになることがあるし、テーマのアップデートで変更が消えてしまう。

子テーマを作ったら、そのフォルダにprism.jsのダウンロードページで生成したprism.jsとprism.cssを配置して、functions.phpに以下のように書けばよい。

function add_prism() {  
  wp_enqueue_style('prism-css', get_stylesheet_directory_uri() . '/prism.css');  
  wp_enqueue_script('prism-js', get_stylesheet_directory_uri() . '/prism.js');  
}  
add_action('wp_enqueue_scripts', 'add_prism');  

「WordPress prism.js」でググる出てくる解説のほとんどは、wp_enqueue_scriptに余計な引数が付いているけど、それは不要である。人のブログをコピペするときは内容を精査しような。

スタイルシートを修正する

子テーマのstyle.cssに以下の内容を追加して、<pre>のあとの<code>のpaddingを0にする。テーマによっては<code>にpaddingを設定しているので、0にしておかないとコードの1行目が少しずれてしまう。

pre code {  
    padding: 0px;  
}  

prism.jsを利用する

ソースコードをハイライトするときはHTMLカスタムブロックに直接タグを入力する。<pre><code>でソースコードを囲い、クラスのlang-xxxlanguage-xxxで言語を指定する。言語を指定する際に使うキーワードについてはSupported languagesに一覧がある。

<pre><code class="lang-ruby">  
def equal?(lhs, rhs, epsilon=1e-10)    
    (lhs - rhs).abs <= epsilon ||    
        (lhs - rhs).abs <= [lhs.abs, rhs.abs].max * epsilon    
end  
</code></pre>  

<>を使うプログラミング言語やマークアップ言語をハイライトするときには、&lt;&gt;にエスケープしなくてもよいように、Unescaped Markupを利用する。Unescaped Markupを利用するときは<script>で囲い、そのクラスで言語を指定する。

<script type="text/plain" class="lang-csharp">  
void Start()  
{  
    var rb = gameObject.AddComponent<Rigidbody>();  
    rb.isKinematic = true;  
    GetComponent<Collider>().isTrigger = true;  
}  
</script>  
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@fujiedaの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう