Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 30963d6

Browse filesBrowse files
yuyinwsyuyinws
authored
feat: add title bar support for shiki magic move (#2187)
1 parent 66649a1 commit 30963d6
Copy full SHA for 30963d6

File tree

Expand file treeCollapse file tree

4 files changed

+17
-6
lines changed
Filter options
Expand file treeCollapse file tree

4 files changed

+17
-6
lines changed

‎docs/features/code-groups.md

Copy file name to clipboardExpand all lines: docs/features/code-groups.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ pnpm add @slidev/cli
3333

3434
## Title Icon Matching
3535

36-
`code groups` and `code block` also supports the automatically icon matching by the title name.
36+
`code groups`, `code block` and [`Shiki Magic Move`](/features/shiki-magic-move) also supports the automatically icon matching by the title name.
3737

3838
![code-groups-demo](/assets/code-groups-demo.png)
3939

‎packages/client/builtin/ShikiMagicMove.vue

Copy file name to clipboardExpand all lines: packages/client/builtin/ShikiMagicMove.vue
+11Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { useNav } from '../composables/useNav'
99
import { CLICKS_MAX } from '../constants'
1010
import { useSlideContext } from '../context'
1111
import { configs } from '../env'
12+
import TitleIcon from '../internals/TitleIcon.vue'
1213
import { makeId, updateCodeHighlightRange } from '../logic/utils'
1314
1415
const props = defineProps({
@@ -28,6 +29,10 @@ const props = defineProps({
2829
type: Boolean,
2930
default: configs.lineNumbers,
3031
},
32+
title: {
33+
type: String,
34+
default: '',
35+
},
3136
})
3237
3338
const steps = JSON.parse(lz.decompressFromBase64(props.stepsLz)) as KeyedTokensInfo[]
@@ -112,6 +117,12 @@ onMounted(() => {
112117

113118
<template>
114119
<div ref="container" class="slidev-code-wrapper slidev-code-magic-move relative">
120+
<div v-if="title" class="slidev-code-block-title">
121+
<TitleIcon :title="title" />
122+
<div class="leading-1em">
123+
{{ title.replace(/~([^~]+)~/g, '').trim() }}
124+
</div>
125+
</div>
115126
<ShikiMagicMovePrecompiled
116127
class="slidev-code relative shiki overflow-visible"
117128
:steps="steps"

‎packages/slidev/node/syntax/transform/magic-move.ts

Copy file name to clipboardExpand all lines: packages/slidev/node/syntax/transform/magic-move.ts
+3-3Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { codeToKeyedTokens } from 'shiki-magic-move/core'
44
import { reCodeBlock } from './code-wrapper'
55
import { normalizeRangeStr } from './utils'
66

7-
const reMagicMoveBlock = /^````(?:md|markdown) magic-move *(\{[^}]*\})?([^ \n]*)\n([\s\S]+?)^````$/gm
7+
const reMagicMoveBlock = /^````(?:md|markdown) magic-move(?: *\[([^\]]*)\])?(?: *(\{[^}]*\}))? *([^ \n]*)\n([\s\S]+?)^````$/gm
88

99
function parseLineNumbersOption(options: string) {
1010
return /lines: *true/.test(options) ? true : /lines: *false/.test(options) ? false : undefined
@@ -16,7 +16,7 @@ function parseLineNumbersOption(options: string) {
1616
export function transformMagicMove(ctx: MarkdownTransformContext) {
1717
ctx.s.replace(
1818
reMagicMoveBlock,
19-
(full, options = '{}', _attrs = '', body: string) => {
19+
(full, title = '', options = '{}', _attrs = '', body: string) => {
2020
const matches = Array.from(body.matchAll(reCodeBlock))
2121

2222
if (!matches.length)
@@ -33,7 +33,7 @@ export function transformMagicMove(ctx: MarkdownTransformContext) {
3333
}, lineNumbers)
3434
})
3535
const compressed = lz.compressToBase64(JSON.stringify(steps))
36-
return `<ShikiMagicMove v-bind="${options}" steps-lz="${compressed}" :step-ranges='${JSON.stringify(ranges)}' />`
36+
return `<ShikiMagicMove v-bind="${options}" steps-lz="${compressed}" :title='${JSON.stringify(title)}' :step-ranges='${JSON.stringify(ranges)}' />`
3737
},
3838
)
3939
}

‎test/transform-magic-move.test.ts

Copy file name to clipboardExpand all lines: test/transform-magic-move.test.ts
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ Some text after
3636
3737
Some text before
3838
39-
<ShikiMagicMove v-bind="{}" steps-lz="NobwRAxg9gJgpmAXGA9CgBAFQBYEsDO6B6AhutPOgEYA2UEA1gDoB20L+UNcAdHQOYAKAOQAJODToAadAGUaueADcAhMICUYKWGwl82JGABSAMwBa2AGwBWWZgDCDAIrYA8gE0AciVwBZWQCingDMuAAs1gCqAFYACrg0AOo0SmyRAJKxAB78lgCeAO5aYAAuUAxwHEigkFAsJZUlhmhYeITEZBRw1HSMxVAmJvhwTYgADNrQdABOhgDElgCMlgEAHKvFJnUlsiV53EgTYBV5hqYWNnaOLh7efoEh4VFxCcmpEBnZuYUAtGNgAF8pOB2A16oZWP1BsNRgAmYLaE5ncxWWwOZxuLw+fxBUIRGLxJIpNKZHL5Ao/RaA4G1eqNQzsTgHbQDIYjJCwsKTLhQWbIOYAEVWAoCAQAnJttrt9ghxoi4KdkOdUVcMbdsQ88c9CW8SV9yT9YdSQdt6cgeFC2aNgotuTN5gF7AEAGLOsKS+rSg5y44K5EXNHXTF3HGPfEvInvT5k37BY20sGjMACS0wpDBWF23nzdb2MYC/7aLaevbeo5IpUoy7om5Y+64p4E17Ej6k74U91Ak108HIQSp9mIYLWLN8sCC4WisWuj07Uuy8t+ysB1W1kOaxsR3Wt/W/azx0FmsDCAfWyyjh1O13uotS+eHeWK4xVwNquuhrVNyN6mMUywH01ezAcRJCgGR5EUOBVFPdMAHYL35ABBYIACE1nsWcvQXR9/RVGtgw1Btwx1Fto3bH5YIAnskxPFloUHaxbVqe1+UdF03Uw+8fQrZ8V3w9V6zDbVmyjNsDQ2LsEyPTQ6KtJBrEzZjs35IURXFGdbxLGUH19J9lWrIMBI/TcSNE3cKQlSTDyAyFZLTRBrARXTcIMt91yI4Tvx3X9KX+AEAF1tAUFg4E8ABXABbKg4GmfAkBMEgaGGbQqH4eZYTgYIwjCMZBk2NL+RgVZ4DgMU8u0EpsDgCLQpIGrDBYXkYGKGgSBYArSjiqzYFlZMRnQGr8HwEh+G6ABedAxAkaQ5AUZQ1GKXR9EMJQIGCAAvABHex+GdAUoFwIxnQisKjCoJx0gyzb3CUAAHMIsmsdwAA11s8GAIBgFCnCUTaAHEBWsAJijKCoqkQGprKTbgmjswcjimZTx1WRZEMWewqU0udtO4pcwFWjbtt2/bDuO07zsuuBrruh6nte97Pu+36AaBv4qMTQx0BgocEPHVSpw0sBi2xsscOQAmtp2vaDqOk6zouq6bvux6Xrej6vp+/7AYCSl2aPQbhtG7muSUscJzUiUsawnSeIlonpdJuWKcVmmVfp9Wma11mjW66jOe5xYmMRs3+fU51OJxxcnztqWSdl8mFappXadVhmNeZ7WfjjX2OeQMaA8U4Oc1R9HMaFu9I7F/G1sl4mZbJ+XKep5W6bVxnNZZnXOxpKH/bh0ZFicouVMnMOI9F5zxZr+244b52k9d1u089zufn3HOj1osBWXsxYTeH8c2OvcfsMn6vCdj+uncT5uU/d9uM9Z/8N6AkCZog+aA5HU35mQtDVgwlbLiUcVrT0vo7BOTdk5uzbunL2OtKIvxotzWEYpeZzCPhxIBlcz4xzrhAxuLsW6pw9h3TOEke6ASTLZbe9FrQgKnhffB8dCEL2IffOBq9LKBWTLgEK4UooxTiogBKSU4ApQ6nMDKWUcrlSFpIoqJUyomBBlVGq3h6rIEatMZqQU2odRKF1fyQA===" :step-ranges='[[],[]]' />
39+
<ShikiMagicMove v-bind="{}" steps-lz="NobwRAxg9gJgpmAXGA9CgBAFQBYEsDO6B6AhutPOgEYA2UEA1gDoB20L+UNcAdHQOYAKAOQAJODToAadAGUaueADcAhMICUYKWGwl82JGABSAMwBa2AGwBWWZgDCDAIrYA8gE0AciVwBZWQCingDMuAAs1gCqAFYACrg0AOo0SmyRAJKxAB78lgCeAO5aYAAuUAxwHEigkFAsJZUlhmhYeITEZBRw1HSMxVAmJvhwTYgADNrQdABOhgDElgCMlgEAHKvFJnUlsiV53EgTYBV5hqYWNnaOLh7efoEh4VFxCcmpEBnZuYUAtGNgAF8pOB2A16oZWP1BsNRgAmYLaE5ncxWWwOZxuLw+fxBUIRGLxJIpNKZHL5Ao/RaA4G1eqNQzsTgHbQDIYjJCwsKTLhQWbIOYAEVWAoCAQAnJttrt9ghxoi4KdkOdUVcMbdsQ88c9CW8SV9yT9YdSQdt6cgeFC2aNgotuTN5gF7AEAGLOsKS+rSg5y44K5EXNHXTF3HGPfEvInvT5k37BY20sGjMACS0wpDBWF23nzdb2MYC/7aLaevbeo5IpUoy7om5Y+64p4E17Ej6k74U91Ak108HIQSp9mIYLWLN8sCC4WisWuj07Uuy8t+ysB1W1kOaxsR3Wt/W/azx0FmsDCAfWyyjh1O13uotS+eHeWK4xVwNquuhrVNyN6mMUywH01ezAcRJCgGR5EUOBVFPdMAHYL35ABBYIACE1nsWcvQXR9/RVGtgw1Btwx1Fto3bH5YIAnskxPFloUHaxbVqe1+UdF03Uw+8fQrZ8V3w9V6zDbVmyjNsDQ2LsEyPTQ6KtJBrEzZjs35IURXFGdbxLGUH19J9lWrIMBI/TcSNE3cKQlSTDyAyFZLTRBrARXTcIMt91yI4Tvx3X9KX+AEAF1tAUFg4E8ABXABbKg4GmfAkBMEgaGGbQqH4eZYTgYIwjCMZBk2NL+RgVZ4DgMU8u0EpsDgCLQpIGrDBYXkYGKGgSBYArSjiqzYFlZMRnQGr8HwEh+G6ABedAxAkaQ5AUZQ1GKXR9EMJQIGCAAvABHex+GdAUoFwIxnQisKjCoJx0gyzb3CUAAHMIsmsdwAA11s8GAIBgFCnCUTaAHEBWsAJijKCoqkQGprKTbgmjswcjimZTx1WRZEMWewqU0udtO4pcwFWjbtt2/bDuO07zsuuBrruh6nte97Pu+36AaBv4qMTQx0BgocEPHVSpw0sBi2xsscOQAmtp2vaDqOk6zouq6bvux6Xrej6vp+/7AYCSl2aPQbhtG7muSUscJzUiUsawnSeIlonpdJuWKcVmmVfp9Wma11mjW66jOe5xYmMRs3+fU51OJxxcnztqWSdl8mFappXadVhmNeZ7WfjjX2OeQMaA8U4Oc1R9HMaFu9I7F/G1sl4mZbJ+XKep5W6bVxnNZZnXOxpKH/bh0ZFicouVMnMOI9F5zxZr+244b52k9d1u089zufn3HOj1osBWXsxYTeH8c2OvcfsMn6vCdj+uncT5uU/d9uM9Z/8N6AkCZog+aA5HU35mQtDVgwlbLiUcVrT0vo7BOTdk5uzbunL2OtKIvxotzWEYpeZzCPhxIBlcz4xzrhAxuLsW6pw9h3TOEke6ASTLZbe9FrQgKnhffB8dCEL2IffOBq9LKBWTLgEK4UooxTiogBKSU4ApQ6nMDKWUcrlSFpIoqJUyomBBlVGq3h6rIEatMZqQU2odRKF1fyQA===" :title='""' :step-ranges='[[],[]]' />
4040
4141
Some text after
4242
@@ -76,7 +76,7 @@ Some text after
7676
7777
Some text before
7878
79-
<ShikiMagicMove v-bind="{}" steps-lz="NobwRAxg9gJgpmAXJKA7AzlANnAdFqAcwAoByACTiwIBoACAQVUIFcsBDAJwEJSBKMDTAALdumFIwAcQAy7dgC0A1gBEsAZSUAHAAwB3AFYz06AMKEATAHYdBgOp6ALAEsAcs4CO6qwdQApAA0AMwBWIKCAMRCARUEwABcoJTgMJFAUVHiU+MloDGwEIShw9DgcxB0haAJOSQBiFQAOFQBRFoBOOKC0ePV4gE8cJEqwZP7JWXllNU1dQ2MzSxt7JzdPb19A0PCo6IBaHTAAXxpwPKzMyVw44qDS8qsq7Cha5DqW0xaIiMcunr7BggKkIxhM5IpVBptPojCZzNZbA4XO4vD5/MEwpEYnsAIzHU4ZC7lMAEQg3EplJCNJ41eqNRqmHQqQ5CbqZAFDYGjODjZCTCEzaHzOFLRGrFEbdHbLH7Cz4s49bKSYjku6UxA4nE0l71JqtDrfP7sgackagvng6ZQuawxYIlbI9ZoraY3Z7ADM8sJSuQpFV9yQOIs2teYHen2+v1Z/xNQLNPLBU0hsxhC3hyyRa1RmwxO2xvxOCsyPrAlGoUHoTFYHB4/vVOPdIfqDHdACEWgyjb1Y8MQQmLUnBTa06KHVnJS68/sQl7ziW/UUKeULNSULS3h8vj8uxy433edJLcmhbb02LHdmpa7sQA2WeKy7IASLtXL9pNt56trtQ3R42A3tuQPfkrRTYU7QzcUnRzaU3Sse9i0fMAAB1UDrcp3XjYCjyHVMRXtTMJWdXMZT2RpjgAXSELBnFQOBXBYABbAAjOBOHQJAgnYLBSiEZiyTeCw4HdRxHB0cIugEsMYEaeA4HaCShHiYQ4EY+j2DUyRUBeGA4g4ZhJHYZg2C4PZ4g4wsUHgXI0EwHB8CIMgy1oRhjJrOg6gsXhnxEMQJGQABVAAPcgAkYm9UACgItBxAB9GAABUAHkWnIKxWywQg9FMdB2AAaQATQgHF2kaYTYrgEIAgiVx3FbAK4kSZJUkQdI5yQvI7MKMBbgDLlqh1T9mm/Hcey5c0wGC0Lwsi6K4sSlK0oyrKcvyoqSrK90Kqqmq6oCg4EKJK50KQR410GsNN0jUaAPG/tJpCsKIqimL4uS1L0sy7LcsK4rSvKyrqtq5x6txQ6S1JE7EFXAbQzqelGWZG7TX3SQpqe2bXoWj7lu+ta/s27agb2vY5Us9riRVF8+s1D8wy/A0ImRvcgLRx6Zpe+b3qWr7Vt+jaAZ24HQc9cmH2JBceqXQNg3OuGru3P9u1urC2em565rexbPpWn71v+rbAd2kH9oLAkKckZyK1c6suA8ryoYbOm6hbdtOyV3dAIm9GOc17Ged1/GBcNoWSZnMXEIlqH3S1OX6gVqMwDZZWUdZwL2Y1rHuZ1vH+YNonjdBu8I6Op9o9l2HdWGxnma9+6fczrntdxvn9cJo3hf2+CS5LVDo8bNOHvVzGm5x3m9YJwXiZNsjKOo2j6KY1j2M47jeLAfj6iEkSxMUpOpLqGS5IUoJGpUtTXA0oEwG0zhdOooypMfkzODMiyKKAA" :step-ranges='[[],[]]' />
79+
<ShikiMagicMove v-bind="{}" steps-lz="NobwRAxg9gJgpmAXJKA7AzlANnAdFqAcwAoByACTiwIBoACAQVUIFcsBDAJwEJSBKMDTAALdumFIwAcQAy7dgC0A1gBEsAZSUAHAAwB3AFYz06AMKEATAHYdBgOp6ALAEsAcs4CO6qwdQApAA0AMwBWIKCAMRCARUEwABcoJTgMJFAUVHiU+MloDGwEIShw9DgcxB0haAJOSQBiFQAOFQBRFoBOOKC0ePV4gE8cJEqwZP7JWXllNU1dQ2MzSxt7JzdPb19A0PCo6IBaHTAAXxpwPKzMyVw44qDS8qsq7Cha5DqW0xaIiMcunr7BggKkIxhM5IpVBptPojCZzNZbA4XO4vD5/MEwpEYnsAIzHU4ZC7lMAEQg3EplJCNJ41eqNRqmHQqQ5CbqZAFDYGjODjZCTCEzaHzOFLRGrFEbdHbLH7Cz4s49bKSYjku6UxA4nE0l71JqtDrfP7sgackagvng6ZQuawxYIlbI9ZoraY3Z7ADM8sJSuQpFV9yQOIs2teYHen2+v1Z/xNQLNPLBU0hsxhC3hyyRa1RmwxO2xvxOCsyPrAlGoUHoTFYHB4/vVOPdIfqDHdACEWgyjb1Y8MQQmLUnBTa06KHVnJS68/sQl7ziW/UUKeULNSULS3h8vj8uxy433edJLcmhbb02LHdmpa7sQA2WeKy7IASLtXL9pNt56trtQ3R42A3tuQPfkrRTYU7QzcUnRzaU3Sse9i0fMAAB1UDrcp3XjYCjyHVMRXtTMJWdXMZT2RpjgAXSELBnFQOBXBYABbAAjOBOHQJAgnYLBSiEZiyTeCw4HdRxHB0cIugEsMYEaeA4HaCShHiYQ4EY+j2DUyRUBeGA4g4ZhJHYZg2C4PZ4g4wsUHgXI0EwHB8CIMgy1oRhjJrOg6gsXhnxEMQJGQABVAAPcgAkYm9UACgItBxAB9GAABUAHkWnIKxWywQg9FMdB2AAaQATQgHF2kaYTYrgEIAgiVx3FbAK4kSZJUkQdI5yQvI7MKMBbgDLlqh1T9mm/Hcey5c0wGC0Lwsi6K4sSlK0oyrKcvyoqSrK90Kqqmq6oCg4EKJK50KQR410GsNN0jUaAPG/tJpCsKIqimL4uS1L0sy7LcsK4rSvKyrqtq5x6txQ6S1JE7EFXAbQzqelGWZG7TX3SQpqe2bXoWj7lu+ta/s27agb2vY5Us9riRVF8+s1D8wy/A0ImRvcgLRx6Zpe+b3qWr7Vt+jaAZ24HQc9cmH2JBceqXQNg3OuGru3P9u1urC2em565rexbPpWn71v+rbAd2kH9oLAkKckZyK1c6suA8ryoYbOm6hbdtOyV3dAIm9GOc17Ged1/GBcNoWSZnMXEIlqH3S1OX6gVqMwDZZWUdZwL2Y1rHuZ1vH+YNonjdBu8I6Op9o9l2HdWGxnma9+6fczrntdxvn9cJo3hf2+CS5LVDo8bNOHvVzGm5x3m9YJwXiZNsjKOo2j6KY1j2M47jeLAfj6iEkSxMUpOpLqGS5IUoJGpUtTXA0oEwG0zhdOooypMfkzODMiyKKAA" :title='""' :step-ranges='[[],[]]' />
8080
8181
Some text after
8282

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.