Notion blogでhtmlコードをレンダリングして描画するコンポーネントの作成

notionにはhtmlのコードをレンダリングして表示することができない。

そのため通常のままだと楽天アフィリエイトで生成したソースなどをブログに埋め込むことができない。

そこでコードの一番使わなそうなRという言語をhtmlのレンダリング用として使うことにした。

このR選択を選択されたときはそのHTMLをレンダリングするようにした。

ソースコード

まずレンダリングするためのコンポーネントを作成する。

/src/components/notionBlocks/HtmlRenderer.tsx

"use client";

const HtmlRenderer = ({ code }: { code: string }) => {
  return (
    <div
      dangerouslySetInnerHTML={{ __html: code }}
      className="not-prose mb-5"
    />
  );
};

export default HtmlRenderer;

codeを変換してるところに以下のような条件を追加する。

※コピペなのでMermaidの変換も混じってる。

import HtmlRenderer from "@/components/notionBlocks/HtmlRenderer";

const customCode = (props: any) => {
  const { children, className, node, ...rest } = props;
  const match = /language-(\w+)/.exec(className || "");
  return match ? (
    match[1] === "mermaid" ? (
      <Mermaid code={node.children[0].value} />
    ) : match[1] === "r" ? (
      <HtmlRenderer code={node.children[0].value} />
    ) : (
      <SyntaxHighlighter language={match[1]} style={vscDarkPlus} PreTag="pre">
        {String(children).replace(/\n$/, "")}
      </SyntaxHighlighter>
    )
  ) : (
    <code {...rest} className={className}>
      {children}
    </code>
  );
};