几款代码高亮组件的体验，说不定你以后会用到
匿名 · 更新于 2021/11/8
最近准备给自己的博客网站上一个新的模块，但是看到博客在 ios 端浏览是这个样子！
顿时觉得浑身难受...
用 safari 排查了下原因，后台输出的是不带样式的 html pre code 标签，锅是代码高亮插件的。
我的博客站点用的是 Highlight js 库，ir_black 主题，在 mac 的 safari 和 ios 端访问代码，不会出现横向滚动条，代码满一行就提前换行。
于是又找了两款代码高亮前端组件库，SyntaxHighlighter、Prism。经过实验，SyntaxHighlighter 跟我网站样式有冲突，Prism 符合我的要求也能解决上面的问题。Prism 效果如下：
这下舒服了，可以安心准备我的新模块了，不然页面都不好意思拿出去推。
附一下这三款代码高亮组件的资源信息：
我用的第一款 Highlight.js，能够自动识别代码语言种类，几十种主题。
使用示例：
-
<div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">html</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="2" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">head</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="3" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> <span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">link</span> <span class="hljs-attr" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(209, 154, 102); overflow-wrap: break-word;">href</span>=<span class="hljs-string" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(152, 195, 121); overflow-wrap: break-word;">"https://cdn.bootcss.com/highlight.js/9.18.1/styles/ir-black.min.css"</span> <span class="hljs-attr" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(209, 154, 102); overflow-wrap: break-word;">rel</span>=<span class="hljs-string" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(152, 195, 121); overflow-wrap: break-word;">"stylesheet"</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="4" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> <span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">script</span> <span class="hljs-attr" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(209, 154, 102); overflow-wrap: break-word;">src</span>=<span class="hljs-string" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(152, 195, 121); overflow-wrap: break-word;">"https://cdn.bootcss.com/highlight.js/9.18.1/highlight.min.js"</span>></span><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"></<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">script</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="5" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> <span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">script</span>></span>hljs.initHighlightingOnLoad();<span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"></<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">script</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="6" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"></<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">head</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="7" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">body</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="8" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> <span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">pre</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="9" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> <span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">code</span> <span class="hljs-attr" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(209, 154, 102); overflow-wrap: break-word;">class</span>=<span class="hljs-string" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(152, 195, 121); overflow-wrap: break-word;">"language-java"</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="10" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;">public class ConstXiong {</code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="11" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="12" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> public static void main(String[] args) {</code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="13" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> System.out.println("World, Hello");</code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="14" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> }</code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="15" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;">}</code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="16" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> <span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"></<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">code</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="17" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> <span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"></<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">pre</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="18" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"></<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">body</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="19" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"></<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">html</span>></span></code></div> </div> </li>
效果：
第二款 SyntaxHighlighter，使用简单，但右上角有个问号且首行距离顶部的距离有点小，懒得再看文档进行调整了。
官网：http://alexgorbatchev.com/SyntaxHighlighter/
使用示例：
-
<div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">html</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="2" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">head</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="3" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> <span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">link</span> <span class="hljs-attr" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(209, 154, 102); overflow-wrap: break-word;">href</span>=<span class="hljs-string" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(152, 195, 121); overflow-wrap: break-word;">"https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/styles/shThemeEmacs.min.css"</span> <span class="hljs-attr" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(209, 154, 102); overflow-wrap: break-word;">rel</span>=<span class="hljs-string" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(152, 195, 121); overflow-wrap: break-word;">"stylesheet"</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="4" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> <span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">script</span> <span class="hljs-attr" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(209, 154, 102); overflow-wrap: break-word;">src</span>=<span class="hljs-string" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(152, 195, 121); overflow-wrap: break-word;">"https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"</span>></span><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"></<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">script</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="5" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> <span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">script</span> <span class="hljs-attr" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(209, 154, 102); overflow-wrap: break-word;">src</span>=<span class="hljs-string" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(152, 195, 121); overflow-wrap: break-word;">"https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushJava.min.js"</span>></span><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"></<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">script</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="6" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"></<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">head</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="7" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">body</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="8" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> <span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">pre</span> <span class="hljs-attr" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(209, 154, 102); overflow-wrap: break-word;">class</span>=<span class="hljs-string" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(152, 195, 121); overflow-wrap: break-word;">"brush: java"</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="9" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;">public class ConstXiong {</code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="10" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="11" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> public static void main(String[] args) {</code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="12" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> System.out.println("World, Hello");</code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="13" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> }</code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="14" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;">}</code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="15" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> <span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"></<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">pre</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="16" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="17" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">script</span> <span class="hljs-attr" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(209, 154, 102); overflow-wrap: break-word;">type</span>=<span class="hljs-string" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(152, 195, 121); overflow-wrap: break-word;">"text/javascript"</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="18" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> SyntaxHighlighter.all()</code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="19" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"></<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">script</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="20" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"></<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">body</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="21" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"></<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">html</span>></span></code></div> </div> </li>
效果：
第三款 Prism，比较轻量级，使用也挺简单，css 调整下 code 标签的字体大小就符合我的审美。
使用示例：
-
<div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">html</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="2" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">head</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="3" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> <span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">link</span> <span class="hljs-attr" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(209, 154, 102); overflow-wrap: break-word;">href</span>=<span class="hljs-string" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(152, 195, 121); overflow-wrap: break-word;">"https://cdn.bootcss.com/prism/1.20.0/themes/prism-okaidia.css"</span> <span class="hljs-attr" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(209, 154, 102); overflow-wrap: break-word;">rel</span>=<span class="hljs-string" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(152, 195, 121); overflow-wrap: break-word;">"stylesheet"</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="4" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"></<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">head</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="5" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">body</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="6" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> <span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">pre</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="7" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> <span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">code</span> <span class="hljs-attr" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(209, 154, 102); overflow-wrap: break-word;">class</span>=<span class="hljs-string" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(152, 195, 121); overflow-wrap: break-word;">"language-java"</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="8" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;">public class ConstXiong {</code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="9" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="10" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> public static void main(String[] args) {</code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="11" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> System.out.println("World, Hello");</code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="12" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> }</code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="13" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;">} <span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"></<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">code</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="14" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"> <span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"></<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">pre</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="15" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="16" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">script</span> <span class="hljs-attr" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(209, 154, 102); overflow-wrap: break-word;">src</span>=<span class="hljs-string" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(152, 195, 121); overflow-wrap: break-word;">"https://cdn.bootcss.com/prism/1.20.0/prism.min.js"</span>></span><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"></<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">script</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="17" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">script</span> <span class="hljs-attr" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(209, 154, 102); overflow-wrap: break-word;">src</span>=<span class="hljs-string" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(152, 195, 121); overflow-wrap: break-word;">"https://cdn.bootcss.com/prism/9000.0.1/components/prism-java.min.js"</span>></span><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"></<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">script</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="18" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"></<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">body</span>></span></code></div> </div> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> <div class="hljs-ln-numbers" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px; width: 24px; border-right: 1px solid rgb(197, 197, 197);"> <div class="hljs-ln-line hljs-ln-n" data-line-number="19" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px 8px 0px 0px; text-align: right; overflow-wrap: normal;"> </div> </div> <div class="hljs-ln-code" style="box-sizing: border-box; outline: 0px; margin: 0px 0px 0px 8px; padding: 0px; overflow-wrap: break-word; font-size: 14px; float: left; height: 22px;"> <div class="hljs-ln-line" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"><code class="hljs language-xml" style="box-sizing: border-box; outline: 0px; display: block; overflow-x: auto; padding: 8px; color: rgb(171, 178, 191); background: rgb(40, 44, 52); border-radius: 4px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 22px; white-space: pre; overflow-wrap: break-word; tab-size: 4;"><span class="hljs-tag" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;"></<span class="hljs-name" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; color: rgb(224, 108, 117); overflow-wrap: break-word;">html</span>></span></code></div> </div> </li>
效果：
还有一些其他代码高亮组件，有兴趣也可以试试：
- Google 的 Code Prettify
- jQuery.Syntax
- DlHighlight
- Rainbow
具体可以参考：
http://www.codeceo.com/article/7-javascript-highlighte-plugin.html
弱水三千，只取一瓢...