How to add custom syntax highlighter to code block?

[rhmnaulia]

Hello everyone👋,

I've already searched but haven't found any information on how to add a syntax highlighter in KeyStatic. I'm using a Next.js app directory. How can I accomplish this?

[trangcongthanh]

If you're using fields.document, you can pass custom code component for DocumentRenderer

import { DocumentRenderer, DocumentRendererProps } from '@keystatic/core/renderer'

type CodeProps = {
  children: string
  language: string
}

function Code({ children, language }: CodeProps) {
  // add syntax hightlight here
}

function Renderer({ document }: DocumentProps) {
  return (
    <DocumentRenderer document={document} renderers={{ code: Code }} />
  )
}

I'm using shiki, my Code component will looklike:

import { codeToHtml } from 'shiki'

async function Code({ children, language }) {
  const html = await codeToHtml(children, {
    lang,
    theme: 'github-dark'
  })
  return <div dangerouslySetInnerHTML={{ __html: html }} />
}

If you're using fields.mdx, will can pass custom mdx syntax highlight plugin when using next-mdx-remote to render mdx content.

I'm not using fields.markdoc, but I guess it'll using the same technique as fields.mdx

[rhmnaulia]

Thank you @trangcongthanh . I adjusted the code you gave me a bit so it fits with my codebase. Thanks for the help!