HoBoFoTo

Hobo everyday foto.

コードハイライトを 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=” “とすれば表示が消えます。

 

よかったらクリックしてください。
にほんブログ村 IT技術ブログ WordPressへ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です