WordPress集成HighlightJS实现代码自动高亮

Gary

9 年前

不罗嗦，直接上步骤。以本站的样式为例。

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>

这样就可以了。