苏醒 苏醒
  • 首页
  • WP主题
  • WP插件
  • WP教程
  • 是日一记
  • 博客
    • 留言
    • 唠叨
    • 盆友圈
    • 栏目推荐

suxing

管理员
每天清晨有多少双眼睛睁开,有多少人的意识苏醒过来,便有多少个世界。
IP归属地: 广东
文章
214
评论
236
suxing
2016-01-14 20:15:15 广东

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

文章字数:950
阅读时间: 3 分钟
智能摘要 DeepSeek
Prism.js是一款轻量级的JavaScript代码高亮插件,支持多种编程语言和主题样式,只需引用CSS和JS文件即可使用。安装方法:1)在functions.php中添加注册样式和脚本;2)编辑文章时在<pre>标签内输入代码并设置语言标记。使用技巧:在<pre>标签中添加class="line-numbers"可显示代码行号。Prism.js官方下载地址为[http://prismjs.com/](http://prismjs.com/),苏醒特供款下载地址为[http://download.theme.suxing.me/prism/prism.zip](http://download.theme.suxing.me/prism/prism.zip)。

对于技术控的朋友来说,平日总要写几段代码来装装逼。
市面上也比较多代码高亮插件,各种各样。前端时间苏醒网站改版也没集成代码高亮的功能。今天有点时间就研究了下,发现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]

  • WordPress 教程
  • 代码高亮
  • 代码高亮插件
等 人表示很赞
12,955
4

评论 (4)

  • 41283d07aa

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

    9 年前 广东省 回复 1
    • 苏醒 作者 41283d07aa

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

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

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

    10 年前 河北省 回复 1
    • 苏醒 作者 paldvel

      没插件,自己集成吧。

      10 年前 广东省 回复 0
⚠️ 登录后可查看更多评论内容
登录
suxing
suxing
2016-04-22 8:17:43 广东

推荐 WordPress主题开发和调试巧用debug模式

智能摘要 DeepSeek 在开发WordPress主题时,通常会开启Debug模式(调试模式)以检测bug。当遇到页面错误、404、500错误等常见问题时, ...
  • WordPress 教程
  • debug模式
  • wordpress教程
  • WordPress调试
6,819 0
suxing
suxing
2019-12-25 12:36:27 广东

推荐 双旦将至,WordPress 网站实现下雪特效,云体验下雪的赶脚

智能摘要 DeepSeek 圣诞元旦期间, WordPress 用户可以通过 nicetheme 提供的雪花特效积木轻松实现网站背景的雪花飘落效果。积木启动后 ...
  • WordPress 教程
3,705 1
suxing
suxing
2019-08-29 10:21:56 广东

推荐 百度统计:已上线白名单过滤功能解决代码被盗用问题

智能摘要 DeepSeek 百度统计公告,因客户反馈某非法网站恶意盗用用户代码导致恶意攻击,正配合执法部门彻查,同时上线白名单过滤功能,旨在解决统计异常问题。 今日,中文网站分析工具百度统计发布公告称,近期收到客户反馈关于某非法网站恶 ...
  • WordPress 教程
2,690 0
suxing
suxing
2017-06-29 14:23:29 广东

推荐 WordPress上传的文件尺寸超过php.ini中定义的upload_max_filesize值解决方法

智能摘要 DeepSeek WordPress上传主题包时,若提示文件尺寸超过upload_max_filesize限制,需修改php.ini中的upload_max_filesize和post_max_size参数(默认2MB),建议 ...
  • WordPress 教程
13,661 0
suxing
suxing
2016-04-22 9:25:04 广东

推荐 苏醒的WordPress主题更新包安装说明

智能摘要 DeepSeek 感谢选购苏醒WP主题的正版用户!每次更新主题包都凝聚了用户建议,使主题更完善。正版用户可通过以下方式获取更新包: 1. 登录网站自行下载,避免使用迅雷等第三方工具。 2. 使用FTP工具备份旧版本,修改文件夹 ...
  • WordPress 教程
10,227 4

我用的 WordPress 主题

2021 年单栏 WordPress 主题

Copyright © 2012-2026 苏醒. All rights reserved. Designed by nicetheme.
  • 首页
  • 主题
  • 教程
  • 博客
  • 唠叨
  • 留言