Vue3+Vite获取Code原始文本并展示在页面内

基础设置

借助 Vite提供的方法与预格式化的文本标签<pre>在页面中展示原本内容

<template>
  <pre>{{ TestRaw }}</pre>
</template>

<script setup lang="ts">
import TestRaw from './test.vue?raw'

defineOptions({
  name: 'test',
})
</script>

<style scoped></style>

• import TestRaw from './test.vue?raw'：
  • 这行代码借助 ?raw 后缀导入 test.vue 文件的原始代码内容。?raw 是 Vite 提供的功能，它可以让你直接获取文件的原始文本内容，而非将其作为模块处理。
  • 导入的内容会被赋值给 TestRaw 变量。

• <pre> 标签用于保留文本的原始格式，包含空格和换行符，通常用来展示代码。

代码高亮

如果在这基础上，还希望代码高亮，就要使用 Prism.js插件了，Prism.js 是一个轻量级、可扩展的语法高亮库，专为现代网页设计。它支持多种编程语言，并且可以通过插件扩展功能，如行号显示、行高亮等。

//安装Prism.js编译器
npm install prismjs -S
//若不安装需要在mian.ts中引入想要的主题样式
npm install vite-plugin-prismjs -D

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { prismjsPlugin } from "vite-plugin-prismjs"
export default defineConfig(({ command }) => {
  return {
    plugins: [
      vue(),
      prismjsPlugin({
        languages: 'all',
        plugins: ['line-numbers', 'show-language', 'copy-to-clipboard', 'inline-color'], //官网有其他功能
        theme: 'tomorrow', //主题名称
        css: true,
      }),
    ],
  }
})

使用示例

在 HTML 文件中，使用 <pre><code> 标签包裹代码块，并添加 language-xxxx 类来指定语言。

<pre>
  <code class="language-javascript">
    const hello = "Hello, world!";
    console.log(hello);
  </code>
</pre>

<template>
  <pre
    :class="[
      'line-numbers',
      'show-language',
      'copy-to-clipboard',
      'inline-color',
    ]"
  ><code class="language-markup" v-html="codeString"></code></pre>
</template>

<script setup lang="ts">
import Prism from 'prismjs'
import 'prismjs/themes/prism-tomorrow.css';
import { computed, onMounted, onUpdated } from 'vue'

defineOptions({
  name: 'CodePreview',
  inheritAttrs: false,
})

const props = defineProps({
    code: {
        type: String,
    }
})

const codeString = computed(() => {
  return Prism.highlight(
    `${props.code}`,
    Prism.languages['language-markup'],
    'language-markup',
  )
})

onUpdated(() => {
  Prism.highlightAll()
})

onMounted(() => {
  // 切换更新内容时，重新调用这个方法
  Prism.highlightAll()
})
</script>