.profile/blog/remarkSyntaxHighlightingPlugin.ts

import type { Plugin, Transformer } from 'unified'
import type { Literal, Node } from 'unist'
import { visit } from 'unist-util-visit'
import type { Highlighter } from 'shiki'

export interface RemarkSyntaxHighlightingPluginOptions {
  highlighter: Highlighter
}

export interface RemarkSyntaxHighlightingNode extends Node {
  lang: string
  meta: string
  children: undefined
  value: string
  data: Record<string, unknown>
}

export const remarkSyntaxHighlightingPlugin: Plugin<
  [RemarkSyntaxHighlightingPluginOptions],
  Literal
> = (options) => {
  const transformer: Transformer<RemarkSyntaxHighlightingNode> = (tree) => {
    visit<RemarkSyntaxHighlightingNode, string>(tree, 'code', (node) => {
      node.type = 'html'
      node.children = undefined
      node.value = options.highlighter.codeToHtml(node.value, {
        lang: node.lang
      })
    })
  }
  return transformer
}