📅 最后修改于: 2023-12-03 15:40:27.545000 🧑 作者: Mango
在网页开发中，我们需要展示一些代码，比如代码示例、代码片段、配置文件等，在这些情况下，我们需要一种特殊的显示方式，这就是代码块。
在HTML中，我们可以使用<pre>和<code>标签来实现代码块的显示。在CSS中，我们可以通过border、background、font-family等属性来进行样式的设置。
不过，为了更好的展示代码并提供更好的交互体验，我们可以使用JS插件来实现。接下来，我们将介绍一些常用的JS样式显示块插件。
Highlight.js是一个轻量级的代码高亮插件，可以支持多种语言，包括HTML、CSS、JavaScript、PHP、Python等。该插件提供了330多种代码高亮方式，支持自定义主题。
使用方法：
<!-- 引入样式 -->
<link rel="stylesheet" href="//cdn.bootcss.com/highlight.js/8.0/styles/default.min.css">
<!-- 引入JS -->
<script src="//cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
<!-- 初始化，参数为需要高亮的元素 -->
<script>hljs.initHighlightingOnLoad();</script>
示例代码：
<pre><code class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="Firefox logo">
</body>
</html>
</code></pre>
Prism.js是另一个常用的代码高亮插件，它提供了多种配色方案和代码高亮效果，支持多种语言。
使用方法：
<!-- 引入样式 -->
<link href="//cdn.bootcss.com/prism/1.5.1/themes/prism.css" rel="stylesheet">
<!-- 引入JS -->
<script src="//cdn.bootcss.com/prism/1.5.1/prism.min.js"></script>
<!-- 初始化，参数为需要高亮的元素 -->
<script>Prism.highlightAll();</script>
示例代码：
<pre><code class="language-css">
body {
color: #333;
background: white;
}
</code></pre>
CodeMirror可以说是一个编辑器级别的代码高亮插件，它的功能非常强大，支持多种语言和文件类型，提供了代码折叠、语法提示、自动缩进、多行选择、搜索替换等功能。
使用方法：
<!-- 引入样式 -->
<link rel="stylesheet" href="//cdn.bootcss.com/codemirror/5.18.0/codemirror.css">
<!-- 引入JS -->
<script src="//cdn.bootcss.com/codemirror/5.18.0/codemirror.min.js"></script>
<!-- 添加mode文件 -->
<script src="//cdn.bootcss.com/codemirror/5.18.0/mode/htmlmixed/htmlmixed.min.js"></script>
<!-- 指定高亮模式 -->
<script>var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "text/html",
lineNumbers: true,
theme: "ambiance"
});</script>
示例代码：
<textarea id="code">
<!DOCTYPE html>
<html>
<head>
<title>My home page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
</textarea>
JS样式显示块插件可以使我们的网页更美观、易读，提高了用户交互的体验。以上介绍的三种插件都可以满足我们的基本需求，具体选用哪个要根据实际情况而定。