
当サイトでは記事は全てMarkdownファイルで作成・管理しています。Markdown ファイルをサイトで表示させるためにはHTMLに変換する必要があります。Markdown を解析してHTMLに変換する軽量のコンパイラ [marked](https://marked.js.org/) を使用しています。

[marked 公式ドキュメント](https://marked.js.org/)  
[marked GitHub](https://github.com/markedjs/marked)

marked を使用した Next.js での Markdown のカスタマイズ方法を紹介します。（記事内のコードはTypeScriptで記述しています。）

## インストール

```bash
npm install marked
```

## sanitize（XSS攻撃対策）

sanitize （サニタイズ・サニタイジング）とは

> 《消毒の意》インターネット上で、掲示板（BBS）などの入力フォームに入力されたテキストデータから、HTMLのタグやスクリプト言語などを検出し、別の安全な文字列に置き換えること。悪意あるプログラムなどが実行されるのを防ぐためのもの。無害化。サニタイズ。サニタイゼーション。  
> 引用: [サニタイジングとは何？わかりやすく解説 Weblio辞書](https://www.weblio.jp/content/%E3%82%B5%E3%83%8B%E3%82%BF%E3%82%A4%E3%82%B8%E3%83%B3%E3%82%B0)

marked は出力するHTMLを sanitize しないため、sanitize 用のライブラリで別途対応する必要があります。[公式ドキュメント](https://marked.js.org/#usage)では sanitize 用のライブラリとして、[DOMPurify](https://github.com/cure53/DOMPurify) が推奨されており、ほかに [js-xss](https://github.com/leizongmin/js-xss) や [sanitize-html](https://github.com/apostrophecms/sanitize-html) 、 [insane](https://github.com/bevacqua/insane) が紹介されています。

当サイトでは公式推奨の DOMPurify を使用しますが、Next.js の SSG や ISR を使用しているためか公式サイトの記述そのままでは機能しませんでした。

「[DOMPurify.sanitize is not a function](https://github.com/cure53/DOMPurify/issues/526)」 の issue を参考に [isomorphic-dompurify](https://github.com/kkomelin/isomorphic-dompurify) を使用することでエラーが解消され、Markdownが表示されるようになりました。

### インストール

```bash
npm i isomorphic-dompurify
```

### 導入例

```jsx
import DOMPurify from "isomorphic-dompurify";
import { marked } from "marked";

const Post = ({ post }) => {
  const dirty = marked(post);
  return (
    <article dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(dirty) }} />
  );
};
```

## シンタックスハイライト（Prism.js）

記事内のコードブロックのシンタックスハイライトには [Prism.js](https://prismjs.com/) を使用しています。

marked のThe parse function を使用して設定します。

### インストール

```bash
npm i prismjs
```

### 導入例

```jsx
import Prism from "prismjs";
import { marked } from "marked";

const Post = ({ post }) => {
  const renderer = new marked.Renderer();

  // Set options
  marked.setOptions({
    renderer,
    highlight: function (code, lang) {
      if (Prism.languages[lang]) {
        return Prism.highlight(code, Prism.languages[lang], lang);
      } else {
        return code;
      }
    },
  });

  return <article dangerouslySetInnerHTML={{ __html: marked.parse(post) }} />;
};
```

## 目次（Table of Contents）

parser に渡されるトークンの配列を構築する `lexer` を使用します。

```jsx
marked.lexer(post);
```

以下のようなMarkdown本文のトークン配列が取得できます。

```jsx
[
  {
    type: "heading",
    raw: "## Headline Text",
    depth: 2,
    text: "Headline Text",
    tokens: Array(1),
  },
  {
    type: "paragraph",
    raw: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod te",
  },
  {
    type: "heading",
    raw: "### Headline Text",
    depth: 3,
    text: "Headline Text",
    tokens: Array(1),
  },
  {
    type: "paragraph",
    raw: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod te",
  },
  {
    type: "paragraph",
    raw: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod te",
  },
];
```

取得したトークン配列にフィルターをかけて、見出しに当たる `heading` のみを取得して、 `map()` でhtmlタグなどを適宜追加して整えます。

h2, h3 などの見出しのレベルは `depth` で取得できるので、当サイトではカスタムデータ属性の `data-*` に `depth` を設定して見出しのレベルによってCSSを変えられるようにしています。

### 導入例

```jsx
import { marked } from "marked";

const Post = ({ post }) => {
  let toc;
  // トークン配列を取得
  const tokens = marked.lexer(post);
  // フィルターをかけて見出しのみを取得
  const headings = tokens.filter(token => token.type === "heading");
  // map()で整える
  toc = headings.map((heading: any, index: any) => {
    let target = heading.text.replace(/ /g, "-").replace(".", "").toLowerCase()
    return (
      <li key={index} data-depth={heading.depth}>
        <Link href={`#${target}`}>
          <a href="dummy">{heading.text}</a>
        </Link>
      </li>
    )
  });

  return (
    <ul>{toc}</ul>
  );
}

```

## 出力されるhtmlタグのカスタマイズ

`renderer` を使用して特定の html 出力を定義することができます。

カスタマイズできるタグ例

- code(string code, string infostring, boolean escaped)
- list(string body, boolean ordered, number start)
- paragraph(string text)
- link(string href, string title, string text)
- image(string href, string title, string text)　など

その他のオプション等は[公式ドキュメント](https://marked.js.org/using_pro#renderer)でご確認ください。

### 導入例: link（aタグ）

```jsx
import { marked } from "marked";

const Post = ({ post }) => {
  const renderer = new marked.Renderer();

  renderer.link = function (href: string, title: string, text: string) {
    return `<a href="${href}" target="_blank" rel="noopener noreferrer">${text}</a>`
  }

  marked.setOptions({
    renderer,
  });

  return (
    <article dangerouslySetInnerHTML={{ __html: marked.parse(post) }} />
  );
}
```

## Reference 参照

- Better solution for TOC · Issue #1489 · markedjs/marked · GitHub [https://github.com/markedjs/marked/issues/1489](https://github.com/markedjs/marked/issues/1489)（2022-8-20参照）
- Use marked and prism.js to parse markdown and add syntax highlighting in Node.js [https://gist.github.com/lightpohl/f7786afa86ff2901ef40b1b1febf14e0](https://gist.github.com/lightpohl/f7786afa86ff2901ef40b1b1febf14e0)（2022-8-23参照）
- Add support for NextJS Image - bytemeta [https://bytemeta.vip/repo/markedjs/marked/issues/2252](https://bytemeta.vip/repo/markedjs/marked/issues/2252%EF%BC%882022-8-23%E5%8F%82%E7%85%A7%EF%BC%89)（2022-8-23参照）


Next.js + Markdown (marked) で作るブログサイト

Tags