正文 评论

WordPress集成Highlight.JS实现代码高亮功能

WordPress代码高亮功能是很多站长都比较需要的功能,主要用来实现文章内代码高亮显示,更加方便查看文章内代码。

很多站长选择用插件实现这个功能,不过个人还是比较喜欢用代码实现代码高亮的功能,直接集成Highlight.JS就可以。

WordPress集成Highlight.JS实现代码高亮功能

Highlight.JS下载:

HighlightJS官网地址为:https://highlightjs.org/

Github项目地址:https://github.com/isagalaev/highlight.js

集成功能

首先确保主题已经加载了JQuery ,然后再按下面的步骤加载 Highlightjs:

接下来就是代码区域美化了,在主题css文件添加下面代码:

在 header.php 文件<header>标签中加载 CSS 样式文件:

<link href="<?php echo get_stylesheet_directory_uri(); ?>/highlight/github-gist.css" rel="external nofollow"  type="text/css" rel="stylesheet" />

在 footer.php 文件中加载JS文件:

<script src='<?php echo get_stylesheet_directory_uri(); ?>/highlight/highlight.pack.js' type='text/javascript'></script>

最后一步:在页面底部 标签之前加入自动加载代码:

<script type="text/javascript">
    $(document).ready(function(){
        $('pre').each(function(i,block){
            hljs.highlightBlock(block);
        });
    });
</script>

以上就是WordPress不用插件实现代码高亮功能的全部步骤了,站长们可以自己去试试。

回复

暂无评论