如何在网页中展示源代码

如何在网页中展示你的源代码

如下图所示：

在做技术说明文档或者组件库的时候，经常需要在网页中引用代码示例，但是直接写又很丑，所以我们来试试如何在网页中展示自己的源代码

第一步：自定义 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>

最终效果如下图所示：

如何在网页中展示源代码

如何在网页中展示你的源代码

第一步： 自定义 vite插件

第二步：在要展示的源代码文件里面加上一个自定义块

第三步： 在页面展示文件里面引用

第四步： 引入 prismjs

第一步：自定义 vite插件

第三步：在页面展示文件里面引用

第四步：引入 `prismjs`