如何在网页中展示源代码

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

如下图所示：

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

第一步： 自定义 vite插件

首先需要一个自定义插件用来转换 vue 的自定义块

在vite.config.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

<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 文件：

<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属性，大家可以自己试一下

  
  

  <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>
  

  
  

  示例：

  
  
  

<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>

最终效果如下图所示：