ICode9

精准搜索请尝试: 精确搜索
首页 > 互联网> 文章详细

如何通过prettify.js来实现代码自动高亮功能?

2020-04-30 11:48:23  阅读:1477  来源: 互联网

标签:prettify.js 代码自动高亮 代码 高亮 


这段时间发现很多站点都是通过 prettify.js 来实现代码自动高亮,而且操作也很简单,无需区分是 HTML 代码还是 PHP 代码或 SQL 代码或其他代码,prettify.js 都会自动识别并高亮显示。

如何通过prettify.js来实现代码自动高亮功能? - 第1张 - boke112联盟(boke112.com)

prettify.js 介绍

prettify.js 是 Google 的一款代码高亮插件,由 js 代码和 css 代码构成,用来高亮显示 HTML 页面中的源代码。支持:C, Java, Python, Bash, HTML, XML, Javascript, Makefiles, Ruby, PHP, Awk, Perl, Basic, Clojure, CSS, Dart, Erlang, Go, Haskell, Lisp, Scheme, LLVM, Lua, Matlab, Pascal, R, Scala, SQL, LaTeX 等语言。

Git 地址: https://github.com/google/code-prettify

大家可以自行访问上面的 Git 地址获取代码文件,并可以根据其介绍的办法自行折腾。今天懿古今就简单介绍我现在使用的代码高亮方法,也是通过 prettify.js 来实现的,这里以Nana 主题为例进行说明。

实现 prettify.js 代码自动高亮步骤

1、点击下载 prettify.zip 压缩包,解压后活得 prettify.js 和 prettify.css 文件。

 下载 prettify(2mqe)

2、将 js 和 prettify.css 文件添加到主题文件中,如 Nana\js 文件夹内,然后编辑 header.php 文件,找到以下代码


 
  1. <script type="text/javascript" src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/jquery-1.12.4.min.js"></script>

在下方添加以下代码


 
  1. <script type="text/javascript" src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/prettify.js"></script>
  2. <link rel='stylesheet' id='prettify-css' href='<?php echo esc_url( get_template_directory_uri() ); ?>/js/prettify.css' type='text/css' media='all' />

保存后即可。

温馨提示:这个 prettify.css 文件中的代码其实我们可以直接添加到主题的 style.css 文件的。

编辑文章时添加代码的方法

在编辑文章的时候,在需要插入代码的地方直接粘贴代码,然后选择所粘贴的代码之后点击编辑器中的格式 >> 块 >> pre,具体如下图所示:

如何通过prettify.js来实现代码自动高亮功能? - 第2张 - boke112联盟(boke112.com)

之后代码就会变成“预格式化”,具体如下图所示:

如何通过prettify.js来实现代码自动高亮功能? - 第3张 - boke112联盟(boke112.com)

最后我们发布或更新文章即可实现刚才所添加的代码自动高亮显示。具体效果如下:

如何通过prettify.js来实现代码自动高亮功能? - 第4张 - boke112联盟(boke112.com)

小结

其实这个实现和使用方法还是比较简单的,在这里要特别感谢雅兮网博主,如果不是雅兮网博主提醒如何正确添加代码,我可能还在原地踏步折腾中。对于有需要的博主可以根据本文自行添加到相应的主题中,应该不单单适用于懿古今主题,应该也同样适用于其他 WordPress 主题,甚至 zblog 主题等(如果发现本文代码高亮异常,请强制刷新本页面即可具体的效果)。

标签:prettify.js,代码自动高亮,代码,高亮,
来源: https://boke112.com/bkwd/5886.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有