feat: highlighter markdown mark

Author: antfu

demo/slides.md

@@ -1,7 +1,7 @@
 ---
 layout: cover
 download: 'https://antfu.me/talks/2021-04-29'
-# highlighter: shiki
+highlighter: shiki
 ---
 
 # Composable Vue
@@ -140,9 +140,7 @@ bar = 1 // ts-error
 
 # Reactive
 
-<CodeHighlightController :ranges="['1,6', '2,7']">
-
-```ts
+```ts {1,6|3,7}
 import { reactive } from 'vue'
 
 const foo = { prop: 0 }
@@ -152,8 +150,6 @@ foo.prop = 1
 bar.prop = 1
 ```
 
-</CodeHighlightController>
-
 <div v-click>
 
 ### Pros

packages/client/builtin/CodeHighlightController.vue

@@ -26,7 +26,11 @@ function makeid(length = 5) {
 }
 
 const prev = elements.value.length
-const index = computed(() => Math.min(Math.max(0, clicks.value - prev), props.ranges.length - 1))
+const index = computed(() => {
+  if (disabled.value)
+    return props.ranges.length - 1
+  return Math.min(Math.max(0, clicks.value - prev), props.ranges.length - 1)
+})
 const rangeStr = computed(() => props.ranges[index.value] || '')
 if (props.ranges.length >= 2 && !disabled.value) {
   const id = makeid()
@@ -43,12 +47,16 @@ onMounted(() => {
   watchEffect(() => {
     if (!el.value)
       return
-    const lines = Array.from(el.value.querySelectorAll('.line'))
-    const hightlights: number[] = parseRangeString(lines.length, rangeStr.value)
-    // console.log(hightlights, rangeStr.value)
-    lines.forEach((line, idx) => {
-      line.classList.toggle('opacity-30', !hightlights.includes(idx))
-    })
+    const duoTone = el.value.querySelector('.shiki-dark')
+    const targets = duoTone ? Array.from(el.value.querySelectorAll('.shiki')) : [el.value]
+    for (const target of targets) {
+      const lines = Array.from(target.querySelectorAll('.line'))
+      const hightlights: number[] = parseRangeString(lines.length, rangeStr.value)
+      // console.log(hightlights, rangeStr.value)
+      lines.forEach((line, idx) => {
+        line.classList.toggle('opacity-30', !hightlights.includes(idx))
+      })
+    }
   })
 })
 </script>

packages/slidev/node/plugins/markdown.ts

@@ -56,9 +56,16 @@ export async function createMarkdownPlugin(
       setups.forEach(i => i(md))
     },
     transforms: {
-      before: (config.monaco === true || config.monaco === mode)
-        ? transformMarkdownMonaco
-        : truncateMancoMark,
+      before(code) {
+        const monaco = (config.monaco === true || config.monaco === mode)
+          ? transformMarkdownMonaco
+          : truncateMancoMark
+
+        code = monaco(code)
+        code = transformHighlighter(code)
+
+        return code
+      },
     },
     ...mdOptions,
   })
@@ -91,3 +98,11 @@ export function transformMarkdownMonaco(md: string) {
 export function truncateMancoMark(code: string) {
   return code.replace(/{monaco.*?}/g, '')
 }
+
+export function transformHighlighter(md: string) {
+  // transform monaco
+  return md.replace(/\n```(\w+?)\s*{([\w,\|-]+)}[\s\n]*([\s\S]+?)\n```/mg, (full, lang = '', rangeStr: string, code: string) => {
+    const ranges = rangeStr.split('|').map(i => i.trim())
+    return `<CodeHighlightController :ranges='${JSON.stringify(ranges)}'>\n\n\`\`\`${lang}\n${code}\n\`\`\`\n\n</CodeHighlightController>`
+  })
+}