mimonjo

記事の表示エリアに react-markdown をブチ込んで、Markdownも織り交ぜて記事を書けるようにしました。

脚注記法

例えば、こんな感じ¹ に脚注を入れることができます。
自分はこういう脚注でコメントを挟む文章をよく読むので、これに憧れてたんだ...

シンタックスハイライト

プログラムコードのシンタックスハイライト² もやってみました。

export const Md: React.FC<{ children: string }> = ({ children }) => (
  <Markdown
    components={{
      h1: "h3",
      h2: "h4",
      h3: "h5",
      section: (props) => {
        return (
          <>
            <Line className={css({ marginTop: "{spacing.medium}" })} />
            <section {...props} />
          </>
        );
      },
      pre: ({ children, ...props }) => <pre {...props}>{children}</pre>,
      code: ({ children, className, node, ref, style, ...props }) => {
        const match = /language-(\w+)/.exec(className || "");

        return match ? (
          <ReactSyntaxHighlighter
            {...props}
            language={match[1]}
            style={a11yLight}
            customStyle={{ margin: 0, padding: 0, ...style }}
          >
            {String(children).replace(/\n$/, "")}
          </ReactSyntaxHighlighter>
        ) : (
          <code {...props}>{children}</code>
        );
      },
    }}
    remarkPlugins={[remarkGfm]}
  >
    {children}
  </Markdown>
);

これをやるためにPrismicのRichTextEditor³ をやめました。
思ったよりも技術的な話で書いてみたいことが多かったので、これがないと読むのも相当キツいかなと...

RichTextでブログを書くのをやめれば意外と簡単にできました⁴。

そのほか

画像を貼るのは少し面倒くさくなりました。
自分でURLを取ってきて、 ![alt text](https://example.com/image/url) とかを手で書かなくてはならなくなりました。

とはいえ、RichTextの方も残していて、どちらも見た目はほぼ変わらないようになっているので、プログラムコードを掲載しないときはRichTextの方を使うなど、使い分けしていけば良いかなと思ってます。