【WordPress】ソースコード シンタックスハイライトさせる方法

WordPressのバージョンは下記です。

WordPress 5.2.2 
(Start Magazine テーマ)

みんなきれいにソースコードとか表示させているけどどうやっているの?

と疑問に思って調べてきれいに表示させることができるようになったので、それについてまとめておこうと思います。

今回WordPressのプラグインは使用してないです。


まず最初にprism.jsのダウンロード

https://prismjs.com/

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

ダウンロードボタンがあるのでそこをクリックします。

カラーテーマを選択

ラジオボタン or 右のアイコンから選択できます。

言語選択

かなりあるので、対応した言語を適宜選択する

プラグイン選択

行数を表示したり特定の行をハイライトしてくれたりできるプラグインがあるみたいです。

自分はよくわからなかったので、すべて選択しました。これ使いたいのに使えない。またダウンロードしないといけないのがめんどくさかったので。

表示内容の確認とダウンロード

今まで選択してきた内容を一番下で確認できます。

問題なければJSとCSSをダウンロードしてください。

WordPress側の対応


WordPress側の設定をしていきます。

CSSとJSをアップロード

wp-content/themes/start-magazine/css/prism.css
wp-content/themes/start-magazine/js/prism.js

上記にアップロードします。
ここではstart-magazineを使っているので、それぞれテーマごとに異なるので注意してください。

テーマエディタからprism.jsとprism.cssを読み込むように設定

テーマエディタからfunctions.phpを修正します。

CSSは下記を194行目あたりに追加します。

wp_enqueue_style( 'prism-css', get_template_directory_uri() . '/css/prism.css' );

JSは下記を206行目あたりに追加します。

wp_enqueue_script( 'prism-js', get_template_directory_uri() . '/js/prism.js', array('jquery'), false, true );

これで設定は終わりです。

投稿時の記述方法

htmlモードで下記のように記述します。

<pre data-line="1" class="line-numbers">
    <code  data-language="php" class="language-php">
        print "abc";
        print "foo";
    </code>
</pre>

そうするとこんな感じで表示できると思います。

    
        print "abc";
        print "foo";
    

結構見やすくなりました。

これから勉強したコードをブログでまとめて行こうと思います。

コメントを残す

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