build: do not precompile code demo highlight

build/loaders/convert-md-to-demo.js

@@ -3,8 +3,6 @@ const fs = require('fs')
 const path = require('path')
 const createRenderer = require('./md-renderer')
 const mdRenderer = createRenderer()
-const codeRenderer = createRenderer(false)
-// const prettier = require('prettier')
 
 const demoBlock = fs
   .readFileSync(path.resolve(__dirname, 'ComponentDemoTemplate.vue'))
@@ -15,7 +13,6 @@ function getPartsOfDemo (tokens) {
   let script = null
   let style = null
   let title = null
-  // let content = null
   const contentTokens = []
   contentTokens.links = tokens.links
   for (const token of tokens) {
@@ -74,14 +71,9 @@ ${parts.script}
 ${parts.style}
 </style>`
   }
-  mergedParts.code = marked(
-    `\`\`\`html
-${mergedParts.code}
-\`\`\``,
-    {
-      renderer: codeRenderer
-    }
-  )
+  mergedParts.code = `<n-code language="html" uri code="${encodeURIComponent(
+    mergedParts.code
+  )}" />`
   // console.log(mergedParts.code)
   return mergedParts
 }
@@ -167,10 +159,3 @@ function convertMd2Demo (text, { resourcePath, relativeUrl }) {
 }
 
 module.exports = convertMd2Demo
-// const startTime = new Date()
-// for (let i = 0; i < 100; ++i) {
-// const md = fs.readFileSync('./demo/documentation/components/input/enUS/lazyFocus.md').toString()
-// convertMd2Demo(md)
-// }
-// const endTime = new Date()
-// console.log(endTime - startTime)

src/code/src/Code.ts

@@ -1,5 +1,14 @@
-import { defineComponent, h, toRef, watch, onMounted, ref, computed } from 'vue'
-import { useTheme, useHljs } from '../../_mixins'
+import {
+  defineComponent,
+  h,
+  toRef,
+  watch,
+  onMounted,
+  ref,
+  computed,
+  PropType
+} from 'vue'
+import { useTheme, useHljs, Hljs } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { codeLight } from '../styles'
 import type { CodeTheme } from '../styles'
@@ -9,10 +18,7 @@ export default defineComponent({
   name: 'Code',
   props: {
     ...(useTheme.props as ThemeProps<CodeTheme>),
-    language: {
-      type: String,
-      default: undefined
-    },
+    language: String,
     code: {
       type: String,
       default: ''
@@ -21,9 +27,10 @@ export default defineComponent({
       type: Boolean,
       default: true
     },
-    hljs: {
-      type: Object,
-      default: undefined
+    hljs: Object as PropType<Hljs>,
+    uri: {
+      type: Boolean,
+      default: false
     }
   },
   setup (props, { slots }) {
@@ -47,7 +54,10 @@ export default defineComponent({
       if (slots.default) return
       const { value: codeEl } = codeRef
       if (!codeEl) return
-      const { code, language } = props
+      const { language } = props
+      const code = props.uri
+        ? window.decodeURIComponent(props.code)
+        : props.code
       if (language) {
         const html = createCodeHtml(language, code, props.trim)
         if (html !== null) {