欢迎光临
请一秒记住我们的网址:www.xinfangs.com !

WordPress插件-非常漂亮的WordPress代码高亮插件Prism.js(仿Mac OS)

漂亮的 Prism.js 代码高亮插件,在原有的 Prism.js 的基础上添加了一些小小的改动,仿 Mac OS 风格。

一、示例代码

本就是使用的 Prism.js ,只不过在原有的 Prism 的基础上添加了一些小小的改动,仿 Mac OS 风格(附件下载),我们直接来一段代码示例:

HTML

复制复制复制复制复制复制复制
复制
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="<?php bloginfo('template_directory'); ?>/prism/prism.js"></script>
  5. <link href="<?php bloginfo('template_directory'); ?>/prism/prism.css" rel="stylesheet" />
  6. </head>
  7. <body>
  8. ...
  9.  
  10. </body>
  11. </html>

CSS:

复制复制复制复制复制复制
复制
  1. .container .content .copy-link{
  2. border:1px solid #E5E5E5;
  3. background:#f9f9f9;
  4. padding:15px 15px 15px 120px;
  5. margin-bottom:30px;
  6. position: relative;
  7. margin-top:90px;
  8. }

PHP

复制复制复制复制复制
复制
  1. public function init()
  2. {
  3. parent::init(); // TODO: Change the autogenerated stub
  4. if(Yii::$app->user->id)
  5. {
  6. $this->redirect(Url::home());
  7. }
  8. }

二、下载 Prism.js

Prism.js 支持很多种语言和插件主题。把一些不必要支持的语言包下载下来,会加大库文件大小,拖累我们网站加载速度。所以 Prism.js 采用自定义下载,原版 Prism.js 下载地址:点击链接

我们勾选上我们需要的语言选项,在最下方的Plugins选项中,有一个Line Numbers还是非常值得下载的,可以在代码前显示行号,点击最下方的下载css和js下载文件。

三、使用方法

使用非常简单,首先引入刚刚下载好的2个文件

复制复制复制复制
复制
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. ...
  5. <link href="themes/prism.css" rel="stylesheet" />
  6. </head>
  7. <body>
  8. ...
  9. <script src="prism.js"></script>
  10. </body>
  11. </html>

wordpress 用户只需要在主题根目录 functions.php 添加如下代码即可,请注意 assets 路径

复制复制复制
复制
  1. # 添加代码高亮
  2. function add_prism() {
  3. wp_register_style(
  4. 'PrismCSS',
  5. get_stylesheet_directory_uri() . '/assets/css/prism.css'
  6. );
  7. wp_register_script(
  8. 'PrismJS',
  9. get_stylesheet_directory_uri() . '/assets/js/prism.js'
  10. );
  11. /*wp_register_script(
  12. 'pure',
  13. get_stylesheet_directory_uri() . '/assets/js/pure-highlight.js'
  14. );*/
  15. wp_enqueue_style('PrismCSS');
  16. wp_enqueue_script('PrismJS');
  17. //wp_enqueue_script('pure');
  18. }
  19. add_action('wp_enqueue_scripts', 'add_prism');

将代码使用如下标签包裹起来

复制复制
复制
  1. <pre class="highlight"><code class="language-php line-numbers"></code>
点击阅读余下全文
赞(12) 加关注
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:WordPress插件-非常漂亮的WordPress代码高亮插件Prism.js(仿Mac OS)
文章链接:https://www.xinfangs.com/804.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

评论前必须登录!

立即登录   注册

请一秒记住我们的网址:www.xinfangs.com !

去投稿去留言

扫码关注公众号

非常感谢,让我们一起创建更加美好的网络世界!

关注公众号

加微信

登录

找回密码

注册