Pythonコードをブログで！WordPressへPrism.js（シンタックスハイライト）導入する方法（プラグインなし）

どうも、Champignon（きのこ）です。
今回は、プログラミングのお話です。

といっても、
直接的なプログラミングのお話ではなく、
WordPressで作ったブログで、ソースコードをきれいに表示する方法（シンタックスハイライト）をご紹介したいと思います。

しかも、プラグインなしでできます。

こちらの記事で表示しているような感じです。
YOASOBIっぽい歌詞は文豪の作品からマルコフ連鎖で文章生成したら作れる？？【自然言語処理】


import numpy as np
print(1+1)

普段、VScodeなどエディターを利用している方は、カラーリングされている方が見やすく、ブログ訪問者にも高いユーザービリティを提供できるようになります。（エディター使ってない人なんてほとんどいないでしょうし、、、）

普段私は”Python”を使っているので、”Pythonista”向けに写真を合わせてご紹介していきたいと思いますが、他のHTMLやCSS、その他プログラミング言語でもそのまま転用できる方法なので、最後までご覧ください

☆もくじ☆

シンタックスハイライトの導入-Prism.js

さっそくPrism.jsの導入方法について、ステップバイステップでご紹介していきますので、スクショと合わせてご覧ください！

[Step 1]
Prism.jsのサイトにアクセス

まず、Prism.jsのサイトにアクセスします。
そして右上の“DOWNLOAD”をクリックしてください。

[Step 2]
Prism.jsをカスタマイズする

”DOWNLOAD”をクリックすると、次のような画面になるかと思います。

ここで、自分が必要なものをチェックしていくことになります。
英語が苦手な方に向けて各項目について少し説明を加えておきたいと思います。

Compression level:
そのままでOKです。
Themes:
ソースコードを表示するときのテーマです。
各項目をクリックするとサンプルビューが見られますので、お好みで選択してください。
ちなみに、私は”Dark”を選択しました。（単純にかっこいいからです笑）
Languages:
シンタックスハイライトにしたい、ソースコードとして使用する言語を選択してください。
私はPythonユーザーなので、”Python”にチェックを入れました。
なお、左上のデフォルトでチェックされているもの（MarkupやCSS,JavaScript）はそのままにしておいてください。
Plugins:
WordPressでプラグインを利用されている方がほとんどだと思うので、言葉の説明はいらないと思います。
私が使っているPrism.jsのプラグインとその簡単な説明はこんな感じです。

Line Number: ソースコードの行数を表示してくれます。（行数をしていして説明するときに便利ですね。
Autolinker: ソースコード内のURLをハイパーリンク化してくれます。
Show Language: ソースコードで使用されている言語を表示する。右上に出ます。
Normalize Whitespace: これなしでコードを記述すると、1行目が勝手に改行されてしまうようなので、チェック。
Toolbar: “Show Language”を選択すると自動でチェックが入ります。おそらく言語を表示するのに必要なのでしょう。
Copy to Clipboard Button: ソースコードをコピーできるボタンを表示する。言語同様右上に表示されます。（これにチェックをいれても”Toolbar”に自動チェックがはいるので、右上に何かを表示するプラグインなのでしょうね。）

[Step 3]
JavaScriptとCSSをダウンロードしよう。

ここまで来ていただくと、
最下部にJavaScriptとCSSをダウンロードするボタンが表示されていると思います。

JavaScriptやCSSに明るい方や勘のいい方はピンときたかもしれませんが、ここまでいろいろカスタマイズしていく中で、JavaScriptとCSSが自動で記述されていってたんですね。
本当にありがたいサービスです。

これを2つともダウンロードしましょう！

[Step 4]
サーバーにJavaScriptとSCCをアップロードしよう。

Step 3でダウンロードした2つのファイルをサーバーにアップロードします。

ちなみに私が使っているレンタルサーバー

私がワードプレスやPrism.jsを設置しているレンタルサーバーは、
ConoHa Wingです。

こちらのサーバーではPythonも動かせるので、
Pythonを勉強している方でブログを始めたい方には、
サーバー上でブログ以外のことをするのにも発展させられるので、
お勧めです。

サーバーへのアップロード

WordPressを利用していて、少し勉強された方だと”FTP”を利用されている方が多いと思います。
私も”FFFTP”を使っているので、それを使ってアップロードしました。
もし、”FTP”をインストールしていない方でも、ConoHaのレンタルサーバーであれば、
「サーバーへログイン」
→「サイト管理」
→「ファイルマネージャー」
でサーバーに格納されているフォルダ・ファイルを見に行ったり、アップロードできるので、こちらからでも構いません。

上記どちらかの方法で、
さきほどのJavaScriptとCSSのファイルをサーバーにアップロードしてください。

格納場所は、パスがわかればどこでも構いませんが、それぞれお使いのWordPressのテーマが格納されている階層に格納してください。（子サイト等を作っている方はそのフォルダである必要があるようです。）

[Step 5]
WordPressのテーマのfunctions.phpに登録しよう。

WordPressの管理画面に遷移して、
「概観」→「テーマエディタ」→「functions.php」
を開きましょう。

そして、以下のコードを記述します。
元のコードのコピーを取っておくことを忘れないでくださいね。（いざというときのため。）

<?php
// Function to add prism.css and prism.js to the site
function add_prism() {
    
    // Register prism.css file
    wp_register_style(
        'prismCSS', // handle name for the style 
        get_stylesheet_directory_uri() . '/prism.css' // location of the prism.css file
    );

    // Register prism.js file
    wp_register_script(
        'prismJS', // handle name for the script 
        get_stylesheet_directory_uri() . '/prism.js' // location of the prism.js file
    );

    // Enqueue the registered style and script files
    wp_enqueue_style('prismCSS');
    wp_enqueue_script('prismJS');
}
add_action('wp_enqueue_scripts', 'add_prism');

もし、テーマ階層にJavaScriptとCSSを配置していない方は、
‘/prism.css’
と
‘/prism.js’
を配置した階層のパスに変更しましょう！

それが完了すれば、保存して閉じましょう。

[Step 6]
Prism.js（シンタックスハイライト）を使ってみよう。

さっそくブログ記事で使ってみましょう。
といっても、少しの記載で簡単に使えます。

ビジュアル編集ではなく、HTML編集に切り替えて、以下のように記載するだけです。

<pre class="line-numbers"><code class="language-python">
import numpy as np
print(1+1)</code></pre>

このときPython以外の言語を利用する方は、
“<code class=”language-python”>”
の部分を任意の言語に変更してください。

また、本来は、
‘class =”lline-numbers”‘
の部分はいらないはずなのですが、これなしでは行数が表示されなかったので、追記しています。。。
対策を見つけられた方がいらっしゃれば、教えてください！

後は、このタグの間にあなたの創造的なコードを記述するだけで、世界中の人に見やすくコードを公開することができます！！