WordPress

【WordPress】プラグインを使わずにコードをハイライトする方法

プラグインを使わずにハイライトを実装

技術系ブログには欠かせないハイライト機能を実装しましょう。
プラグインも多々ありますが、便利なプラグインが多くて
ついつい頼りがちになりますが、サイトの動作が重くなるのも困ります。
プラグインを使わずに済むのが一番ということで、紹介していきます。
では、さっそく以下の見本を見て貰いましょう。


$array = ['ハイライト','prismjs'];
var_dump($array);
// 出力結果 array(2) { [0]=> string(15) "ハイライト" [1]=> string(7) "prismjs" }

みるはぴ

今回はPHPのコードですが、変数、関数、コメントなど色分けがされて見やすくなりました。
これがハイライトになります。
これだけでそれっぽいブログになりますね。

ハイライトの実装

実装まで手順

手順

  • 公式サイトからprismjsをダウンロード
  • js,cssファイルを格納・読み込み設定
  • ハイライト用の記述を試す

公式サイトからprismjsをダウンロード

では、公式サイトにアクセスしてダウンロードを進めていきましょう。
画面右上にある「DOWNLOAD」ボタンを押して進みます。
進むと、以下の項目があります。
それぞれ自分好みのカスタマイズをしていきましょう。
プラグインに関しては、リンク先に説明があるので必要に応じて選択しましょう。

Themes ハイライト時の背景色や文字色を8つのテーマから選べます。
Languages ハイライトに対応させる言語を選べます。
lugins 行番号の表示、コピーボタン、不要な行の自動削除などの追加機能が選べます。

カスタマイズを終えたら
一番下までスクロールしましょう。
JSファイル」と「CSSファイル」のダウンロードボタンがあるので
それぞれクリックしてダウンロードします。

青色の枠で囲まれた場所に
今回のカスタマイズ情報が記録されています。
URLにアクセスするとカスタマイズが選択された状態で表示されるので
テーマ変更や言語追加など簡単に行えるようになっています。
※それぞれのファイルの先頭に記述があります。

js、cssファイルを格納・読み込み設定

まずは、js、cssファイルを格納していきましょう。
次に、自身の環境の「functions.php」に記述をしていきます。


function read_prism() {
  // 読み込み先のパスは自身の環境に合わせて記述してください。
  wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/path/to/prism.css' );
  wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/path//to/prism.js', array('jquery'), '1.11.3', true );
}
add_action('wp_enqueue_scripts', 'read_prism');

ポイント

基本的に、「functions.php」の場所は
「/wp-content/themes/テーマ/functions.php」か
「/wp-content/themes/テーマ/子テーマ/functions.php」になるのではないかと思います。
js、cssに関しても、テーマ(子テーマ)の直下にフォルダがあると思います。
無い場合は必要に応じて作成しましょう。

ハイライト用の記述を試す

ようやく導入が完了しました。
以下のように記述することで、ハイライト機能が使えます。
「pre」タグに属性や、classなどを追記することで言語の表示や、
行単位でのハイライトが出来るようになります。

<pre data-line='1, 4-5, 10' class='line-numbers lang-xxxx'>
<code>
ソースコード
</code>
</pre>


echo '1行目';
echo '2行目';
echo '3行目';
echo '4行目';
echo '5行目';
echo '6行目';
echo '7行目';
echo '8行目';
echo '9行目';
echo '10行目';

ポイント

特定行のハイライトは「data-line='1, 4-5, 10'」と指定することが出来ます。
なんとなく見た目で分かると思いますが、「1行目、4行目から5行目、10行目」をハイライトするという意味になります。
行番号を指定する場合は、classに「line-numbers」を追記します。
また、言語の指定も同様にclassに「lang-xxx」といったように任意の言語を指定します。
※言語の指定方法一覧はこちら

みるはぴのチョイス

みるはぴ

私のカスタマイズを紹介します。
「Themes」は「Tomorrow Night」を選択しました。
「Languages」については好みなので省略します。
「Plugins」は以下の一覧になります。
最低限の機能ではありますが、いつでも好きなものを追加できるので、
導入後に使い勝手の調整をしていくのがベターだと思います。

Plugins

  • Line Highlight(行単位でハイライト機能)
  • Line Numbers(行番号を表示)
  • Show Language(ハイライトする言語の表示)
  • Command Line(コマンドライン用のハイライト機能)
  • Normalize Whitespace(不要な行やスペースの自動削除機能)
  • Toolbar(ツールバーの表示(コピーボタン等の表示))
  • Copy to Clipboard Button(コピーボタン)

ポイント

一度導入が出来たら、あとはファイルを更新するだけで、
簡単にテーマ変更、言語追加、機能追加できるので
あまり悩まずに進めていきましょう。

  • この記事を書いた人
  • 最新記事

-WordPress

© 2022 みるはぴ.com