2020/06/02 20:31
「Prism.js」シンタックスハイライターをWordpressの記事投稿で使う便利な方法
コードを記事内に載せたい時に役立つシンタックスハイライターの「Prism.js」がなかなか素晴らしいのでご紹介します。
行毎にナンバリングして、テーマも明るいものや渋いものまであり、カスタムもしやすく軽量。
今回はWordpressの投稿時に使う便利な方法をご紹介します。（プラグインとしての使い方ではありません）
公式サイトへ
Prism.js公式 : https://prismjs.com/
【ダウンロードページ】
上記、Prism.jsのページに行き、右上の「Download」をクリックして、中身の設定をした上でファイル一式をダウンロードします。
Compression level
最初の選択肢、Compression Level
「Development version」 → 通常の Javascript
「Minified version」 → 縮小・最適化した Javascript
特に後で中身をいじる予定がないなら「Minified version」でいいかと思います。
Themes
次にThemesで、表示される枠内でのカラーを選択できます。
これ選択した後に最下部にプレビューされてるので参考にしてみてください。
ちなみに「Okaidia」ってのが黒のカッコイイやつ。
「Default」と「Dark」はちょい地味かもです。
「Coy」は明るくポップな印象。
「Funky」はちょっと見にくそう。
Languages
そして、次にLanguagesで実際に使う予定の言語を選択します。
たくさんあるので自分が表示させたいものをじっくり選んでいきましょう。
SASSとPHPくらいは追加しておきたいですね。
ちなみにHTMLを選びたい場合はMarkupを選べばOKです。
Plugins
プラグインというものがあって、例えば行ナンバーを表示させたり、実際に表示させてる言語名を表示させたりできます。
Line Highlight → 指定した行をマークアップ
Line Numbers → 行番号の表示
Show Language → 言語名の表示
ファイル2種をダウンロード
ここまで選択したら、あとは
ページ最下部の「DOWNLOAD JS」と「DOWNLOAD CSS」をクリックして
prism.js、prism.css の2つのファイルを保存する。
設置方法
設置方法は簡単です。
ヘッダー内で「prism.js」と「prism.css」を読み込ませればそれで使えるようになります。
<head>
<link rel="stylesheet" href="prism.css">
<script src="prism.js"></script>
</head>
ハイライト方法（基本編）
囲むだけでOKです。
<pre><code class="language-言語名">【コード記述】
【コード記述】
【コード記述】</code></pre>
言語名は「language-php」や「language-●●」と書くようにする。
HTMLの場合は「language-markup」にするようです。
行番号を表示
<pre class="line-numbers"><code class="language-言語名">【コード記述】
【コード記述】
【コード記述】</code></pre>
指定した行の色を変える
<pre class="line-numbers" data-line="3-4"><code class="language-言語名">【コード記述】
【コード記述】
【コード記述】</code></pre>
例えば「data-line="2,5-8,10-15"」と指定すれば
2行目、5～8行目、10～15行目の色を変えらます。
言語名の表示
<pre class="line-numbers"><code class="language-言語名" data-language="言語名">【コード記述】
【コード記述】
【コード記述】</code></pre>
言語名じゃなくても文字列なら、何でも表示できます。
Wordpressでの便利な使い方
「functions.php」への記述が必要です。
【functions.php】
function space_sc_prism( $atts, $content = null ) {
$content = do_shortcode( shortcode_unautop( $content ) );
extract( shortcode_atts( array(
'code' => 0,
), $atts ) );
return '<pre class="line-numbers"><code class="language-'.$code.'" date-language="'.$code.'">' . $content . '</code></pre>';
}
add_shortcode( 'コード', 'space_sc_prism' );
function custom_add_sc() {
if (wp_script_is('quicktags')){
?>
<script>
QTags.addButton( 'prism', 'コード', '
', '[／コード]'); //←半角スラッシュに変更すること！
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'custom_add_sc' );
こんな感じでfunctions.phpに書いておけば、記事の投稿で（テキストエディターの方で）ボタンを押して囲んで使う事ができるようになります。
以前にも書いた「オリジナルのショートコード」の応用です。
WordPressならプラグインとしてシンタックスハイライターを入れる事もできるとは思うのですが、できるだけ余計なものを入れずオリジナルに近い形で使いたいという方はぜひ活用してみてください。
現場から以上です！
545
Recommended
