react-markdownにブログカードを実装する

2022-04-21

2023-01-13

目次（タップして移動）

はじめに

こんにちは。自作ブログ作ってから更新する頻度、高すぎるこふです。

ブログカードをreact-markdownに埋め込む方法をお伝えします。markdownをパースしてhtmlにするものであれば、共通の考え方で使えると思います。

以下のような感じです。

どうやるか

具体的なコードと解説をします。コードは抜粋しつつなので、ご自身のコードに組み合わせてください。

ブログにはこのように書いています。


1```link
2https://blog.cohu.dev/new-blog
3```

一般にコードブロックと呼ばれる部分に挿入しています。本来はプログラミング言語ごとのコードを埋め込む場所ですが、代用しています。


1import { articleComponents } from '../articleComponents'
2;<ReactMarkdown children={markdown} components={articleComponents} />

articleComponentsは以下です。


1const customCode: CodeComponent = ({ inline, className, children }) => {
2  const match = /language-(\w+)(:?.+)?/.exec(className || '')
3  const lang = match && match[1] ? match[1] : ''
4  const filename = match && match[2] ? match[2].slice(1) : ''
5  if (lang === 'link') {
6    return (
7      <iframe
8        className="mx-auto w-full max-w-7xl dark:opacity-80"
9        src={`https://hatenablog-parts.com/embed?url=${children}`}
10      />
11    )
12  }
13  //　その他のコードブロック処理など・・・
14}
15export const articleComponents = {
16  code: customCode,
17}

ここでポイントを解説です。

react-markdownのコードブロックの性質上、classNameという変数にバックコーテーション（`）の後ろの文字列が入ります。

その部分に、プログラミング言語とファイル名を代入しています。

例えば、cohuというプログラミング言語があり、ファイル名がhoge.cohuだったとすると、以下のようになります。

hoge.cohu
1hogehoge

つまり、この文字列を正規表現を使って該当箇所の文字列を持ってくれば良い訳です。該当箇所が以下のコードです。


1const match = /language-(\w+)(:?.+)?/.exec(className || '')
2const lang = match && match[1] ? match[1] : ''
3const filename = match && match[2] ? match[2].slice(1) : ''

language-の後ろに言語、コロンの後ろにファイル名を持ってきます。

正規表現の解説は他の記事に任せるとして、必要な説明だけ。

プログラミング言語名は必須としていて、コロンより後ろのファイル名は任意で受付ます。

そうすることで、以下のようにlinkだけ指定した時に、linkという文字列を持ってくることが可能です。


1```link
2https://blog.cohu.dev/new-blog
3```

これでlinkは持ってこれたので、中身を埋め込みます。


1if (lang === 'link') {
2  //   use only inner link, why a tag rel is not customed
3  return (
4    <iframe
5      className="mx-auto w-full max-w-7xl dark:opacity-80"
6      src={`https://hatenablog-parts.com/embed?url=${children}`}
7    />
8  )
9}