技術ブログのコードフロックにシンタックスハイライトを導入する

概要

前回 の続き
blog-starter-typescript で作った技術ブログのコードブロックにシンタックスハイライトを導入する

作業ログ

highlight.js を導入

Install via NPM package を参考に以下で導入

yarn add highlight.js

blog-starter-typescript で使われている remark 用の plugin である remark-highlight.js を入れようと思ったが

Stability: Legacy. This package is no longer recommended for use. It’s still covered by semantic-versioning guarantees and not yet deprecated, but use of this package should be avoided. Please use remark-rehype to move from remark (markdown) to rehype (HTML) and then replace remark-highlight.js with rehype-highlight.

とのことなので rehype と rehype-highlight を使うように移行する

remark -> rehype に移行してシンタックスハイライトを当てる

rehype-highlightでmarkdownにシンタックスハイライトを適用する を参考に

remark と remark-highlight を導入する

yarn add remark-parse remark-rehype rehype-highlight rehype-stringify

markdownToHtml.ts を以下のように書き換える

import { rehype } from 'rehype'  
import rehypeHighlight from 'rehype-highlight'  
import rehypeStringify from 'rehype-stringify'  
import remarkParse from 'remark-parse'  
import remarkRehype from 'remark-rehype'  
  
export default async function markdownToHtml(markdown: string) {  
  const result = await rehype()  
    .use(remarkParse)  
    .use(remarkRehype)  
    .use(rehypeHighlight)  
    .use(rehypeStringify)  
    .process(markdown)  
  return result.toString()  
}

_app.tsx に シンタックスハイライト用のcssを読み込ませる

//...
import 'highlight.js/styles/monokai.css'
//...

highlight.js/styles の下にいろんなスタイルがあるので好みのものを当てると良い( monokai なのは個人的な好み)

ついでに remark 周りで使わなくなったものを依存から外しておく

yarn remove remark remark-html