【WordPress非插件使用Prism.js实现代码高亮】

  • 对于很多朋友朋友来说,平日总要写几段代码来装装逼。
  • 市面上也比较多代码高亮插件,各种各样。但是发现Prism.js这个轻量级的JavaScript代码高亮非常thin!

    Prism.js介绍

  • Prism.js也大部分流行的编程语言,并且支持多种主题样式,只需要引用CSS文件和JS文件即可完成。

    官网:http://prismjs.com

    实现步骤:

    第一步:将下面的代码复制到funcations.php中。

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

    以上工作结束后,就可以实现代码高亮了。
    对,就这么简单。

    第二步:编辑文章时,使用文本模式,输入下面的代码。

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

    (language-c中,红色字体可修改任意语言,但必须保留language-,如language-php)

    使用技巧

    如果你想每行代码前带序号,只需要在 pre 标签中加class=”line-numbers” 即可。