Site cover image
Notion Blog 公式APIでコードブロックに対応する

先日 Notion API がコードブロックをサポートしました。

「やっとか」といった感じですね。

しかし、現時点ではコードブロックのキャプションにはまだ対応していないようです。

このエントリでは、Notion Blog でコードブロックに対応する方法を解説します。

APIクライアントをコードブロックに対応する

APIクライアントをコードブロックに対応しましょう。

コードブロックは CodeBlock 、コードを Code と定義しておきます。

interface CodeBlock extends Block {
  Code: Code
}

interface Code {
  Text: RichText[]
  Language: string
}

インターフェイスを定義したら type: code のとき CodeBlock を返す処理を記述していきます。

case 'code':
  const code: Code = {
    Text: item[item.type].text.map(item => {
      const text: Text = {
        Content: item.text.content,
        Link: item.text.link,
      }

      const annotation: Annotation = {
        Bold: item.annotations.bold,
        Italic: item.annotations.italic,
        Strikethrough: item.annotations.strikethrough,
        Underline: item.annotations.underline,
        Code: item.annotations.code,
        Color: item.annotations.color,
      }

      const richText: RichText = {
        Text: text,
        Annotation: annotation,
        PlainText: item.plain_text,
        Href: item.href,
      }

      return richText
    }),
    Language: item.code.language,
  }

  block = {
    Id: item.id,
    Type: item.type,
    HasChildren: item.has_children,
    Code: code,
  }
  break

次に src/pages/blog/[slug].tsxblock.Typecode の場合の表示を追加していきます。

case 'code':
  toRender.push(
    <components.Code
      key={block.Id}
      language={block.Language || ''}
    >
      {block.Code.Text.map(
        richText => richText.Text.Content
      ).join('')}
    </components.Code>
  )
  break

このときなぜか undefined が渡されるケースがあるので src/components/code.tsx でガードしておきます。

const Code = ({ children, language = 'javascript' }) => {
  if (!children) {
    return
  }
  // 省略
})

これでこのブログのようにコードブロックが表示できます。

忘れずに @notionhq/clientprismjs のアップデートも行っておきましょう。

以上です。

このエントリでは Notion Blog でコードブロックに対応する方法を解説しました。

Thank you!
Thank you!
URLをコピーしました

コメントを送る

コメントはブログオーナーのみ閲覧できます