custom Blocks

custom Blocks可以帮助我们直接在网页上展示已经写好的代码。避免重复写相同的代码。

在需要展示的代码上面加上

<demo>
标题
</demo>

创建 vite.config.ts

// @ts-nocheck
import fs from 'fs'
import {baseParse} from '@vue/compiler-core'

export default {
  base: './',
  assetsDir: 'assets',
  vueCustomBlockTransforms: {
    demo: (options) => {
      const { code, path } = options
      const file = fs.readFileSync(path).toString()
      const parsed = baseParse(file).children.find(n => n.tag === 'demo')
      const title = parsed.children[0].content
      const main = file.split(parsed.loc.source).join('').trim()
      return `export default function (Component) {
        Component.__sourceCode = ${
        JSON.stringify(main)
      }
        Component.__sourceCodeTitle = ${JSON.stringify(title)}
      }`.trim()
    }
  }
};

引入/传入需要显示的组件

component.__sourceCode 可显示代码 component.__sourceCodeTitle 可显示标题

prismjs

prismjs是一个可以高亮展示代码的库

安装 yarn add --dev prismjs
引入 prismjs

import 'prismjs';
import 'prismjs/themes/prism-okaidia.css';

由于该库比较老，我们需要从window上取到它

const Prism = (window as any).Prism;

调用prism

const code = Prism.highlight(codeString,Prism.languages.javascript, 'javascript');

vite中如何高亮展示代码

custom Blocks

prismjs