そもそも zenn-markdown-html って何ですか

Zenn は、Markdown（っぽい記法）でプログラミングや技術に関する記事を書けるサービスです。
Markdown で書いたものを HTML に勝手に変換して公開してくれるので、簡単にきれいな記事を書くことができます。で、この「Markdown で書いたものを HTML に勝手に変換してくれる」部分が zenn-markdown-html です。
コイツを自分のブログに取り込むことで、個人ブログでも Zenn と同じように Markdown できれいな記事を書くことができるようになります。

動機

シンタックスハイライト（コードに色がつくやつ）を使いたかった！！これだけです。
このサイトは自分のポートフォリオとしても活用したいと考えていて、早いタイミングで導入したほうがいいかな～と思ったので。

いつになったらポートフォリオになるんだろう

導入方法（雑）

1. パッケージをインストールする。（パッケージマネージャは適宜変更してください）

yarn add zenn-markdown-html
yarn add zenn-content-css

2. こんな感じで書く。もちろん本番では markdown の部分は別ファイルから読み込むことをおすすめします。

import markdownToHtml from "zenn-markdown-html";
import "zenn-content-css";

export default function Page() {
  const markdown: string =
    '\
# サンプル\n\
\n\
```python\n\
print("Hello, World!")\n\
```\n\
\n\
::: message\n\
メッセージをここに\n\
:::\n\
';
  const htmlContent = markdownToHtml(markdown);

  return (
    <article
      className="znc" // className を znc にすることで Zenn のスタイルが適用される
      dangerouslySetInnerHTML={{ __html: htmlContent }}
    ></article>
  );
}

3. こんなページ ができる

問題点

文字色が変更できなくなってしまいました。Markdown に

<span style="color: red">色付き文字</span>

のように書いても、markdownToHtml が

<span style="color: red">色付き文字</span>

のようにタグをエスケープしてしまうためです。これは、markdownToHtml の仕様によるものです。

「でもお前、色付き文字使えてるじゃん！！」っていうツッコみがあると思うんですが、これは自分がエスケープされた文字列を正規表現で拾って、それを HTML タグに還元する処理を追加したからです。どうしても色付き文字が使いたい人は、先ほどのコードに以下のような処理を追加してください。取り急ぎ書いたものなので、もっといい方法があるかもしれません。

const htmlContent = markdownToHtml(markdown);
const pattern = /<span(.*)>(.*)<\/span>/g;
const coloredHtmlContent = htmlContent.replace(pattern, "<span$1>$2< /span>");

感想とか

思ったより簡単に導入できてサクッとやりたいことができたのでおおむね満足しています。
ただ、当たり前ではあるんですがこのままだとレイアウトが Zenn の丸パクリになっちゃうので CSS をいじって自分の好みに合わせていきたいですね。

それと、目次からジャンプできる機能もいずれは導入したいです。

参考にしたページ

こちらのページ がとても参考になりました。
一部、自分の環境に合わせて変更しています。