WordPress

【WordPress】ソースコードのシンタックスハイライトは「Prism.js」がおすすめ

  /

記事内に「ソースコード」を記載したい時は「Prism.js」というシンタックスハイライトのライブラリがおすすめです。

以下、僕がおすすめする理由です。

Prism.jsをおすすめする理由：6点

(1) 他のライブラリと比べて軽量 ※1
(2) 行番号の表示・非表示が可能
(3) ソースコードのcopyが簡単にできる
(4) cssでデザインの変更が可能
(5) 有名サイトで利用されている ※2
(6) MITライセンス
—
※1 必要な「デザイン」「言語」「プラグイン」を選択してダウンロードできます。
※2 「Stripe」「React」「MDN」などで利用されています。

■「Prism.js」のURL
https://prismjs.com
 

「Prism.js」のカスタマイズ方法

コードブロックのフォントサイズを変更したい場合

cssでフォントサイズを変更します。以下のソースを参考に追加して下さい。

prism.css

pre {
	font-size: 0.85rem !important;
}

コードブロックにファイル名を表示したい場合

■ 表示例

[ここのこと]ファイル名

↑こんな感じで、コードブロックにファイル名を表示したい場合

 
上記のように、コードブロックにファイル名を表示したい場合は、下記のソースを参考に「css」と「html」を追加して下さい。

追加するcssの例

prism.css

p.prism-title {
	background: #f5f2f0;
	font-size: 90%;
	font-weight: bold !important;
	display: inline-block;
	color: #ec6d71;
	letter-spacing: 0.1em;
	margin: 0px 0px;
	padding: 3px 15px 3px 15px;
	border: 1px solid #f5f2f0;
	border-radius: 1px 5px 0px 0px;
	position: relative;
	top: 2px;
	z-index: 100;
}

 

追加するHTMLの例

HTMLの参考例

<div class="prism">
    <p class="prism-title">ファイル名</p>
    <pre class="line-numbers language-markup"><code>サンプル</code></pre>
</div>
RELATED POST