一、准备
- 点击 Get version 进行下载
- 勾选语言进行下载
- 下载好的文件结构
二、引入 highlight 的 CSS 样式和 js 文件
- 引入 CSS 主题
里面的 styles 文件夹中有非常多的样式，在使用时只需要导入想使用主题的样式即可
所有主题 Dome 效果展示
<link rel="stylesheet" href="./style/base16/nova.min.css" />
- 引入 js 文件
<script src="./js/highlight.min.js"></script>
- 初始化
<script> hljs.initHighlightingOnLoad() </script>
- 将代码片段包裹在<pre> <code> 标签中，然后通过 class 类名指定语言
<pre><code class="JacaScript">代码片段</code></pre>
三、效果展示
四、代码展示
点击查看完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 引入主题样式 -->
<link rel="stylesheet" href="./style/base16/nova.min.css" />
<!-- 引入 JS 文件 -->
<script src="./js/highlight.min.js"></script>
</head>
<body>
<pre><code class="JacaScript">
function add(a, b) {
console.log(a + b)
}
add(1, 2)
</code></pre>
<script>
// 初始化
hljs.initHighlightingOnLoad()
</script>
</body>
</html>