idea的jsp如何显示语法高亮_WordPress使用Prism进行代码高亮

一直在寻找一个比较好看漂亮的代码高亮格式,最终对比发现Prism比较好用而且好看,就利用了这个工具。

9d0703e9bc67b7ec92034fc8cc1bd1e3.png

Prism

1.Prism简介

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.

Prism是一种轻量级,可扩展的语法高亮显示器,以现代网络标准为基础构建。它已在数千个网站中使用,包括您每天访问的一些网站。

Prism可以提供多种样式的代码高亮,支持非常多的语言,而且还可以使用一些扩展功能,例如显示行号,显示复制按钮,显示语言等,可以说是非常方便。

2.Prism下载

使用Prism需要将 prism.css和prism.js文件 包含在你需要的页面中。第一步需要先在Prism官网下载 prism.css和prism.js文件 。这两个文件是根据你的选择变化的,可以选择主题、选择语言、选择插件。

9bcb6217648b070e47ecc91a61eb39c9.png
7cd4e4e315fad6d64c945aeb8b859918.png
c6103ccf93f3008b1f94c75f8fbc5838.png

3.Prism使用

根据自己的需要下载完成后,将得到的prism.css和prism.js文件放到你的wordpress主题对应的文件夹内,可以单独创建一个prism文件夹,将prism.js和prism.css文件放入该文件夹,也可以直接放在根目录中,只需要在下面的路径中填写正确就行。

d5d44470a29347050641f58b7dd51d59.png

然后修改funcations.php文件,将一下代码加到funcations.php文件中,其中的自定义路径就是prism.js和prism.css文件的存放路径。

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

OK!在你的代码前面使用

,在代码最后加上 
即可。例如:
f5724cbdefdf55b16263456377625a7f.png

效果如下:

70e1b49d8f019c56d55eb774727ddb5d.png

以上就是今天给大家分享的内容了,如果大家喜欢我分享的内容,别忘了关注点赞评论转发哦!如果大家有什么问题可以在评论区留言,大家一起探讨交流。后期我会分享更多精彩内容,欢迎大家持续关注!

想要了解更多有趣的技术分享,欢迎大家点击下方链接关注我的个人网站。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值