code-group plugin #1865

Trophime · 2024-09-12T06:46:45Z

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:

git clone slidev
virtualenv env
source env/bin/activate
npm install -g @slidev/cli
cd docs/features/
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

The text was updated successfully, but these errors were encountered:

KermanX · 2024-09-12T08:42:49Z

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 · 2024-09-12T09:32:44Z

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

Trophime · 2024-09-12T09:34:34Z

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

KermanX · 2024-09-12T09:38:30Z

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 · 2024-09-12T09:50:20Z

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

KermanX · 2024-09-12T09:53:19Z

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 · 2024-09-12T10:03:32Z

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 · 2024-09-12T10:06:28Z

This problem is kind of tricky😥

Trophime · 2024-09-12T10:55:25Z

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

KermanX · 2024-09-12T11:00:16Z

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 · 2024-09-12T12:48:39Z

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 · 2024-09-12T12:55:37Z

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 · 2024-09-12T13:06:46Z

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 · 2024-09-12T13:15:29Z

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 · 2024-09-12T16:20:38Z

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 · 2024-10-27T16:20:15Z

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

Hope it can be Integrated into slidev.

KermanX added the enhancement New feature or request label Sep 12, 2024

Trophime mentioned this issue Sep 12, 2024

test how to display the content of the tabs and switch from one tab to the other hunghg255/markdown-it-code-group#1

Open

KermanX changed the title ~~Got an error trying to use code-group~~ code-group plugin Oct 28, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

code-group plugin #1865

code-group plugin #1865

Trophime commented Sep 12, 2024

KermanX commented Sep 12, 2024

Trophime commented Sep 12, 2024

Trophime commented Sep 12, 2024

KermanX commented Sep 12, 2024 •

edited

Loading

Trophime commented Sep 12, 2024

KermanX commented Sep 12, 2024

Trophime commented Sep 12, 2024

KermanX commented Sep 12, 2024

Trophime commented Sep 12, 2024

KermanX commented Sep 12, 2024

Trophime commented Sep 12, 2024 •

edited

Loading

KermanX commented Sep 12, 2024

Trophime commented Sep 12, 2024

KermanX commented Sep 12, 2024

Trophime commented Sep 12, 2024

xyy94813 commented Oct 27, 2024

code-group plugin #1865

code-group plugin #1865

Comments

Trophime commented Sep 12, 2024

KermanX commented Sep 12, 2024

Trophime commented Sep 12, 2024

Trophime commented Sep 12, 2024

KermanX commented Sep 12, 2024 • edited Loading

Trophime commented Sep 12, 2024

KermanX commented Sep 12, 2024

Trophime commented Sep 12, 2024

KermanX commented Sep 12, 2024

Trophime commented Sep 12, 2024

KermanX commented Sep 12, 2024

Trophime commented Sep 12, 2024 • edited Loading

KermanX commented Sep 12, 2024

Trophime commented Sep 12, 2024

KermanX commented Sep 12, 2024

Trophime commented Sep 12, 2024

xyy94813 commented Oct 27, 2024

KermanX commented Sep 12, 2024 •

edited

Loading

Trophime commented Sep 12, 2024 •

edited

Loading