Using Shiki in a Remark Plugin

[iamhectorsosa]

I want to use the function below for my code blocks, but I've noticed that there isn't a good plugin or integration for using shiki. I am currently using the next-mdx-remote package to parse my markdown and then map custom components as needed.

I've never build a plugin before, any suggestions on what's the easiest way to do so? I am thinking it would have to be a remark plugin that would require to walk to tree, identify the correct node type and then return the right HTML. I'm trying to keep it as simple as possible.

import { getHighlighter, Lang, Theme } from "shiki";
type options = { lang: Lang; theme: Theme };

export async function highlight(code: string, { lang, theme }: options) {
  const highlighter = await getHighlighter({ theme });
  return highlighter.codeToHtml(code, { lang });
}

[ChristianMurphy]

Heya @ekqt! 👋

First you may want to check out the existing integrations.

• https://github.com/shikijs/twoslash/tree/main/packages/remark-shiki-twoslash
• https://github.com/stefanprobst/remark-shiki
• https://github.com/leafac/rehype-shiki

If those don't meet your needs, https://unifiedjs.com/learn/ introduces abstract syntax trees and working with ASTs using plugins.

[iamhectorsosa]

Hey, @ChristianMurphy

Thanks as always for keeping an eye on GH issues/discussions. Thanks for the suggestions, I've tried several of these and wasn't happy but the one from @leafac looks pretty good!