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>

这样就可以了。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

昵称 *