美文网首页
使用highlight.js实现代码高亮

使用highlight.js实现代码高亮

作者: 勿念及时雨 | 来源:发表于2019-11-04 18:08 被阅读0次

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

这里需要注意的是标签的<必须写成&lt;>必须写成&gt;,否则会直接显示成页面UI。
最终显示效果如下图所示:

相关文章

网友评论

      本文标题:使用highlight.js实现代码高亮

      本文链接:https://www.haomeiwen.com/subject/wzidbctx.html