非插件使用prismjs为wordpress添加代码高亮功能

Prism是一种语法突出显示功能,可以美化您在博客文章中放置的所有代码段

首页 \ WordPress知识库 \ 非插件使用prismjs为wordpress添加代码高亮功能

prismjs是一款轻量、可扩展的代码语法高亮库,使用现代化的 Web 标准构建,使用Prismjs可以快速为网站添加代码高亮功能,支持超过113中编程语言,还支持多种插件,是简洁、高效的代码高亮解决方案。作者博客就是使用了Prism.js实现漂亮的代码语法高亮功能,本文将重点介绍一种简洁的功能,您可以将其合并到WordPress网站中,而无需在页面上安装另一个完整的插件,从长远来看,这只会减少您的加载时间和所有工作(尽管安装插件可以做到)这当然是可能的)。此功能称为Prism,它是一种语法突出显示功能,可以美化您在博客文章中放置的所有代码段。

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

在Prismjs网站下载页面下载需要的JS和CSS文件,下载页面:
http://prismjs.com/download.html


在这里,您将看到很多选项,可以选择这些选项来自定义Prism的代码外观。对于压缩级别:部分,我们可以选择压缩版也可以选开发者版。我们推荐选择压缩版,这将缩短在后台代码中使用的文本量,从而使它可以在您的网站上更快地运行。

接下来,您将选择要使用的主题。该站点使用“默认”主题,但可以随意选择您认为最适合您站点的主题。单击各种主题时,您会注意到Download JSDownload CSS按钮上方的代码块将发生变化,以使您了解主题的外观。
接下来,在站点的代码块中选择将使用的语言。对我来说,我只勾选了Markup,CSS,类似C和JavaScript的默认值,其中涵盖了我计划在博客文章中显示的大部分语言。但是,如果您确定要使用Python,PHP或SQL,则只需选中其中任何一个即可。不过请记住,您勾选的语言越多,JavaScript和CSS文件就越大。因此,只需确保仅选择所需的语言即可。如果发现没有你选的语言,则可以随时返回并添加另一种语言的背景代码。

就插件而言,您可以通过单击“插件”部分中的链接来自己了解这些插件。如果需要,这些插件会提供一些额外的功能,例如在代码块中显示行号,复制按钮、下载按钮等,这个看你个人需要了。

二、上传JS和CSS文件到wordpress网站

选定所需的压缩级别,语言和插件后,就可以下载文件了。然后您将下载的Prism.JS和Prism.css文件上传到您网站主题下的某个位置。例如wp-content /themes/<您的主题名称>/Prism/文件夹中。然后修改主题目录下的functions.php文件,我们将在functions.php文件中编写一个简单的PHP函数。您可以将其复制并粘贴到functions.php文件的最后面。操作流程:WordPress后台->外观->主题编辑器->funcations.php->加入复制代码->保存。

// 向网站添加prism.css和prism.js的功能
function add_prism() {
    // 注册Prism.css文件
    wp_register_style(
        'prismCSS', // 处理样式的名称,以便我们可以注册,注销等。
        get_stylesheet_directory_uri() . '/assets/css/prism.css' // Prism.css文件的位置
    );
    // 注册prism.js文件
    wp_register_script(
        'prismJS', // 处理脚本的名称,以便我们可以注册、注销等。
        get_stylesheet_directory_uri() . '/assets/js/prism.js' // prism.js文件的位置
    );
    // 排队注册的样式和脚本文件
    wp_enqueue_style('prismCSS');
    wp_enqueue_script('prismJS');
}
add_action('wp_enqueue_scripts', 'add_prism');

三、在文章中使用的方法

在新建文章时,切换到文本模式,在发表文章时将代码块用<pre><code></code></pre>标签包围起来,就可以实现代码高亮功能了!
如下:

<pre><code class="language-php"><?php 
echo "Hello World!"; 
?></code></pre>

标签中的language-php为显示代码语言,可以为任意语言,比如language-c、language-java、language-javascript、language-css等。

四、代码块添加行号

<pre>里添加line-numbers类就可以开启代码快的行号,当然前提是你必须下载Line Numbers插件。添加方式如下:

<pre class="line-numbers"><code class="language-php">
<?php 
echo "Hello World!";
echo phpinfo(); 
?>
</code></pre>

 

关于作者:floryu 专为广大WP爱好者分享国外高端主题插件,提供WordPress主题、插件汉化,以及WordPress、DEDECMS建站。

相关文章

大神,别默默的看了,快来点评一下吧!

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