建站

WordPress使用开源代码Prism.js实现文章代码高亮功能

gena2.0

WordPress使用Prism.js开源代码实现代码高亮功能,漂亮的代码语法高亮插件Prism.js简单使用文档?

wordpress博客里的代码高亮插件很多,以highlight为关键字能搜索出很多相关的插件。比如highlight.js,Crayon Syntax Highlighter,Simple Code Highlighter,wp-syntax,SyntaxHighlighter ,Google Code Prettify,SyntaxHighlighter Evolved...也使用过许多,最后还是决定使用Prism.js实现文章代码高亮。Prism.JS也大部分流行的编程语言,并且支持多种主题样式,只需要引用CSS文件和JS文件即可完成。

Prism 是一款轻量、可扩展的代码语法高亮库,使用现代化的 Web 标准构建。

Prismjs就可以让我们的wordpress不用装插件就实现代码高亮的功能,Prismjs是一个开源的专门做代码高亮的项目,他的代码特点是简约、轻巧、便捷、高效、快速,而且他支持127种程序语言的代码高亮,最主要的是Prismjs只有一个JS文件和一个CSS文件。使用Prismjs来实现代码高亮的时候,只要下载这两个文件到自己的网站,然后将这两个文件引入到页面上就可以了。

为什么选择 Prism.js ?

极致易用
引用 prism.css 和 prism.js,使用合适的 HTML5 标签(code.language-xxxx),搞定!

天生伶俐
语言的 CSS 类是可继承的,所以你只需定义一次就能应用到多个代码片段。

轻如鸿毛
代码压缩后只有 1.6KB。每添加一个语言平均增加 0.3-0.5KB,主题在 1KB 左右。

快如闪电
如果可能,支持通过 Web Workers 实现并行。

轻松扩展
定义新语言或扩展现有语法,或者新增功能都非常简单。

丰富样式
所有的样式通过 CSS 完成,并使用合理的类名如:.comment, .string, .property 等。

怎么使用Prism.js?

进入代码官网:http://prismjs.com/download.html,根据自己需要选择所需功能,再分别下载所需的JS和CSS文件。上传到自己的主题目录下的CSS和JS文件夹。

functions.php添加代码:

// 代码高亮 Prism.js
 function add_prism() {
        wp_register_style(
            'prismCSS', 
            get_stylesheet_directory_uri() . '/css/prism.css' //自定义路径
         );
          wp_register_script(
            'prismJS',
            get_stylesheet_directory_uri() . '/js/prism.js' //自定义路径
         );
        wp_enqueue_style('prismCSS');
        wp_enqueue_script('prismJS');
    }
add_action('wp_enqueue_scripts', 'add_prism');

方法二:编辑header.php文件,在和之间加入代码:

<link rel="nofollow" target="_blank" href="https://www.segena.com/go.php?url=/wp-content/themes/yourtheme/prism.css" rel="stylesheet" />

编辑footer.php,在之前加入代码:

<script src="/wp-content/themesyour_theme/prism.js"></script>

最后一步,就是在后台发布文章的时候使用以下形式就能实现代码高亮的功能。

<pre><code class="language-c">  code_here </code></pre>

提示:
1、language-php中,红色字体可修改任意语言,但必须保留language-,如language-c。
2、如果你想每行代码前带序号,只需要在标签中加class="line-numbers" 即可。

除开wordpress博客的其他网页使用方法:

<!DOCTYPE html>
<html>
<head>
     ...
     <link rel="nofollow" target="_blank" href="https://www.segena.com/go.php?url=themes/prism.css" rel="stylesheet" />
</head>
<body>
     ...
     <script src="prism.js"></script>
</body>
</html>

遵循HTML5标准,使用语义化的<pre>元素和<code>元素来标记代码区块:

<pre><code class="language-css"> div p { color: red } </code></pre>

可能有问题发生,就是我们放进去的代码会被Wordpress自动把半角符号替换为全角,这样带来的问题就是,别人复制你的代码后,无法正常使用。操作方法就是找到我们主题文件的functions.php,打开后在最下面贴上。

//禁止代码标点转换
remove_filter('the_content', 'wptexturize');

扩展:加入后台可视化界面可视化插入代码,参考以下文章实现功能。
WordPress代码高亮方案:Prism
WordPress编辑器TinyMCE添加弹出对话框(dialog)按钮的方法

附:
Prism 官网 | 代码示例 | 立即下载 | GitHub

完毕。

 

历史上的今天:

(0)

本文由 格娜小屋 作者:子轩 发表,转载请注明来源!

关键词:,
gena2.0

热评文章

发表评论

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