【すぐできる・初心者向け】WordPressでソースコードを貼り付ける

prismjsを使ってWordPressで書いたブログにソースコードをかっこよく貼り付ける方法を紹介します。
この記事を実践するとソースコードをこんな感じに記載できるようになります。

def main():
    print("Hello World")
    return

Java、Python、Cなどをはじめとした言語からJSON、SQL、HTMLといったものまで幅広く対応できます。

検証に使用した環境

使用したWordPressテーマ：Cocoon
OS：AmazonLinux2
サーバ：AmazonEC2

カスタムCSSとカスタムJavaScriptの入力ができるテーマであれば問題なく動作すると思います。

prismjsでJSとCSSを生成する

圧縮レベルとテーマを選択する

prismjsにアクセスします。ページ上部、Compression levelを選択できるので「Development version」を選択します。「Minified version」のほうが軽量ですが、思った通りの動作をしないことがあります。

筆者の環境ではカスタムCSSとJavaScriptに貼り付けする際Minidiedだとうまく表示されませんでしたが、テーマや環境によってはMinidiedでもよいかもしれません。

必要な言語を選択する

そして下にスクロールするとLanguagesの選択ができます。ここで今回表示したい言語を選んでください。
複数選択することができますが、重たくなる原因になるので最小限の選択がおすすめです。

選びすぎてサイズが大きくなるとホームページの表示速度に影響します。

プラグインの選択

次にプラグインを選択します。プラグインでは行番号の表示やクリップボードへのコピーボタンの表示などを選択できます。今回はこの２つを選択しています。用途によってカスタマイズできますが、この２つはおすすめです。

ちなみに仕上がりにどう影響するかというとこんな感じです。

CSSとJavaScriptのダウンロード

ここまで選択すると下部に生成したJSとCSSが表示されます。これをWordPressに反映します。表示されているCSSとJSをコピーしてもいいのですが、選択するのが大変なのでダウンロードボタンを押して落としておくのがおすすめです。
必ずJSとCSS両方をダウンロードまたはコピーしておいてください。

JSはホームページに動きを付けるもの、CSSはデザインを定義しているものです。

生成したJSとCSSを貼り付ける

WordPressの投稿画面に行き、カスタムCSS、カスタムJavaScriptにそれぞれダウンロードしたCSSとJSを貼り付けます。

ブログ本文にソースコードを貼り付ける方法

ソースコードを貼り付ける際のHTMLタグ

WordPressのエディタにソースコードを貼り付けます。このときブロックエディタではなく、コードエディタを使ってください。（HTMLタグが使えるほうです。）
今回の例のように、行番号の表示であれば<pre>タグにclass=”line-numbers”の記述を追加、<code>タグにclass=”language-言語”（例えばPythonであればclass=”language-python”）を記述します。
例えばPythonコードを貼り付けるときはこのような感じになります。

<pre class="line-numbers"><code class="language-python"> ソースコードを貼り付け </code></pre>

もちろんソースコードは改行されている複数行のものでOKです。繰り返しになりますが、「class=”language-python“」の箇所は言語によって変えてください。json、yamlやhtml、javaなど。

大文字小文字スペースなど言語の指定方法がわからない場合の調べ方

どのように指定するか不明な場合はDLしたCSSやJSの中を見るとわかります。
例えばJSを言語名で検索すると下記のように出てきます。大文字小文字、スペースなどここの記載に合わせてもらえればOKです。

PR
当ブログはWordPressテーマSWELLを使用しています。非常に使いやすく、簡単にプロのようなデザインを使えるのでお勧めです！！

SWELL – シンプル美と機能性両立を両立させた、圧巻のWordPressテーマ

syo

システムエンジニア
AWSを中心としたクラウド案件に携わっています。
IoTシステムのバックエンド開発、Datadogを用いた監視開発など経験があります。
IT資格マニアでいろいろ取得しています。
AWS認定：SAP, DOP, SAA, DVA, SOA, CLF
Azure認定：AZ-104, AZ-300
ITIL Foundation
Oracle Master Bronze (DBA)
Oracle Master Silver (SQL)
Oracle Java Silver SE
■略歴
理系の大学院を卒業
IT企業に就職
AWSのシステム導入のプロジェクトを担当