feat: enhance code block (#2178)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Anthony Fu <[email protected]>

Author: 3 people

demo/starter/slides.md

@@ -142,11 +142,10 @@ image: https://cover.sli.dev
 
 Use code snippets and get the highlighting directly, and even types hover!
 
-```ts {all|5|7|7-8|10|all} twoslash
+```ts [filename-example.ts] {all|4|6|6-7|9|all} twoslash
 // TwoSlash enables TypeScript hover information
 // and errors in markdown code blocks
 // More at https://shiki.style/packages/twoslash
-
 import { computed, ref } from 'vue'
 
 const count = ref(0)
@@ -155,7 +154,7 @@ const doubled = computed(() => count.value * 2)
 doubled.value = 2
 ```
 
-<arrow v-click="[4, 5]" x1="350" y1="310" x2="195" y2="334" color="#953" width="2" arrowSize="1" />
+<arrow v-click="[4, 5]" x1="350" y1="310" x2="195" y2="342" color="#953" width="2" arrowSize="1" />
 
 <!-- This allow you to embed external code blocks -->
 <<< @/snippets/external.ts#snippet

docs/components.d.ts

@@ -43,6 +43,7 @@ declare module 'vue' {
     CarbonUserSpeaker: typeof import('~icons/carbon/user-speaker')['default']
     CarbonVideo: typeof import('~icons/carbon/video')['default']
     CodeBlockWrapper: typeof import('./node_modules/@slidev/client/builtin/CodeBlockWrapper.vue')['default']
+    CodeGroup: typeof import('./node_modules/@slidev/client/builtin/CodeGroup.vue')['default']
     CodiconAdd: typeof import('~icons/codicon/add')['default']
     CodiconEye: typeof import('~icons/codicon/eye')['default']
     CodiconGlobe: typeof import('~icons/codicon/globe')['default']

docs/features/code-groups.md

@@ -0,0 +1,128 @@
+---
+depends:
+  - guide/syntax#code-block
+tags: [codeblock]
+description: |
+  Group multiple code blocks and automatically match icon by the title name.
+---
+
+# Code Groups
+
+> [!NOTE]
+> This feature requires [MDC Syntax](/features/mdc#mdc-syntax). Enable `mdc: true` to use it.
+
+You can group multiple code blocks like this:
+
+````md
+::code-group
+
+```sh [npm]
+npm i @slidev/cli
+```
+
+```sh [yarn]
+yarn add @slidev/cli
+```
+
+```sh [pnpm]
+pnpm add @slidev/cli
+```
+
+::
+````
+
+## Title Icon Matching
+
+`code groups` and `code block` also supports the automatically icon matching by the title name:
+
+![code-groups-demo](/assets/code-groups-demo.png)
+
+::: details All builtin icons
+
+```js
+const builtinIcons = {
+  // package managers
+  'pnpm': 'i-vscode-icons:file-type-light-pnpm',
+  'npm': 'i-vscode-icons:file-type-npm',
+  'yarn': 'i-vscode-icons:file-type-yarn',
+  'bun': 'i-vscode-icons:file-type-bun',
+  'deno': 'i-vscode-icons:file-type-deno',
+  // frameworks
+  'vue': 'i-vscode-icons:file-type-vue',
+  'svelte': 'i-vscode-icons:file-type-svelte',
+  'angular': 'i-vscode-icons:file-type-angular',
+  'react': 'i-vscode-icons:file-type-reactjs',
+  'next': 'i-vscode-icons:file-type-light-next',
+  'nuxt': 'i-vscode-icons:file-type-nuxt',
+  'solid': 'logos:solidjs-icon',
+  'astro': 'i-vscode-icons:file-type-light-astro',
+  // bundlers
+  'rollup': 'i-vscode-icons:file-type-rollup',
+  'webpack': 'i-vscode-icons:file-type-webpack',
+  'vite': 'i-vscode-icons:file-type-vite',
+  'esbuild': 'i-vscode-icons:file-type-esbuild',
+  // configuration files
+  'package.json': 'i-vscode-icons:file-type-node',
+  'tsconfig.json': 'i-vscode-icons:file-type-tsconfig',
+  '.npmrc': 'i-vscode-icons:file-type-npm',
+  '.editorconfig': 'i-vscode-icons:file-type-editorconfig',
+  '.eslintrc': 'i-vscode-icons:file-type-eslint',
+  '.eslintignore': 'i-vscode-icons:file-type-eslint',
+  'eslint.config': 'i-vscode-icons:file-type-eslint',
+  '.gitignore': 'i-vscode-icons:file-type-git',
+  '.gitattributes': 'i-vscode-icons:file-type-git',
+  '.env': 'i-vscode-icons:file-type-dotenv',
+  '.env.example': 'i-vscode-icons:file-type-dotenv',
+  '.vscode': 'i-vscode-icons:file-type-vscode',
+  'tailwind.config': 'vscode-icons:file-type-tailwind',
+  'uno.config': 'i-vscode-icons:file-type-unocss',
+  'unocss.config': 'i-vscode-icons:file-type-unocss',
+  '.oxlintrc': 'i-vscode-icons:file-type-oxlint',
+  'vue.config': 'i-vscode-icons:file-type-vueconfig',
+  // filename extensions
+  '.mts': 'i-vscode-icons:file-type-typescript',
+  '.cts': 'i-vscode-icons:file-type-typescript',
+  '.ts': 'i-vscode-icons:file-type-typescript',
+  '.tsx': 'i-vscode-icons:file-type-typescript',
+  '.mjs': 'i-vscode-icons:file-type-js',
+  '.cjs': 'i-vscode-icons:file-type-js',
+  '.json': 'i-vscode-icons:file-type-json',
+  '.js': 'i-vscode-icons:file-type-js',
+  '.jsx': 'i-vscode-icons:file-type-js',
+  '.md': 'i-vscode-icons:file-type-markdown',
+  '.py': 'i-vscode-icons:file-type-python',
+  '.ico': 'i-vscode-icons:file-type-favicon',
+  '.html': 'i-vscode-icons:file-type-html',
+  '.css': 'i-vscode-icons:file-type-css',
+  '.scss': 'i-vscode-icons:file-type-scss',
+  '.yml': 'i-vscode-icons:file-type-light-yaml',
+  '.yaml': 'i-vscode-icons:file-type-light-yaml',
+  '.php': 'i-vscode-icons:file-type-php',
+}
+```
+
+:::
+
+## Custom Icon
+
+You can also specify the icon manually by the following steps:
+
+1. Add the icon to the `uno.config.ts` file:
+
+```ts [uno.config.ts] {3-5}
+import { defineConfig } from 'unocss'
+
+export default defineConfig({
+  safelist: [
+    'i-vscode-icons:file-type-coverage',
+  ],
+})
+```
+
+2. Use the icon in the code block with the `~icon~` syntax:
+
+````md
+```sh [npm ~i-vscode-icons:file-type-coverage~]
+npm i @slidev/cli
+```
+````

docs/guide/syntax.md

@@ -148,6 +148,7 @@ More about code blocks:
 <LinkCard link="features/shiki-magic-move" />
 <LinkCard link="features/twoslash" />
 <LinkCard link="features/import-snippet" />
+<LinkCard link="features/code-groups" />
 
 ## LaTeX Blocks {#latex-block}
 

docs/public/assets/code-groups-demo.png

@@ -12,12 +12,13 @@ Learn more: https://sli.dev/guide/syntax.html#line-highlighting
 -->
 
 <script setup lang="ts">
-import type { PropType } from 'vue'
+import type { PropType, Ref } from 'vue'
 import { useClipboard } from '@vueuse/core'
-import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { computed, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import { CLASS_VCLICK_HIDDEN, CLICKS_MAX } from '../constants'
 import { useSlideContext } from '../context'
 import { configs } from '../env'
+import TitleIcon from '../internals/TitleIcon.vue'
 import { makeId, updateCodeHighlightRange } from '../logic/utils'
 
 const props = defineProps({
@@ -45,6 +46,10 @@ const props = defineProps({
     type: String,
     default: undefined,
   },
+  title: {
+    type: String,
+    default: undefined,
+  },
 })
 
 const { $clicksContext: clicks } = useSlideContext()
@@ -115,6 +120,13 @@ function copyCode() {
   if (code)
     copy(code)
 }
+
+// code block title
+const activeTitle = inject<Ref<string> | null>('activeTitle', null)
+
+const isBlockTitleShow = computed(() => {
+  return activeTitle === null && props.title
+})
 </script>
 
 <template>
@@ -123,17 +135,26 @@ function copyCode() {
     class="slidev-code-wrapper relative group"
     :class="{
       'slidev-code-line-numbers': props.lines,
+      'active': activeTitle === title,
     }"
     :style="{
       'max-height': props.maxHeight,
       'overflow-y': props.maxHeight ? 'scroll' : undefined,
       '--start': props.startLine,
     }"
+    :data-title="title"
   >
+    <div v-if="isBlockTitleShow" class="slidev-code-block-title">
+      <TitleIcon :title="title" />
+      <div class="leading-1em">
+        {{ title.replace(/~([^~]+)~/g, '').trim() }}
+      </div>
+    </div>
     <slot />
     <button
       v-if="configs.codeCopy"
-      class="slidev-code-copy absolute top-0 right-0 transition opacity-0 group-hover:opacity-20 hover:!opacity-100"
+      class="slidev-code-copy absolute right-0 transition opacity-0 group-hover:opacity-20 hover:!opacity-100"
+      :class="isBlockTitleShow ? 'top-10' : 'top-0'"
       :title="copied ? 'Copied' : 'Copy'" @click="copyCode()"
     >
       <ph-check-circle v-if="copied" class="p-2 w-8 h-8" />

packages/client/builtin/CodeBlockWrapper.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { onMounted, provide, ref, useTemplateRef } from 'vue'
+import TitleIcon from '../internals/TitleIcon.vue'
+
+const codeGroupBlocksRef = useTemplateRef('codeGroupBlocksRef')
+const activeTitle = ref('')
+
+provide('activeTitle', activeTitle)
+const tabs = ref<string[]>([])
+
+onMounted(() => {
+  const codeGroupBlocks = codeGroupBlocksRef.value
+  let isActiveSet = false
+
+  codeGroupBlocks?.querySelectorAll('.slidev-code-wrapper')?.forEach((block) => {
+    const title = block.getAttribute('data-title') || ''
+    if (title) {
+      if (!isActiveSet) {
+        activeTitle.value = title
+        isActiveSet = true
+      }
+      tabs.value.push(title)
+    }
+  })
+})
+</script>
+
+<template>
+  <div class="slidev-code-group">
+    <div class="slidev-code-group-tabs">
+      <div v-for="tab in tabs" :key="tab" class="flex items-center">
+        <div
+          class="slidev-code-tab"
+          :style="{
+            borderColor: activeTitle === tab ? 'var(--slidev-theme-primary)' : 'transparent',
+            color: activeTitle === tab ? 'var(--slidev-code-tab-active-text-color)' : 'var(--slidev-code-tab-text-color)',
+          }"
+          @click="activeTitle = tab"
+        >
+          <TitleIcon :title="tab" />
+
+          <div>
+            {{ tab.replace(/~([^~]+)~/g, '').trim() }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div ref="codeGroupBlocksRef" class="slidev-code-group-blocks">
+      <slot />
+    </div>
+  </div>
+</template>

packages/client/builtin/CodeGroup.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+}>()
+
+const builtinIcons: Record<string, string> = {
+  // package managers
+  'pnpm': 'i-vscode-icons:file-type-light-pnpm',
+  'npm': 'i-vscode-icons:file-type-npm',
+  'yarn': 'i-vscode-icons:file-type-yarn',
+  'bun': 'i-vscode-icons:file-type-bun',
+  'deno': 'i-vscode-icons:file-type-deno',
+  // frameworks
+  'vue': 'i-vscode-icons:file-type-vue',
+  'svelte': 'i-vscode-icons:file-type-svelte',
+  'angular': 'i-vscode-icons:file-type-angular',
+  'react': 'i-vscode-icons:file-type-reactjs',
+  'next': 'i-vscode-icons:file-type-light-next',
+  'nuxt': 'i-vscode-icons:file-type-nuxt',
+  'solid': 'logos:solidjs-icon',
+  'astro': 'i-vscode-icons:file-type-light-astro',
+  // bundlers
+  'rollup': 'i-vscode-icons:file-type-rollup',
+  'webpack': 'i-vscode-icons:file-type-webpack',
+  'vite': 'i-vscode-icons:file-type-vite',
+  'esbuild': 'i-vscode-icons:file-type-esbuild',
+  // configuration files
+  'package.json': 'i-vscode-icons:file-type-node',
+  'tsconfig.json': 'i-vscode-icons:file-type-tsconfig',
+  '.npmrc': 'i-vscode-icons:file-type-npm',
+  '.editorconfig': 'i-vscode-icons:file-type-editorconfig',
+  '.eslintrc': 'i-vscode-icons:file-type-eslint',
+  '.eslintignore': 'i-vscode-icons:file-type-eslint',
+  'eslint.config': 'i-vscode-icons:file-type-eslint',
+  '.gitignore': 'i-vscode-icons:file-type-git',
+  '.gitattributes': 'i-vscode-icons:file-type-git',
+  '.env': 'i-vscode-icons:file-type-dotenv',
+  '.env.example': 'i-vscode-icons:file-type-dotenv',
+  '.vscode': 'i-vscode-icons:file-type-vscode',
+  'tailwind.config': 'vscode-icons:file-type-tailwind',
+  'uno.config': 'i-vscode-icons:file-type-unocss',
+  'unocss.config': 'i-vscode-icons:file-type-unocss',
+  '.oxlintrc': 'i-vscode-icons:file-type-oxlint',
+  'vue.config': 'i-vscode-icons:file-type-vueconfig',
+  // filename extensions
+  '.mts': 'i-vscode-icons:file-type-typescript',
+  '.cts': 'i-vscode-icons:file-type-typescript',
+  '.ts': 'i-vscode-icons:file-type-typescript',
+  '.tsx': 'i-vscode-icons:file-type-typescript',
+  '.mjs': 'i-vscode-icons:file-type-js',
+  '.cjs': 'i-vscode-icons:file-type-js',
+  '.json': 'i-vscode-icons:file-type-json',
+  '.js': 'i-vscode-icons:file-type-js',
+  '.jsx': 'i-vscode-icons:file-type-js',
+  '.md': 'i-vscode-icons:file-type-markdown',
+  '.py': 'i-vscode-icons:file-type-python',
+  '.ico': 'i-vscode-icons:file-type-favicon',
+  '.html': 'i-vscode-icons:file-type-html',
+  '.css': 'i-vscode-icons:file-type-css',
+  '.scss': 'i-vscode-icons:file-type-scss',
+  '.yml': 'i-vscode-icons:file-type-light-yaml',
+  '.yaml': 'i-vscode-icons:file-type-light-yaml',
+  '.php': 'i-vscode-icons:file-type-php',
+}
+
+function matchIcon(title: string) {
+  const colonMatch = title.match(/~([^~]+)~/g)
+  if (colonMatch && colonMatch.length > 0) {
+    const icon = colonMatch[0].slice(1, -1)
+    return icon
+  }
+
+  const sortedKeys = Object.keys(builtinIcons).sort((a, b) => b.length - a.length)
+  for (const key of sortedKeys) {
+    if (title.toLowerCase().includes(key.toLowerCase())) {
+      return builtinIcons[key]
+    }
+  }
+  return ''
+}
+</script>
+
+<template>
+  <div v-if="matchIcon(title)" :class="`${matchIcon(title)} w-3.5 h-3.5 relative`" />
+</template>