feat: allow line highlighting accepts extract options

Author: antfu

packages/client/builtin/CodeHighlightController.vue

@@ -21,6 +21,9 @@ const props = defineProps({
   ranges: {
     default: () => [],
   },
+  at: {
+    default: undefined,
+  },
 })
 
 const clicks = inject(injectionClicks)!
@@ -40,7 +43,7 @@ const el = ref<HTMLDivElement>()
 const vm = getCurrentInstance()
 
 onMounted(() => {
-  const prev = elements.value.length
+  const prev = props.at == null ? elements.value.length : props.at
   const index = computed(() => {
     if (disabled.value)
       return props.ranges.length - 1

packages/slidev/node/plugins/markdown.ts

@@ -101,9 +101,10 @@ export function truncateMancoMark(code: string) {
  * Transform Monaco code block to component
  */
 export function transformHighlighter(md: string) {
-  return md.replace(/^```(\w+?)\s*{([\d\w*,\|-]+)}[\s\n]*([\s\S]+?)^```/mg, (full, lang = '', rangeStr: string, code: string) => {
+  return md.replace(/^```(\w+?)\s*{([\d\w*,\|-]+)}\s*({.*?})[\s\n]*([\s\S]+?)^```/mg, (full, lang = '', rangeStr: string, options = '', code: string) => {
     const ranges = rangeStr.split(/\|/g).map(i => i.trim())
-    return `\n<CodeHighlightController :ranges='${JSON.stringify(ranges)}'>\n\n\`\`\`${lang}\n${code}\n\`\`\`\n\n</CodeHighlightController>`
+    options = options.trim() || '{}'
+    return `\n<CodeHighlightController v-bind="${options}" :ranges='${JSON.stringify(ranges)}'>\n\n\`\`\`${lang}\n${code}\n\`\`\`\n\n</CodeHighlightController>`
   })
 }