Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Got an error trying to use code-group #1865

Open
Trophime opened this issue Sep 12, 2024 · 15 comments
Open

Got an error trying to use code-group #1865

Trophime opened this issue Sep 12, 2024 · 15 comments
Labels
enhancement New feature or request

Comments

@Trophime
Copy link

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
Copy link
Member

KermanX commented Sep 12, 2024

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
Copy link
Author

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

@Trophime
Copy link
Author

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

@KermanX
Copy link
Member

KermanX commented Sep 12, 2024 •
edited
Loading

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
Copy link
Author

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

@KermanX
Copy link
Member

KermanX commented Sep 12, 2024

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
Copy link
Author

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
Copy link
Member

KermanX commented Sep 12, 2024

This problem is kind of tricky😥

@Trophime
Copy link
Author

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

@KermanX
Copy link
Member

KermanX commented Sep 12, 2024

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
Copy link
Author

Trophime commented Sep 12, 2024 •
edited
Loading

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
Copy link
Member

KermanX commented Sep 12, 2024

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
Copy link
Author

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
Copy link
Member

KermanX commented Sep 12, 2024

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 😇.

@KermanX KermanX added the enhancement New feature or request label Sep 12, 2024
@Trophime Trophime mentioned this issue Sep 12, 2024
Open
@Trophime
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Trophime @KermanX