コードハイライトを Crayon Syntax Highlighterから prism に乗り換える(後編)
昨日の続き、prismを実際WordPressに組み込みましょう。
ファイルのアップロード
昨日ダウンロードしたprism.jsとprism.cssを自分の使っているテーマのフォルダ(/wp-content/themes/にあるテーマ名のフォルダ)にアップロードしてください。
function.phpの編集
直接テーマのhead部分に
<link rel='stylesheet' href='prism.css'>
<script type='text/javascript' src='prism.js'>
と書いてもいいのですが、WordPress的にはこの方法はあまり推奨されません。
なので、function.phpに記入することにします。
function.phpの最後の行に
function prism_script_css_output() {
wp_enqueue_style('prismcss', get_stylesheet_directory_uri() . '/prism.css');
wp_enqueue_script('prismjs', get_stylesheet_directory_uri() . '/prism.js', array(), '2.8.1',true);
}
add_action( 'wp_enqueue_scripts', 'prism_script_css_output');
を書き加えてください。これで、prismを使う準備ができました。
prismの使い方
基本的には表示したい部分を
<pre>
<code class="language-Markup">
</code>
</pre>
で囲みます。<code>についているlanguage-markupのクラスは表示したい言語によって「language-言語名」という風に変わります。(htmlの場合はmarkupを使います。)
行番号の付け方
行番号を付けるには前回のオプション設定で、Line Numbersを付けておきます。そのうえで、<pre>のところにline-numbersのクラスを付ければいいです。つまり
<pre class="line-numbers">
<code class="language-Markup">
</code>
</pre>
とすれば行番号が表示されます。
行番号を途中からにする
上の状態では行番号は1から振られます。もし違った行番号から振りたいときは<pre>にdata-startをつけておきます。
もし5番目から行番号を付けたいときは、
<pre class="line-numbers" data-start="5">
<code class="language-Markup">
</code>
</pre>
とすれば、5番から表示されます。
ある行をハイライト表示する
前回のオプション設定で、Line Highlightを付けた場合、行をハイライト表示できます。
例えば、5行目と7行目から10行目までをハイライト表示したいときは
<pre data-line="5,7-10">
<code class="language-Markup">
</code>
</pre>
とすればできます。
タイトルを付ける
ちょっとイレギュラーなやり方ですが、タイトルを付けることができます。まず、前回のオプション設定でShow Languageを選択します。そして<pre>にdata-languageをつけることで表示することができます。
<pre data-language="ここにタイトルを入れる">
<code class="language-Markup">
</code>
</pre>
また、表示させたくない場合はdata-language=” “とすれば表示が消えます。