Got an error trying to use code-group

[Trophime]

Describe the bug

I would like to use code-group feature on debian Bookworm with node v18.19.0.

Minimal reproduction

Steps to reproduce the behavior:

1. git clone slidev
2. virtualenv env
3. source env/bin/activate
4. npm install -g @slidev/cli
5. cd docs/features/
6. npm exec slidev --- --port 5050 "frontmatter-merging.md"

It fails with:

8:33:16 AM [vite] Pre-transform error: Invalid end tag.
8:33:16 AM [vite] Pre-transform error: Invalid end tag. (x2)
8:33:17 AM [vite] Internal server error: Invalid end tag.
  Plugin: vite:vue
  File: /home/LNCMI-G/christophe.trophime/github/slidev/docs/features/frontmatter-merging.md__slidev_1.md:22:1
  20 |  <span class="line"></span>
  21 |  <span class="line"><span style="--shiki-dark:#DBD7CAEE;--shiki-light:#393A34">Cover Page</span></span></code></pre>
  22 |  </CodeBlockWrapper>
     |   ^
  23 |  <p>:::</p>
  24 |  <p>They will end up being equivalent to the following page:</p>
      at createCompilerError (/home/LNCMI-G/christophe.trophime/github/slidev/slidev-env/lib/node_modules/@slidev/cli/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1363:17)
      at emitError (/home/LNCMI-G/christophe.trophime/github/slidev/slidev-env/lib/node_modules/@slidev/cli/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2944:5)
      at Object.onclosetag (/home/LNCMI-G/christophe.trophime/github/slidev/slidev-env/lib/node_modules/@slidev/cli/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2316:9)
      at Tokenizer.stateInClosingTagName (/home/LNCMI-G/christophe.trophime/github/slidev/slidev-env/lib/node_modules/@slidev/cli/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:784:16)
      at Tokenizer.parse (/home/LNCMI-G/christophe.trophime/github/slidev/slidev-env/lib/node_modules/@slidev/cli/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1142:16)
      at Object.baseParse (/home/LNCMI-G/christophe.trophime/github/slidev/slidev-env/lib/node_modules/@slidev/cli/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2983:13)
      at Object.parse (/home/LNCMI-G/christophe.trophime/github/slidev/slidev-env/lib/node_modules/@slidev/cli/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.js:898:23)
      at Object.parse$2 [as parse] (/home/LNCMI-G/christophe.trophime/github/slidev/slidev-env/lib/node_modules/@slidev/cli/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1790:24)
      at createDescriptor (file:///home/LNCMI-G/christophe.trophime/github/slidev/slidev-env/lib/node_modules/@slidev/cli/node_modules/@vitejs/plugin-vue/dist/index.mjs:64:43)
      at transformMain (file:///home/LNCMI-G/christophe.trophime/github/slidev/slidev-env/lib/node_modules/@slidev/cli/node_modules/@vitejs/plugin-vue/dist/index.mjs:2396:34)

Environment

• Slidev version: v0.49.29
• Browser: Chromium 128.0.6613.137 built on Debian GNU/Linux 12 (bookworm)
• OS: DB12

[kermanx]

Sorry, Slidev doesn't support code-group out of the box. You can install a corresponding MarkdownIt plugin manually (https://sli.dev/custom/config-vite)

[Trophime]

Ok. Could you please mention that point on the feature description? It will be very helpfull Thanks

[Trophime]

By the way, are there others slidev features that require a custom setting?

[kermanx]

Sorry, I didn't explain very clearly. frontmatter-merging.md is part of the docs, and the code-group syntax in this file is processed by VitePress - which is not a Slidev feature (And because Slidev uses Markdown to write slides, it happens that this feature can be used in Slidev via an external MarkdownIt plugin).

All features described in https://sli.dev/features/ works out of the box unless the doc says some options should be set.

[Trophime]

Sorry to bother you but I cannot figure how vite.config.ts should be like to get frontmatter-merging.md example working.

[kermanx]

Use https://github.com/hunghg255/markdown-it-code-group:

vite.config.ts:

import { defineConfig } from 'vite'
import CodeGroup from 'markdown-it-code-group'

export default defineConfig({
  slidev: {
    markdown: {
      /* markdown-it options */
      markdownItSetup(md) {
        /* custom markdown-it plugins */
        md.use(CodeGroup)
      },
    },
    /* options for other plugins */
  },
})

styles/index.ts:

import 'markdown-it-code-group/styles/code-group-colors-light.css'
import 'markdown-it-code-group/styles/code-group-colors-dark-media.css'
import 'markdown-it-code-group/styles/code-group-base.css'

[Trophime]

Just followed your suggestion: npm install --save markdown-it-code-group Then add vite.config.ts and styles/index.ts but I still have the same error when trying with frontmatter-merging.md

[kermanx]

This problem is kind of tricky😥

[Trophime]

Ok but how do you get this working in the slidev website? Which configuration do you actually use for the ci:publish?

[kermanx]

Ok but how do you get this working in the slidev website? Which configuration do you actually use for the ci:publish?

The website is built with VitePress, where this feature can be used directly. Slidev does some transformations to the Markdown before passing it to MarkdownIt, and that's why markdown-it-code-group is currently not working.

[Trophime]

I'm quite confused.

• The syntax from markdown-it-code-group.md comes from VitePress. That's why it's not working with markdown-it-code-group ?

• with your proposed setup for allowing use of markdown-it-code-group, running slidev against the test case from markdown-it-code-group should work out the box? Which is not the case...

12:40:19 PM [vite] Pre-transform error: Cannot set properties of undefined (setting 'type')
12:40:19 PM [vite] Pre-transform error: Cannot set properties of undefined (setting 'type') (x2)
12:40:19 PM [vite] Internal server error: Cannot set properties of undefined (setting 'type')
  Plugin: unplugin-vue-markdown
  File: /workspaces/course-prepost-slides/1.basic.md__slidev_1.md
      at Array.<anonymous> (file:///workspaces/course-prepost-slides/node_modules/markdown-it-code-group/dist/index.mjs:87:20)
      at Core.process (file:///workspaces/course-prepost-slides/node_modules/markdown-it/lib/parser_core.mjs:56:13)
      at MarkdownIt.parse (file:///workspaces/course-prepost-slides/node_modules/markdown-it/lib/index.mjs:511:13)
      at MarkdownItVDrag.md.parse (file:///workspaces/course-prepost-slides/node_modules/@slidev/cli/dist/chunk-YP37OZJY.js:2138:19)
      at MarkdownIt.render (file:///workspaces/course-prepost-slides/node_modules/markdown-it/lib/index.mjs:530:36)
      at file:///workspaces/course-prepost-slides/node_modules/unplugin-vue-markdown/dist/chunk-XC4FHL6S.js:156:25
      at TransformPluginContext.transform (file:///workspaces/course-prepost-slides/node_modules/unplugin-vue-markdown/dist/chunk-XC4FHL6S.js:327:37)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async PluginContainer.transform (file:///workspaces/course-prepost-slides/node_modules/vite/dist/node/chunks/dep-BaOMuo4I.js:49033:18)
      at async loadAndTransform (file:///workspaces/course-prepost-slides/node_modules/vite/dist/node/chunks/dep-BaOMuo4I.js:51856:27)

• If I use pnpm instead of npm to install slidev, I would endup with VitePress installed. I shouldn't have problem with code-group feature? But how to run slidev then: pnpm exec slidev -- --port 3030 "1.basic.md" ?

[kermanx]

VitePress and Slidev are diffrent softwares. Installing VitePress as a dependency doesn't affect how Slidev runs. Code group is a built-in feature in VitePress, but this feature is currently incompatible with Slidev.

[Trophime]

Sorry to be "rude" but then why is "code-group" feature in the doc? Hopefully, it will be in slidev, once we can properly add markdown-it-code-group plugin right?

[kermanx]

The "code-group" feature is in the doc because it visually looks better than just putting two code blocks in a column 😇. Other project's docs like Vue also uses this VitePress's feature: https://vuejs.org/guide/quick-start.html#creating-a-vue-application.

Hopefully, it will be in slidev, once we can properly add markdown-it-code-group plugin right?

Yes. By the way, I personally don't think it is a good idea to put code groups into slides 😇.

[Trophime]

I wonder if it could work using:

import pluginMdc from 'markdown-it-mdc'

const md = new MarkdownIt()
  .use(pluginMdc)

with a syntax like: https://github.com/nuxt/content/blob/b429b1810ba90dad557aa6392c18c0c9b2cc51a3/docs/content/2.usage/2.markdown.md?plain=1#L127C1-L149C3

[xyy94813]

I think the “code-group” is awesome feature compared to PPT.

Hope it can be Integrated into slidev.

[Barbapapazes]

Hey 👋,

The main issue here is the transformCodeWrapper that wrapper ALL code blocks on the page (not each one).

Actually, I have a slide with two code blocks:

\`\`\`ts

\`\`\`\

\`\`\`sh

\`\`\`

And a custom Markdown It plugin that will add custom HTML around each code block.

It does not work and throw the same error as the original issue (CodeWrapper is applied around the two code block instead of each one separately).

To solve this, I patch the package @slidev/cli by removing transformCodeWrapper.

@@ -2054,11 +2301,11 @@ async function getMarkdownTransformers(options) {
     transformPlantUml,
     options.data.features.monaco && transformMonaco,
     ...extras.postCodeblock,
-    transformCodeWrapper,
+    // transformCodeWrapper,
     options.data.features.katex && transformKaTexWrapper,
     transformPageCSS,
     transformSlotSugar,
     ...extras.post
   ];
 }

Now, it works well!

[fruchtzwerg]

I get this error when using more than one codeblock with twoslash on a single slide.

 ```ts twoslash
 ```

 ```ts twoslash
 ```

This regex expects a range when using attributes like twoslash: https://github.com/slidevjs/slidev/blob/9e49735d66b71d9822742e0a410abf165f7ea98e/packages/slidev/node/syntax/transform/code-wrapper.ts#L5

Adding a range to my codeblocks fixed it:

 ```ts {*} twoslash
 ```

 ```ts {*} twoslash
 ```

I recommend splitting this crazy regex for transformCodeWrapper into two parts. One for catching the codeblocks and one for extracting the variables. Something like this; though I could not figure out the regex for the mapper because I'm unsure of all possible syntax variations.

ctx.s = ctx.s.split(/(```.*?```)/s).map(s => {
    if(!s.startsWith('```')) return s;

    // TODO: transform code block
    return s;
}).join('')

[yuyinws]

The Code Group feature had been release on v51.8.0.

You can check the docs for more details and feel free to give me feedback!

https://sli.dev/features/code-groups