Is there a way to append metadata string to code blocks?

[TomerAberbach]

Background

For my Docusaurus website, https://lfi.dev, I'm using typedoc-plugin-markdown to generate API docs from my TypeScript files, and it's working great!

I've built a feature for my website where I can add the meta string playground to my code blocks so that they display an "Open in Playground" button. For example, you can see a few examples of ```js playground in this file: https://raw.githubusercontent.com/TomerAberbach/lfi/refs/heads/main/website/docs/recipes.mdx

And you can see how they render here:
https://lfi.dev/docs/recipes

Goal

I would like to add "Open in Playground" buttons to all the code blocks in my TSDocs.

Current Approach

Of course, one way I could do that is by adding playground to the TSDocs, but this does feel a bit weird because these docs are not just for the website. They are also for the *.d.ts files shipped with the library itself, and it seems a little weird to ship the library with a bunch of playground meta strings that do nothing.

Future Approach?

Is there a way I could append a metadata string to all code blocks as a step in the markdown generation? If not, then this might not be a big deal and I can probably just include playground in the TSDocs, but I figured I'd bring up this use-case in case you think it'd be broadly useful to add some feature/option around it.

Thanks in advance :)

---

EDIT: I found out about typedoc-plugin-remark and try to use it with a custom remark plugin that adds playground to codeBlockNode.meta, but it seems that adding:

• typedoc-plugin-remark to plugin: [...]
• remarkPlugins

Just causes Typedoc to complain about remarkPlugins being unknown... Maybe there's some weird incompatibility here with docusaurus-plugin-typedoc? Not sure

[tgreyuk]

@TomerAberbach apologies for delayed reply.

This could be achieved with remark. Unfortunately there was a bug in docusaurus-plugin that was preventing the remark plugin being loaded properly but that is fixed now.

I have a working example here - https://github.com/typedoc2md/typedoc-plugin-markdown-scratchpad/tree/main/issues/724. This example isn't running with Docusaurus, but I have also tested with docusaurus-plugin-typedoc@1.1.1.

Your config would look something like this:

docusaurus.config.js

 plugin: ["typedoc-plugin-remark"],
 remarkPlugins: ["./remark-add-playground.mjs"]

remark-add-playground.mjs

import { visit } from "unist-util-visit";

export default function addPlayground() {
  return (tree) => {
    visit(tree, "code", (node) => {
      node.meta = `playground`;
    });
  };
}

As an alternative to the above you could also parse content as a string and use regex to achieve similar by listening to TypeDoc page events as per https://www.typedoc-plugin-markdown.org/api-docs/Document.Customizing-Output#page-events .

Hope this helps. :)

[TomerAberbach]

Thanks for the fix!

And funny, I think the code I wrote for my remark plugin is identical to what you have there 😆