如何在网页中展示你的源代码
如下图所示：
在做技术说明文档 或者 组件库 的时候，经常需要在网页中引用代码示例，但是直接写又很丑，所以我们来试试如何在网页中展示自己的源代码
第一步： 自定义 vite插件
首先需要一个自定义插件用来转换 vue 的自定义块
在vite.config.ts文件里
ts
import fs from 'fs'
import {baseParse} from '@vue/compiler-core'
const vueDemoPlugin = {
name: "vue-block-demo",
transform(code, path) {
if (!/vue&type=demo/.test(path)) {
return;
}
const filePath = path.split("?")[0];
//异步读取文件内容，并转为string类型
const file = fs.readFileSync(filePath).toString();
//将读取到的文件中的自定义快渲染为AST
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();
//以JSON数据类型返回
return `export default Comp => {
Comp.__sourceCode = ${JSON.stringify(main)}
Comp.__sourceCodeTitle = ${JSON.stringify(title)}
}`;
},
};
export default defineConfig({
plugins: [vue(), vueDemoPlugin],
})第二步：在要展示的源代码文件里面加上一个自定义块
比如我要展示 SwitchDemo01.vue 文件
在 <template> 加上 <demo> 自定义块，里面内容写上 title
vue
<demo>常规用法</demo>
<template>
<hx-switch v-model="value1" />
<hx-switch
v-model="value2"
class="ml-2"
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
/>
</template>
<script lang="ts" setup>
import { HxSwitch } from 'hx-gulu-ui';
import { ref } from 'vue'
const value1 = ref(true)
const value2 = ref(true)
</script>第三步： 在页面展示文件里面引用
如： showSwitch.vue 文件：
vue
<template>
<div class="doc-page">
<h2>Switch 组件示例 </h2>
<p class="doc-page-desc">表示两种相互对立的状态间的切换，多用于触发「开/关」。</p>
<div class="demo">
<h3>{{ SwitchDemo01.__sourceCodeTitle }}</h3>
<p class="doc-page-usage">绑定 `v-model` 到一个 `Boolean` 类型的变量。 可以使用 `--el-switch-on-color` 属性与 `--el-switch-off-color` 属性来设置开关的背景色</p>
<div class="demo-component">
<SwitchDemo01></SwitchDemo01>
</div>
<div class="demo-actions">
<Button>查看代码</Button>
</div>
<div class="demo-code">
<pre>{{ SwitchDemo01.__sourceCode }}</pre>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import SwitchDemo01 from '@/components/switch/SwitchDemo01.vue'
// __sourceCode 这里面是源文件去除了 <demo> 外的所有代码
console.log('SwitchDemo01', SwitchDemo01.__sourceCode)
// __sourceCodeTitle 这里面是 <demo>常规用法</demo> 里面的文字
console.log('SwitchDemo01', SwitchDemo01.__sourceCodeTitle)
</script>
<style lang="scss" scoped>
@import './style.scss';
</style>此时，已经可以在代码上显示源文件代码了，但是代码没有任何样式，很丑怎么办呢？
第四步： 引入 prismjs
-
prismjs是代码主题的插件- 官网
- 安装:
npm i prismjs
-
调用
import 引入 好像有问题，只支持
require('prismjs'),同时在window属性下 添加了Prismjs属性，大家可以自己试一下xml<script setup lang='ts'> import 'prismjs' import 'prismjs/themes/prism-okaidia.min.css' const Prism = (window as any).Prism const code = `var data = 1;`; const html = Prism.highlight(code, Prism.languages.javascript, 'javascript'); </script>示例：
vue
<template>
<div class="doc-page">
<h2>Switch 组件示例 </h2>
<p class="doc-page-desc">表示两种相互对立的状态间的切换，多用于触发「开/关」。</p>
<div class="demo">
<h3>{{ SwitchDemo01.__sourceCodeTitle }}</h3>
<p class="doc-page-usage">绑定 `v-model` 到一个 `Boolean` 类型的变量。 可以使用 `--el-switch-on-color` 属性与 `--el-switch-off-color` 属性来设置开关的背景色</p>
<div class="demo-component">
<SwitchDemo01></SwitchDemo01>
</div>
<div class="demo-actions">
<Button>查看代码</Button>
</div>
<div class="demo-code">
<pre class="language-html" v-html="html"></pre>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import SwitchDemo01 from '@/components/switch/SwitchDemo01.vue'
import 'prismjs'
import 'prismjs/themes/prism-okaidia.min.css'
const Prism = (window as any).Prism
const html = computed(() => {
return Prism.highlight(SwitchDemo01.__sourceCode, Prism.languages.html, 'html')
})
</script>
<style lang="scss" scoped>
@import './style.scss';
</style>最终效果如下图所示：
