跳至主要內容

代码高亮

yzqdev2026/7/15小于 1 分钟

代码高亮

方案对比

方案特点体积
highlight.js易用，组件丰富，支持 190+ 语言~30KB
Prism.js轻量，可定制插件~8KB+
ShikiVS Code 配色，精确高亮较大

使用 highlight.js

安装

npm install highlight.js

封装组件

// Highlight.ts
import { defineComponent, h, PropType } from 'vue';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';

export default defineComponent({
  name: 'Highlight',
  props: {
    code: { type: String, required: true },
    language: { type: String as PropType<string>, default: '' },
    autodetect: { type: Boolean, default: false },
  },
  setup(props) {
    return () => {
      const lang = props.language || (props.autodetect ? undefined : 'plaintext');
      const highlighted = lang
        ? hljs.highlight(props.code, { language: lang }).value
        : hljs.highlightAuto(props.code).value;

      return h('pre', [
        h('code', { class: lang ? `language-${lang}` : '', innerHTML: highlighted }),
      ]);
    };
  },
});

使用

<highlight autodetect :code="code" />
<highlight language="javascript" code="const x = 5;" />

使用 Prism.js

安装

npm install prismjs

使用

<pre><code class="language-js">const foo = 'bar';</code></pre>

<script>
import Prism from 'prismjs';
// 语言支持
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-typescript';
import 'prismjs/components/prism-css';
import 'prismjs/themes/prism.css';
</script>

参考