vue中使用Highlight.js实现格式化代码显示

白桃与猫

已于 2024-10-17 14:52:02 修改

阅读量921

点赞数 24

分类专栏：前端常见用法文章标签： javascript vue.js 前端

于 2024-10-17 14:48:43 首次发布

本文链接：https://blog.csdn.net/qq_52395343/article/details/142654912

版权

前端常见用法专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1. 安装Highlight.js

npm install highlight.js

2. Highlight.js基础使用

html中使用：界面效果
在这里插入图片描述

<template>
  <div class="p-24">
    <h2>代码高亮示例</h2>
    <pre>
      <code class="language-js" v-html="highlightedCode"></code></pre>
  </div>
</template>
<script setup lang="ts">
import { watch, onMounted } from "vue";
import hljs from "highlight.js";
// 加载默认主题
import "highlight.js/styles/default.css";

const html = `
<!DOCTYPE html>
  <html lang="zh">
    <head>
      <meta charset="UTF-8" />
      <title>简单 HTML 文档</title>
    </head>
    <body>
      <!-- 简单 HTML 文档 -->
      <h1 id="welcome">欢迎来到我的网站</h1>
      <p class="title">这是一个简单的 HTML 页面。</p>
      <ul>
        <li>项目 1</li>
        <li>项目 2</li>
        <li>项目 3</li>
      </ul>

      <img src="example.jpg" alt="示例图片" />

      <footer>
        <p> 2024 我的网站</p>
      </footer>
    </body>
  </html>`;
const highlightedCode = hljs.highlight(html, { language: "html" }).value;

onMounted(() => {
  // 高光全部
  hljs.highlightAll();
});
</script>
<style scoped>
</style>

🔍查看Highlight.js支持的内置语言

3. 更改主题

在上述代码中添加以下的样式：

import "highlight.js/styles/dark.css";

在这里插入图片描述

import "highlight.js/styles/night-owl.css"

在这里插入图片描述

更多的内置主题可以参考如下的样式：
🔍Highlight.js 内置的主题样式

4. vue中使用Highlight.js

安装vue-plugin插件：

npm i @highlightjs/vue-plugin

本地使用组件：

<template>
  <div class="p-24">
    <hljsVuePlugin.component
      language="html"
      :code="html"
    ></hljsVuePlugin.component>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import hljs from "highlight.js";
import "highlight.js/styles/night-owl.css"
import hljsVuePlugin from "@highlightjs/vue-plugin";

const html = `<!DOCTYPE html>
  <html lang="zh">
    <head>
      <meta charset="UTF-8" />
      <title>简单 HTML 文档</title>
    </head>
    <body>
      <!-- 简单 HTML 文档 -->
      <h1 id="welcome">欢迎来到我的网站</h1>
      <p class="title">这是一个简单的 HTML 页面。</p>
      <ul>
        <li>项目 1</li>
        <li>项目 2</li>
        <li>项目 3</li>
      </ul>
      <img src="example.jpg" alt="示例图片" />
      <footer>
        <p> 2024 我的网站</p>
      </footer>
    </body>
  </html>`;
</script>
<style scoped>
</style>