首页 Wordpress WordPress 无插件高亮代码Prism.js

WordPress 无插件高亮代码Prism.js

GavinWu 2022年04月04日 8:04 Wordpress 444 Views

Prism 是一款轻量级、可扩展的语法高亮工具,在构建时考虑了现代 Web 标准。它被数百万个网站使用,包括您每天访问的一些网站。使用 Prismjs 可以快速为网站添加代码高亮功能,支持超过113中编程语言,还支持多种插件,是简洁、高效的代码高亮解决方案。本文教你如何在wordpress上快速使用Prismjs实现代码高亮。

一、下载JS和CSS文件并上传到网站根目录

官方网站:http://prismjs.com/download.html
你可以在官方网站选择语言和样式,然后下载到本地
WordPress 无插件高亮代码Prism.js|微言心语

二、上传JS和CSS文件到wordpress主题目录

一般为:wp-content/themes/你的主题目录

三、在主题中引用JS和CSS文件

1
2
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/prism.css" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prism.js"></script>

你也可以在function.php里动态的加载,具体可以参照《WordPress 加载Javascript和CSS的方法》

1
2
3
4
5
6
7
8
9
10
11
function add_prism() {
wp_register_style('prismCSS',
get_stylesheet_directory_uri() . '/prismjs/prism.css' //自定义路径
);
wp_register_script('prismJS',
get_stylesheet_directory_uri() . '/prismjs/prism.js' //自定义路径
);
wp_enqueue_style('prismCSS');
wp_enqueue_script('prismJS');
}
add_action('wp_enqueue_scripts', 'add_prism');

四、使用方法

在文本编辑器里,发表文章时将代码块用<code><pre>标签包围起来,就可以实现代码高亮功能了!
直接显示高亮,不显示行号:

WordPress 无插件高亮代码Prism.js|微言心语

显示行号,并使用php语言:

WordPress 无插件高亮代码Prism.js|微言心语
同样的,也可以修改CLASS来指定其他语言,比如css、js等样式直接修改language就可以:
WordPress 无插件高亮代码Prism.js|微言心语

五、增加编辑器按钮方便使用

在主题function.php里添加以下代码

1
2
3
4
5
function appthemes_add_pre_core() {
?><script type="text/javascript">if ( typeof QTags != 'undefined' ) {
QTags.addButton( 'pre_core>','pre_core','<pre class="line-numbers"><code class="language-markup">','展示代码处<#code><#pre>' );
}<#script><?php }
add_action('admin_print_footer_scripts', 'appthemes_add_pre_core' );

将上述#换成/
如果喜欢下面的样式
WordPress 无插件高亮代码Prism.js|微言心语
可以直接下载打包好的JS和CSS.详见:Loper主题增加高亮代码免插件的样式,

提取码:y2wd

相关文章

七牛

发表评论

QR Code

本页二维码