Prism.js


<p>Prism.jsを使って、Next.jsのページ内にあるコードブロックをハイライト表示する方法をまとめていきます。</p>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#Prismjs">Prism.jsのライブラリをインストールする</a></li><li><a href="#babelrcjs">.babelrc.jsを作成する</a></li><li><a href="#Prism">ページにPrismを適用する</a></li></ul></div>
<h2><span id="Prismjs">Prism.jsのライブラリをインストールする</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ npm install prismjs
$ npm install @types/prismjs</code></pre></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ npm install babel-plugin-prismjs</code></pre></div>



<h2><span id="babelrcjs">.babelrc.jsを作成する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-file=".babelrc.js" data-lang="JavaScript"><code>module.exports = {
    presets: [
        &quot;next/babel&quot;
    ],
    plugins: [
        [&quot;prismjs&quot;,
            {
                languages: [&quot;javascript&quot;, ...], // 使用したい言語を指定
                plugins: [&quot;line-numbers&quot;, ...], // 使用したいプラグインを指定
                theme: &quot;okaidia&quot;,               // 使用したいテーマを指定
                css: true,                      // CSSを適用するか（テーマを変えたい場合はtrue）
            }
        ]
    ]
}</code></pre></div>



<h2><span id="Prism">ページにPrismを適用する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-jsx" data-lang="JSX"><code>import Prism from &#39;prismjs&#39;


export default function Home() {

	useEffect(() =&gt; {
		Prism.highlightAll();  // Prismを読み込み
	});

	return (
		... 
	)
}</code></pre></div>



<p></p>



<ul class="references">
<li><a href="https://prismjs.com/">Prism</a></li>



<li><a href="https://www.npmjs.com/package/babel-plugin-prismjs">babel-plugin-prismjs &#8211; npm</a></li>
</ul>


【Next.js】Prism.jsでコードブロックをハイライト表示する


<p>コードブロックをシンタックスハイライトする「Prism.js」のテーマをまとめてみました。</p>



<p><a href="https://prismjs.com/">https://prismjs.com/</a></p>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#_Default">⑴ Default</a></li><li><a href="#_Dark">⑵ Dark</a></li><li><a href="#_Funky">⑶ Funky</a></li><li><a href="#_Okaidia">⑷ Okaidia</a></li><li><a href="#_Twilight">⑸ Twilight</a></li><li><a href="#_Coy">⑹ Coy</a></li><li><a href="#_Solarized_Light">⑺ Solarized Light</a></li><li><a href="#_Tomorrow_Night">⑻ Tomorrow Night</a></li></ul></div>
<h2><span id="_Default">⑴ Default</span></h2>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="1024" height="581" src="https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.04.07-1024x581.png" alt="" class="wp-image-1931" srcset="https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.04.07-1024x581.png 1024w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.04.07-300x170.png 300w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.04.07-768x436.png 768w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.04.07-304x173.png 304w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.04.07-282x160.png 282w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.04.07.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h2><span id="_Dark">⑵ Dark</span></h2>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="1024" height="593" src="https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.05.38-1024x593.png" alt="" class="wp-image-1933" srcset="https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.05.38-1024x593.png 1024w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.05.38-300x174.png 300w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.05.38-768x445.png 768w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.05.38-304x176.png 304w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.05.38-282x163.png 282w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.05.38.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>theme: &quot;dark&quot;,</code></pre></div>



<h2><span id="_Funky">⑶ Funky</span></h2>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="1024" height="558" src="https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.06.02-1024x558.png" alt="" class="wp-image-1934" srcset="https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.06.02-1024x558.png 1024w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.06.02-300x164.png 300w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.06.02-768x419.png 768w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.06.02-1536x837.png 1536w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.06.02-304x166.png 304w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.06.02-282x154.png 282w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.06.02.png 1864w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>theme: &quot;funky&quot;,</code></pre></div>



<h2><span id="_Okaidia">⑷ Okaidia</span></h2>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="1024" height="580" src="https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.06.47-1024x580.png" alt="" class="wp-image-1935" srcset="https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.06.47-1024x580.png 1024w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.06.47-300x170.png 300w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.06.47-768x435.png 768w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.06.47-304x172.png 304w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.06.47-282x160.png 282w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.06.47.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>theme: &quot;okaidia&quot;,</code></pre></div>



<h2><span id="_Twilight">⑸ Twilight</span></h2>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="1024" height="592" src="https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.07.23-1024x592.png" alt="" class="wp-image-1936" srcset="https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.07.23-1024x592.png 1024w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.07.23-300x174.png 300w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.07.23-768x444.png 768w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.07.23-304x176.png 304w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.07.23-282x163.png 282w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.07.23.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>theme: &quot;twilight&quot;,</code></pre></div>



<h2><span id="_Coy">⑹ Coy</span></h2>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="1024" height="548" src="https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.07.54-1024x548.png" alt="" class="wp-image-1937" srcset="https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.07.54-1024x548.png 1024w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.07.54-300x161.png 300w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.07.54-768x411.png 768w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.07.54-304x163.png 304w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.07.54-282x151.png 282w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.07.54.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>theme: &quot;coy&quot;,</code></pre></div>



<h2><span id="_Solarized_Light">⑺ Solarized Light</span></h2>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="1024" height="576" src="https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.08.24-1024x576.png" alt="" class="wp-image-1938" srcset="https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.08.24-1024x576.png 1024w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.08.24-300x169.png 300w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.08.24-768x432.png 768w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.08.24-304x171.png 304w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.08.24-282x159.png 282w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.08.24.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>theme: &quot;solarizedlight&quot;,</code></pre></div>



<h2><span id="_Tomorrow_Night">⑻ Tomorrow Night</span></h2>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="1024" height="589" src="https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.09.00-1024x589.png" alt="" class="wp-image-1939" srcset="https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.09.00-1024x589.png 1024w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.09.00-300x173.png 300w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.09.00-768x442.png 768w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.09.00-304x175.png 304w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.09.00-282x162.png 282w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-23-13.09.00.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>theme: &quot;tomorrow&quot;,</code></pre></div>


「Prism.js」の記事一覧