web
Next.js × microCMSでシンタックスハイライトをつける
公開日:2022年1月30日
最終更新日:2022年1月30日
記事のソースコードにシンタックスハイライトで、コードに色付けして見やすくします。
ライブラリ追加
HTMLをパースする jsdom
とハイライトする highlight.js
を追加します。
yarn add jsdom @types/jsdom highlight.js
ハイライトのためのclass追加
jsdom
と highlight.js
を使って、コードに色付けするためにclassを追加します。
以下記事詳細ページにて getStaticProps
の必要な部分だけ書き出したコードです。
import hljs from 'highlight.js'
import { JSDOM } from 'jsdom'
export const getStaticProps: GetStaticProps<StaticProps> = async (context) => {
const { params, previewData } = context
if (!params?.category || !params?.id) {
throw new Error('Error: ID not found')
}
try {
const id = toStringId(params.id)
const data = await client.get({
endpoint: 'blog',
contentId: id,
})
const dom = new JSDOM(data.content)
dom.window.document.querySelectorAll('pre code').forEach((element) => {
element.innerHTML = hljs.highlightAuto(element.textContent ?? '').value
element.classList.add('hljs')
})
const body = dom.window.document.body.innerHTML
const category = await client.get({
endpoint: 'blog-category',
})
return {
props: {
blog: data,
body: body,
category: category.contents,
currentCategory: toStringId(params.category),
},
}
} catch (e) {
return { notFound: true }
}
}
Highlight.jsのテーマを読み込む
テーマが用意されてるので、好みのスタイルを読み込みます。
デモページがあるので、好きなテーマを探しましょう。
https://highlightjs.org/static/demo/
このブログでは Stack Overflow Light
というテーマを使ってます。
記事詳細のコンポーネントで以下のように読み込めばOKです。
import 'highlight.js/styles/stackoverflow-light.css'
参考サイト
以下の記事にあるGItHubリポジトリを参考にしました。
microCMSブログのNext.js版を作成した
Read next
- 2022年1月30日Next.js × microCMSでリッチエディタで書いた記事の画像にloading属性を付ける
- 2022年1月23日Next.js × algoliaで検索機能を実装する
- 2022年1月15日Next.js × microCMS × VercelでOGP画像をブログのタイトルで自動生成する
- 2022年1月11日Next.js × microCMSでページネーションを自作する