このブログは microCMS でコンテンツを管理しています。コンテンツ部分のフィールドにはリッチエディタを使っています。リッチエディタではレスポンスが HTML が返ってくるので、これをマークダウンに変換するため、rich-editor-to-markdown-parser というライブラリを開発しました。そのため、リッチエディタで管理しつつ、内部では marked を使ってマークダウンをパースしています。

以下はパースする具体例になります。

import parse from 'rich-editor-to-markdown-parser';

const html = '<h1>Hello World!</h1><p>This <strong>html</strong> string is <s>convert</s>into <a href="https://exampe.com">markdown.</a></p>'

parse(html); // # Hello World!\n\nThis **html** string is ~~convert~~ into [markdown.](https://exampe.com)

今回は marked が v8.0.0 になって、highlight のオプションが削除されたので、新しいバージョンでの highlight.js の実装方法を紹介します。

旧オプションについて

marked は v8.0.0 から大きくオプションの書き方が変りました。具体的に、今まで書いていた marked.setOptions という書き方は廃止され、また higilight のオプションも廃止されました。

現状ググると下記のようなオプションの指定方法が検索の上位に来ていて戸惑った方も多いのではないでしょうか。

marked.setOptions({
  langPrefix: "hljs language-",
  highlight(code, lang) {
    const language = hljs.getLanguage(lang) ? lang : "plaintext";
    return hljs.highlight(code, { language }).value;
  },
});

上記の書き方を新オプションで書き換えてみます。

新オプションでハイライトを実装する

旧 highlight と同じコードを書くには公式が出しているライブラリをインストールする必要があります。 marked-highlight のライブラリをインストールします。

npm install marked-highlight

そして、new Marked の引数に markedHighlight としてコードハイライトを実装します。あとは marked.parse にマークダウンを指定すると、綺麗にコードハイライトしてくれます。

このブログでは同じ方法で、atom-one-dark のテーマを使っています。

import { Marked } from "marked";
import { markedHighlight } from "marked-highlight";
import hljs from "highlight.js";
import "highlight.js/styles/atom-one-dark.css";

const marked = new Marked(
  markedHighlight({
    langPrefix: "hljs language-",
    highlight(code, lang) {
      const language = hljs.getLanguage(lang) ? lang : "plaintext";
      return hljs.highlight(code, { language }).value;
    },
  }),
);

marked.parse(markdown)