幻魔ナイトブログ

主に絵、音楽、プログラミングなどについて書きます。

Wordpressでシンタックスハイライトを使いたい。

f:id:MahiroN:20200822135153p:plain

Wordpressでは、はてなブログのようにデフォルトでシンタックスハイライトを使用することはできません。
そこで今日はWordpressシンタックスハイライトを導入する方法について紹介します。

その1:プラグインを使う

こちらは初心者向けです。

「Highlighting Code Block」と言うプラグインWordpressプラグイン設定画面からインストール→有効化することでシンタックスハイライトを使用できるようになります。

その2:prism.jsを導入する

より高度な方法としてprism.jsと言うプラグインを直接入れる方法があります。
以下のサイトからシンタックスハイライトを適用したい言語と使用したツールにチェックを入れて、javascriptcssの両方をダウンロードします。 ダウンロードしたファイルを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');

お問合わせはこちら