記事内に「ソースコード」を記載したい時は「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>