Aimless Blog

remark-highlightからrehype-highlightへ

Tag:
reactnextjs

npm-check-updateで当ブログのライブラリのアップデートを行ったところ シンタックスハイライトが効かなくなったので、remark-highlightのページを訪れたら、 READMEに「もうこのパッケージは推奨されません。remarkからrehypeに変えてハイライトもrehype-highlightを使って」と書いてあったので 当ブログもrehypeに替えました。 大掛かりな変更はないのですが念のため備忘録として残しておきます。

remarkとrehypeの違いについてはNext.js のための Remark / Rehype 入門を参照してください。

パッケージをインストール

必要なパッケージは以下の５つ

  • unified
  • remark-rehype
  • remark-parse
  • rehype-highlight
  • rehype-stringify
npm install unified remark-parse remark-rehype rehype-highlight rehype-stringify

テーブル変換は今まで通りremark-gfmを使用します。

remarkからrehypeへ

remark

import { remark } from "remark";
import html from "remark-html";
import highlight from "remark-highlight.js";
import gfm from "remark-gfm";

const processedContent = await remark()
    .use(html)
    .use(highlight)
    .use(gfm)
    .process(matterResult.content);
  const contentHtml = processedContent.toString()

から
rehype

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeHighlight from 'rehype-highlight';
import rehypeStringify from 'rehype-stringify';
import gfm from "remark-gfm";

const processedContent = await unified()
    .use(remarkParse)
    .use(remarkRehype)
    .use(gfm)
    .use(rehypeHighlight)
    .use(rehypeStringify)
    .process(matterResult.content);
  const contentHtml = processedContent.toString()

に変更します。 あとは_app.jsにimport 'highlight.js/styles/github-dark.css';みたいにcssを読み込めばシンタックスハイライトが適用されます。
highlight.jsを入れてないならnpm install highlight.jsで入れておくこと。

レンダー後にシンタックスハイライトを適用する場合

remark・rehype関係なくブログの記事ファイル（[slug].jsとか[id].js）にシンタックスハイライトを適用するなら

import hljs from "highlight.js";
import { useEffect } from "react"
import 'highlight.js/styles/github-dark.css';

///以下略

useEffect(() => {
    hljs.initHighlighting();
    hljs.initHighlighting.called = false;
  },[]);

でいけると思う。

← Back to home