什么是 code-prettify？
code-prettify 是一个由 Google 开发的 JavaScript 库，旨在美化和高亮显示代码。它可以很容易地集成到你的网页中，让你的代码看起来更清晰、易读、易于维护。
安装 code-prettify
你可以使用 npm 来安装 code-prettify：
npm install --save code-prettify
或者你也可以直接引用 CDN 链接：
<link rel="stylesheet" href="https://cdn.rawgit.com/google/code-prettify/master/styles/sunburst.css"> <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
使用 code-prettify
一旦你完成了安装，就可以使用 code-prettify 来美化你的代码了。首先，在需要高亮的代码块的开始和结束标签之间添加 class 属性 prettyprint。
例如，如果你想要高亮显示下面的 HTML 代码块：
-- -------------------- ---- ------- --------- ----- ------ ------ -------------- -------------- ------- ------ ----------- ----------- -------- -- - --------- ------- -------
你应该将它包装在 pre 标签中，并在 pre 标签上添加 class 属性 prettyprint，如下所示：
-- -------------------- ---- ------- ---- -------------------- --------- ----- ------ ------ -------------- -------------- ------- ------ ----------- ----------- -------- -- - --------- ------- ------- ------
然后，在你的网页中添加以下代码：
<script src="./node_modules/code-prettify/loader/run_prettify.js"></script>
或者，如果你使用了 CDN 链接，则无需添加该代码。
现在，当你刷新网页时，你应该看到你的代码已经变得更漂亮了！
配置 code-prettify
code-prettify 有很多选项可以让你自定义它的行为。例如，你可以更改其主题、显示行号、指定要高亮显示的语言等。
下面是一些常用的选项：
主题
你可以通过更改 sunburst.css 文件来更改其主题。该文件位于代码库的 styles 目录中。
例如，在 sunburst.css 文件中，你可以找到以下代码：
pre.prettyprint {
border: 1px solid gray;
background-color: #f8f8f8;
font-family: monospace;
padding: 2px;
}你可以更改背景颜色、字体、边框等属性来自定义主题。
行号
你可以添加 linenums class 属性来启用行号。例如：
<pre class="prettyprint linenums"> ... </pre>
语言
code-prettify 默认会尝试猜测代码块中的语言。但是，如果你想要指定语言，可以使用 lang class 属性。
例如，如果你想要高亮显示 JavaScript 代码块，可以这样写：
<pre class="prettyprint lang-js"> ... </pre>
结论
通过使用 code-prettify，你可以很容易地美化和高亮显示你的代码，使其更清晰、易读、易于维护。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/54442