苏醒 苏醒
  • 首页
  • WP主题
  • WP插件
  • WP教程
  • 是日一记
  • 博客
    • 留言
    • 唠叨
    • 友情链接
首页 WordPress 教程 WordPress非插件使用Prism.js实现代码高亮

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

suxing 2016-01-14 20:15:15

对于技术控的朋友来说,平日总要写几段代码来装装逼。
市面上也比较多代码高亮插件,各种各样。前端时间苏醒网站改版也没集成代码高亮的功能。今天有点时间就研究了下,发现Prism.js这个轻量级的JavaScript代码高亮很好耍!Prism.JS也大部分流行的编程语言,并且支持多种主题样式,只需要引用CSS文件和JS文件即可完成。
好东西要分享,果断分享给大家。

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

 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');

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

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

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

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

[quote]使用技巧[/quote]

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

[quote]Prism.js文件下载[/quote]

[download-button href="http://prismjs.com/"]官网[/download-button][download-button href="http://download.theme.suxing.me/prism/prism.zip"]苏醒特供款[/download-button]

# 代码高亮# 代码高亮插件
3

评论 (4)

返回
  • 41283d07aa

    😮 😮 😮 我用这个高亮 不显示前带序号, 没错吧?

    6年前 广东省 回复
    • 苏醒

      @41283d07aa 如果你想每行代码前带序号,只需要在

      标签中加class="line-numbers" 即可。
      6年前 广东省 回复
  • paldvel

    这个代码高亮插件是什么呀?

    7年前 河北省 回复
    • 苏醒

      @paldvel 没插件,自己集成吧。

      7年前 广东省 回复

猜你喜欢

  • 阿里云虚拟机如何设置wordpress伪静态规则
  • 阿里云 CDN 跨域问题: No 'Access-Control-Allow-Origin' header is present on the requested resource
  • WordPress 小Tips:如何不显示站点顶部工具栏
  • PHP 错误 Parse error: syntax error, unexpected '?' 解决办法
  • WordPress 建立数据库连接时出错
suxing
每天清晨有多少双眼睛睁开,有多少人的意识苏醒过来,便有多少个世界。
197
文章
289
评论
306
获赞
suxing

我用的 WordPress 主题

2021 年单栏 WordPress 主题

  • 首页
  • WP主题
  • WP插件
  • WP教程
  • 是日一记
  • 博客
Copyright © 2012-2023 苏醒. Designed by nicetheme.
  • 首页
  • 主题
  • 教程
  • 博客
  • 唠叨
  • 留言
  • 是日一记