Django学习第五天：Highlight.js的用法-代码高亮

最新推荐文章于 2025-10-25 00:52:12 发布

原创最新推荐文章于 2025-10-25 00:52:12 发布 · 1.8w 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#django #学习 #javascript

部署运行你感兴趣的模型镜像

让我们一起走向未来

🎓作者简介：全栈领域优质创作者
🌐个人主页：百锦再@新空间代码工作室
📞工作室：新空间代码工作室（提供各种软件服务）
💌个人邮箱：[15045666310@163.com]
📱个人微信：15045666310
🌐网站：https://meihua150.cn/
💡座右铭：坚持自己的坚持，不要迷失自己！要快乐

在这里插入图片描述

Highlight.js的用法-代码高亮

highlight.js 是一个用于在网页中高亮显示代码的 JavaScript 库，它支持多种编程语言，能够自动识别代码块并进行高亮处理。以下是它的基本用法：
在这里插入图片描述

1. 引入 `highlight.js` 库

你可以通过 CDN 或者下载文件来引入 highlight.js。以下是使用 CDN 的方法：

a. 引入 CSS 和 JavaScript

<head>
  <!-- 引入 highlight.js 样式 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
  
  <!-- 引入 highlight.js 库 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</head>

2. 准备 HTML 代码块

代码块通常是通过 <pre> 和 <code> 标签包裹的。示例如下：

<pre><code class="html">
  <!-- 你的 HTML 代码 -->
  <div class="example">
    <p>Hello, world!</p>
  </div>
</code></pre>

<pre><code class="javascript">
  // 你的 JavaScript 代码
  console.log("Hello, world!");
</code></pre>

3. 启动代码高亮

在页面加载完成后，通过 hljs.highlightAll() 方法进行高亮处理：

<script>
  // 等页面加载完成后初始化代码高亮
  document.addEventListener('DOMContentLoaded', (event) => {
    hljs.highlightAll();
  });
</script>

4. 使用特定的语言进行高亮

在这里插入图片描述

如果你知道代码块的语言类型，也可以为 <code> 标签添加类名（如 class="language-javascript"），highlight.js 会自动识别该语言并应用对应的高亮规则：

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

5. 使用自定义主题

highlight.js 提供了多种内置主题（如 default, atom-one-dark, github 等），你可以选择适合自己页面风格的主题。

示例：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/github.min.css">

6. 完整的示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Highlight.js Example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/github.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</head>
<body>
  <h1>Code Syntax Highlighting Example</h1>
  
  <pre><code class="html">
    <!-- Your HTML code here -->
    <div class="example">
      <p>Hello, world!</p>
    </div>
  </code></pre>

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

  <script>
    document.addEventListener('DOMContentLoaded', (event) => {
      hljs.highlightAll();
    });
  </script>
</body>
</html>

7. 高级用法：手动高亮特定代码块

如果你只想对特定的代码块进行高亮，可以使用 hljs.highlightBlock()：

<pre><code id="my-code" class="language-python">
  print("Hello, world!")
</code></pre>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var codeBlock = document.getElementById('my-code');
    hljs.highlightBlock(codeBlock);
  });
</script>

8. 自定义代码高亮

你还可以自定义代码高亮的样式，或者扩展 highlight.js 来支持更多的编程语言，具体可以参考它的文档和 GitHub 仓库。

WangEditor 是一个轻量级的 web 富文本编辑器，常用于网页中处理文本输入和格式化。它支持 Markdown、HTML 编辑，提供了很多易用的 API，适合做在线编辑器或博客等应用。以下是 Wangeditor 的使用和取值方法。

1. 安装 Wangeditor

首先，你需要将 Wangeditor 引入到你的项目中。你可以通过 npm 或直接在 HTML 文件中引用 CDN 方式来使用。

使用 npm 安装

npm install wangeditor --save

使用 CDN

<script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>

2. 初始化 Wangeditor

在你的 HTML 页面中，创建一个容器来放置编辑器，然后通过 JavaScript 初始化编辑器。

示例：

<div id="editor-container"></div>
<script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
<script>
  const E = window.wangEditor
  const editor = new E('#editor-container')
  editor.create()
</script>

3. 获取编辑器内容

你可以通过 Wangeditor 提供的 API 来获取编辑器中的内容。Wangeditor 支持获取 HTML 内容和 文本 内容。

获取 HTML 内容

let htmlContent = editor.txt.html()
console.log(htmlContent)

获取纯文本内容

let textContent = editor.txt.text()
console.log(textContent)

4. 设置编辑器内容

你可以通过 API 设置编辑器中的内容，使用 txt.html() 或 txt.text() 方法来设置内容。

设置 HTML 内容

editor.txt.html('<p>Hello, world!</p>')

设置纯文本内容

editor.txt.text('Hello, world!')

5. 配置 Wangeditor

Wangeditor 提供了许多配置选项，允许你自定义工具栏、菜单等。你可以通过传入配置对象来定制。

示例：配置工具栏

const editor = new E('#editor-container')
editor.config.menus = [
  'bold', 'italic', 'underline', 'strikeThrough', 'link', 'list', 'align', 'image', 'video'
]
editor.create()

6. 处理上传图片

如果你需要支持上传图片，你可以使用 Wangeditor 的图片上传功能。以下是如何配置图片上传。

配置图片上传

editor.config.uploadImgShowBase64 = true  // 开启 base64 图片上传

// 或者配置图片上传接口
editor.config.uploadImgServer = '/upload'  // 上传图片的接口
editor.config.uploadImgMaxSize = 5 * 1024 * 1024 // 图片最大大小，5MB
editor.config.uploadImgMaxLength = 10 // 最大上传图片数，10张

处理上传图片的返回

editor.config.uploadImgParams = {
  token: 'YOUR_TOKEN'  // 可传入一些额外的参数
}

editor.config.uploadImgHooks = {
  before: function (xhr, editor, files) {
    console.log('上传前')
  },
  success: function (xhr, editor, result) {
    console.log('上传成功', result)
    // 图片上传成功后的处理
  },
  fail: function (xhr, editor, result) {
    console.log('上传失败', result)
  },
  error: function (xhr, editor) {
    console.log('上传错误', xhr)
  }
}