Copy to clipboard button with rehype-shiki and mdx

[nikolailehbrink]

Hi @antfu,
in a recent remix project I tried out using mdx with mdx-js/rollup and @shikijs/rehype.

I wanted to incorporate a copy to clipboard button for all my code blocks but I have a hard time doing that. Now I searched the docs on how to do that and only found out about the preprocess step mentioned in https://shiki.style/guide/transformers. I could log the initial code with that function but don't know how to proceed there.

A different solution was mentioned in this blog article and doing it with traversing the tree, but I didn't want to install yet another package (unist-util-visit) to make it work. Would be nice to get a detailed explanation on how one would tackle that problem, since it is a pretty common use case I guess.

// vite.config.ts
import mdx from "@mdx-js/rollup";
import rehypeShiki from "@shikijs/rehype";
import rehypeAutolinkHeadings from "rehype-autolink-headings";
import rehypeSlug from "rehype-slug";
import { transformerTwoslash } from "@shikijs/twoslash";
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig, ViteDevServer } from "vite";
import {
  transformerNotationDiff,
  transformerNotationHighlight,
} from "@shikijs/transformers";
import remarkGfm from "remark-gfm";
import remarkFrontmatter from "remark-frontmatter";
import remarkMdxFrontmatter from "remark-mdx-frontmatter";

export default defineConfig({
  plugins: [
    mdx({
      rehypePlugins: [
        [
          rehypeShiki,
          {
            theme: "dark-plus",
            transformers: [
              transformerNotationDiff(),
              transformerNotationHighlight(),
              transformerTwoslash({
                explicitTrigger: true,
              }),
            ],
          },
        ],
        rehypeSlug,
        rehypeAutolinkHeadings,
      ],
      remarkPlugins: [remarkGfm, remarkFrontmatter, remarkMdxFrontmatter],
      providerImportSource: "@mdx-js/react",
    }),
    remix(),
  ],
});

[maiieul]

Hey @nikolailehbrink I'm not sure this is the most elegant solution but I managed to do it with

function transformerRawStringAsProp(): ShikiTransformer {
  return {
    preprocess(code) {
      (this.meta as any).rawCodeString = code;
    },
    pre(node) {
      node.properties['rawCodeString'] = (this.meta as any).rawCodeString;
    },
  };
}

Simply pass it to the transformers array and then you can use the rawCodeString prop in your Pre component.

[maiieul]

Actually here's a cleaner solution 😄

function transformerSourceAsPreProp(): ShikiTransformer {
  return {
    pre(node) {
      node.properties['rawCodeString'] = this.source;
    },
  };
}