Custom Log Messages w/ TwoSlash

[bennettl]

Hello,

Question on using TwoSlash with Shiki: https://shiki.matsu.io/packages/twoslash#rendererrich

I want to be able to in inject custom log / error messages into the source code (e.g. "Custom annotation message" in an abitrary line, but the documentation is unclear on how to do it. Any guidance is appreciated!

I attempted to annotate my line with @log but it doesn't seem to append the class or transform it into a div necessary to display a modal

<span class="line"><span style="color:#6A737D">// @log: Custom log message</span></span>

This is setting up the transformer on client side

import {
  createTransformerFactory,
  rendererRich,
} from "https://esm.sh/@shikijs/twoslash@latest/core";
import { createTwoslashFromCDN } from "twoslash-cdn";
import { createStorage } from "https://esm.sh/unstorage@latest";
import indexedDbDriver from "https://esm.sh/unstorage@latest/drivers/indexedb";

const storage = createStorage({
  driver: indexedDbDriver({ base: "twoslash-cdn" }),
});

const twoslash = createTwoslashFromCDN({
  storage,
  compilerOptions: {
    lib: ["esnext", "dom"],
  },
});

const transformerTwoslash = createTransformerFactory(twoslash.runSync)({
  renderer: rendererRich(),
});

      const html = await codeToHtml(code, {
        lang,
        theme: "github-light",
        transformers: [transformerTwoslash],
      });
      setHtml(html);