Wordpressでは、はてなブログのようにデフォルトでシンタックスハイライトを使用することはできません。
そこで今日はWordpressにシンタックスハイライトを導入する方法について紹介します。
その1:プラグインを使う
こちらは初心者向けです。
「Highlighting Code Block」と言うプラグインをWordpressのプラグイン設定画面からインストール→有効化することでシンタックスハイライトを使用できるようになります。
その2:prism.jsを導入する
より高度な方法としてprism.jsと言うプラグインを直接入れる方法があります。
以下のサイトからシンタックスハイライトを適用したい言語と使用したツールにチェックを入れて、javascriptとcssの両方をダウンロードします。
ダウンロードしたファイルをWordpressのテーマが置いてあるディレクトリに配置します。
Cocoonの場合は以下になります。(子テーマがある場合は子テーマのディレクトリに配置する必要があります。)
/var/www/html/wp-content/themes/cocoon-child-master/
function.phpを書き換えます。function.phpも上記と同じテーマのディレクトリはいかにあります。
以下のようにprism.jsを呼び出す処理を追加します。
function my_prism() { wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/prism.css' ); wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/prism.js', array('jquery'), '1.9.0', true ); } add_action('wp_enqueue_scripts', 'my_prism');