WordPress集成HighlightJS实现代码自动高亮
不罗嗦,直接上步骤。以本站的样式为例。
1 下载
HighlightJS官网地址为:https://highlightjs.org/
Github项目地址:https://github.com/isagalaev/highlight.js
先下载 highlight.pack.js 文件,再根据自己的偏好下载相应的 CSS 样式文件。
2 集成
请首先加载了JQuery ,再按下面的步骤加载 Highlightjs。
在 header.php 文件<header>
标签中加载 CSS 样式文件:
<link href="<?php echo get_stylesheet_directory_uri(); ?>/highlight/github-gist.css" type="text/css" rel="stylesheet" />
加载JS文件,加在 footer.php 文件中:
<script src='<?php echo get_stylesheet_directory_uri(); ?>/highlight/highlight.pack.js' type='text/javascript'></script>
在页面底部 </body>
标签之前加入自动加载代码:
<script type="text/javascript"> $(document).ready(function(){ $('pre').each(function(i,block){ hljs.highlightBlock(block); }); }); </script>
这样就可以了。
上一篇: CentOS设置文件夹在同一窗口打开