使用highlight.js实现代码高亮-蒲公英云

使用highlight.js实现代码高亮

1.访问highlight.js官网，勾选你需要的语言，然后点击download按钮开始下载highlight.js插件。
下载地址：https://highlightjs.org/download/
2.将下载好的文件目录拷贝到项目中，在html页面中引用
下面的文件和脚本代码：

<link rel="stylesheet" href="/highlight/styles/default.css">
<script src="/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

上述代码中的css文件也可以替换为其他的css主题文件，详见style目录。
调用hljs.initHighlightingOnLoad()方法是为了初始化hljs对象，而且它会自动检测你的代码，然后自动加上对应的高亮标签。
3.使用<pre class="html"><code>...</code>标签来显示html代码，这里的class中的值设置为code标签中的代码所属的编程语言，如果是java，就设置为”java”，是javascript就设置为”javascript”。
代码示例如下：

<pre>
  <code class="html">
<td  systemCode="oasystem" configCode="tip-sc" class="form-td-label" >系统编号：</td>
<input systemCode="oasystem" configCode="tip-input" type="text" class="wui-input" id="systemCode" name="systemCode" validate="required,maxlength:50" />
<script src="http://localhost:8080/opas-web/scripts/floatPanel/floatPanel.plugin.js?mode=product"></script>
  </code>
</pre>

这里需要注意的是标签的<必须写成<，>必须写成>，否则会直接显示成页面UI。
最终显示效果如下图所示：
watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5NjQ1NTA1_size_16_color_FFFFFF_t_70