Configure renderer

The contentlayer-source-notion uses @notion-render/client under the hood to transform your Rich text content (Rich Text properties and pages content) into HTML that you can then use and style in your app.

#Install @notion-render/client

Run the following command to add @notion-render/client to your dependencies:

npm install @notionhq/client @notion-render/client

#Configure the renderer

Notion Rich Text is basically a list of blocks, each block has a type (e.g. image) and contains its configuration (e.g. the image url).

Each block has its own renderer called block renderer that takes in input the configuration and returns a string (the generated HTML).

You can find the list of block types on the Official Notion API documentation.

#Use plugins

There are multiple plugins available for @notion-client/render:

• @notion-render/hljs-plugin: Use Highlight.js to colorize your Code blocks.
• @notion-render/bookmark-plugin: Improve bookmark blocks by gathering the targeted website metadata.

import { makeSource } from 'contentlayer-source-notion'
import { NotionRenderer } from '@notion-render/client'
import { Client } from '@notionhq/client'
import hljs from '@notion-render/hljs-plugin'
import bookmark from '@notion-render/bookmark-plugin'

const client = new Client({ auth: process.env.NOTION_TOKEN })
const renderer = new NotionRenderer({ client })

renderer.use(bookmark)
renderer.use(hljs)

export default makeSource({
  client,
  renderer,
})

#Custom block renderer

#Create the block renderer

You can create a block renderer by using the createBlockRenderer function. The first parameter is the type of block, the second is the function used to render this type of block.

When a block has children, you can use the renderer instance to render them.

import { createBlockRenderer } from '@syneki/notion-render'

const paragraphRenderer = createBlockRenderer<ParagraphBlockObjectResponse>('paragraph', async (data, renderer) => {
  return `<p>${await renderer.render(...data.paragraph.rich_text)}</p>`
})

#Add the block renderer

You can add your block renderers directly in the constructor parameters or with the method addBlockRenderer.

import { makeSource } from 'contentlayer-source-notion'
import { NotionRenderer } from '@notion-render/client'
import { Client } from '@notionhq/client'

const client = new Client({ auth: process.env.NOTION_TOKEN })
const renderer = new NotionRenderer({ client })

renderer.addBlockRenderer(paragraphRenderer)

export default makeSource({
  client,
  renderer,
})

---