代码高亮显示插件highlightjs使用实例

&emsp;&emsp;最近准备吧个人博客使用到的css框架简单的写一个文档，但是基础功能里面缺少了代码高亮显示。这里就只能自己重新百度搜索并且去使用插件了。我用的是 highlightjs，示例页面https://micuu.com/micuerUI/base.php

下面是使用教程：

引用
```

<link rel="stylesheet" type="text/css" href="https://cdn.micuer.com/static/highlightjs/default.min.css">
<script type="text/javascript" src="https://cdn.micuer.com/static/highlightjs/highlight.min.js"></script>
<script>
    hljs.highlightAll();
</script>
```

引用的话其实有很多样式提供给您选择，您也可以选择atom-one-dark.min.css样式
```

<link rel="stylesheet" type="text/css" href="https://cdn.micuer.com/static/highlightjs/atom-one-dark.min.css">
<script type="text/javascript" src="https://cdn.micuer.com/static/highlightjs/highlight.min.js"></script>
<script>
    hljs.highlightAll();
</script>
```

或者进入官网点击切换并且预览样式
### 官方网站

https://highlightjs.org/

[![](https://micuu.com/web/markdown/6267a4d09edd8.png)](https://micuu.com/web/markdown/6267a4d09edd8.png)

自动转换的代码：
```
<pre>
	<code>
	您的代码
	</code>
</pre>
```
这样就完成了代码高亮显示。
其实其他还有很多高亮显示的插件，但是目前我这里网络限制不能访问GitHub了，先用这一款，后续发现好用的再进行更新。

其他高亮插件推荐：
>1、SyntaxHighlighter – 最优秀的JavaScript代码高亮插件
2、Google Code Prettify – 自由地JavaScript代码高亮插件
3、Highlight.js – 多风格JavaScript代码高亮插件
4、Prism.JS - 轻量级JavaScript代码高亮插件
5、jQuery.Syntax – jQuery轻量级代码高亮插件
6、DlHighlight – jQuery简单高效代码高亮插件
7、Rainbow.js – 可扩展的JavaScript代码高亮插件

注:原创不易,转载请注明出处( https://micuu.com/new/2773.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。

代码高亮显示插件highlightjs使用实例

留言反馈