Astro: Shiki syntax highlighting with remark-code-extra plugin doesn't work

Question

I have the following config in my astro.config.mjs file but the syntax highlighting doesn't work after I added the remark-code-extra plugin. Not sure how should I configure it to make it work. Thanks in advance!

import tokyoStorm from "./src/code-themes/tokyo-storm.json";
import codeExtra from "remark-code-extra";

export default defineConfig({
  ...
  markdown: {
    shikiConfig: {
      theme: tokyoStorm,
      wrap: true,
    },    
    remarkPlugins: [
      [codeExtra, {
        transform: node => node.meta ? ({
          before: [
            {
              type: 'element',
              tagName: 'div',
              properties: {
                class: "code-label"
              },
              children: [
                {
                  type: "element",
                  tagName: 'span',
                  children: [
                    {
                      type: "text",
                      value: node.meta
                    }
                  ]
                }
              ]
            }
          ]
        }) : null
      }]
    ]
  },
});

Answer 1

This is not working because Astro's syntax highlighting runs after all other remark plugins and remark-code-extra is wrapping the code blocks in a div before remark-shiki can add syntax highlighting to them. (remark-shiki can only add syntax highlighting to non nested code blocks)

To get around this, you can:

1. Use a rehype plugin to transform your code blocks instead of remark-code-extra. Rehype plugins run after remark plugins, so the code blocks will have Astro's syntax highlighting applied when transformed.

2. Add your own remark syntax highlighting plugin before calling remark-code-extra.