blog-starter-typescriptにremark-highlight.jsを当てる方法

こんにちは、たわらです。

本ブログは Vercel 社が用意しているブログスターターのblog-starter-typescriptをベースにしています。今回はこのブログにシンタックスハイライトを追加した方法のメモです。

結論、下記の記事を参考にすればできます。

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

さて今回は、rehype-highlight を使用します。

rehypejs/rehype-highlight: plugin to highlight code blocks

まずは必要なライブラリの読み込み。

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

remark-highlight.js を使用するには、markdown を html に変換する処理の方法を変更する必要があります。

lib/markdownToHtml.ts /の result 変数の定義を変更します。

こちらのコードを、、、

import { remark } from 'remark';
import html from 'remark-html';

export default async function markdownToHtml(markdown: string) {
  const result = await remark().use(html).process(markdown);
  return result.toString();
}

↓

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

export default async function markdownToHtml(markdown: string) {
  const result = await unified()
    .use(remarkParse)
    .use(remarkRehype)
    .use(rehypeHighlight)
    .use(rehypeStringify)
    .process(markdown);
  return result.toString();
}

このように処理を変えると、md ファイルのコードブロックで記述した箇所に特別な html 要素と class を付与することができます。

あとは、highlight.js の css を当てればコードに色が付きます。そのために、_app.tsx に css を読み込ませます。 (今回は hybrid.css を使用しています。)

import { AppProps } from 'next/app';
import '../styles/index.css';
import '../styles/global.css';
import 'highlight.js/styles/hybrid.css'; //追記

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

これで完了です！シンタックスハイライトがついているはずです！

また、当てられる css のテーマはたくさんあるので、お好きなのをこちらで選んでください。

https://github.com/highlightjs/highlight.js/tree/main/src/styles

こちらの demo で見比べができます。

https://highlightjs.org/static/demo/

(了)