feat: enhance code block & code group

[yuyinws]

This PR add vitepress-plugin-group-icons to enhance the document's readability. And add title bar for lot of code blocks.

Screenshot

[netlify]

❌ Deploy Preview for slidev failed.

Name	Link
🔨 Latest commit	22759a4
🔍 Latest deploy log	https://app.netlify.com/projects/slidev/deploys/682993d23efecc0008667c8b

[antfu]

Thank you! Btw, are you interested in implementing the codeblock and codegroup features in Slidev's slide rendering as well? That would be a great addition!

[pkg-pr-new]

Open in StackBlitz

@slidev/client

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/client@2174

create-slidev

npm i https://pkg.pr.new/slidevjs/slidev/create-slidev@2174

create-slidev-theme

npm i https://pkg.pr.new/slidevjs/slidev/create-slidev-theme@2174

@slidev/parser

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/parser@2174

@slidev/cli

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/cli@2174

@slidev/types

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/types@2174

commit: 22759a4

[yuyinws]

Sure, I am happy to try it! And I will open another PR for it.

[himito]

Hi,

I would like to use it in my slides, so installed vitepress-plugin-group-icons. However, I have not been able to make it work :(

What I have done so far is:

• I modified vite.config.ts

import { defineConfig } from 'vite'
import { groupIconMdPlugin, groupIconVitePlugin } from 'vitepress-plugin-group-icons'

export default defineConfig({
  slidev: {
    markdown: {
      markdownItSetup(md) {
        md.use(groupIconMdPlugin)
      }
    }
  },
  plugins: [
    groupIconVitePlugin()
  ],
})

• and, then I modified ./styles/index.ts with

import 'virtual:group-icons.css'

• and finally I added to slides.md

::: code-group

import User from './User.vue'

createApp(App).use(router).mount('#app')

:::

Do you know what I would be missing? Maybe it's not the good way to use vue plugins :/

Thank you in advance,
Jaime

[yuyinws]

Hi Jaime,

This PR only add the plugin to slidev's docs.

And it can't been used to slidev's slide directly for now.

I will implementing it on Slidev's slide rendering soon.

[himito]

thank you @yuyinws