图片待添加
图片待添加

Enlighter-简单易用的WordPress代码高亮插件(支持古腾堡编辑器)

2020-01-13 20:59 分类:WordPress基础教程, WordPress插件, WordPress教程 阅读(次阅读) 标签:

给自己搭建Wordpress网站的朋友或多或少都会记录一些程序相关的代码,但是WordPress的代码高亮功能非常简陋的,甚至没有高亮效果,难以阅读。
如果你想要展示漂亮的代码效果,需要安装一款合适的代码高亮插件

本站目前默认使用的Wordpress代码高亮插件就是-Enlighter
为您介绍Enlighter的优点如下:

Enlighter-简单易用,安装即可运行。

下面展示下Enlighter代码高亮的显示效果

<div class="col-md-9 index_main">
         <?php $post_query = new WP_Query('showposts=4');
         while ($post_query->have_posts()) : $post_query->the_post();
         $do_not_duplicate = $post->ID; ?>
         <div class="panel clearfix">
          <div class="panel-body">
             <div class="panel-body-img col-md-3">
                <a href="<?php the_permalink(); ?>">
                <?php
                if ( $values = get_post_custom_values("suoluetu") ) { ?>
                <img class="suoluetu" src="<?php $values = get_post_custom_values("suoluetu"); echo $values[0]; ?>" alt="<?php the_title(); ?>" />
                <?php } else { ?>
                <img class="suoluetu" src="https://img.wpyi.com/images/suoluetu.gif" alt="<?php the_title(); ?>" />
                <?php } ?>
                </a>
             </div>
             <div class="panel-body-text col-md-9">
                <div class="panel-body-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
                <div class="index_main_info"><p><?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0,240,"..."); ?></p></div>
             </div>
          </div>
          <div class="panel-footer clearfix">
             <div class="pull-left">
                <a href="<?php the_permalink(); ?>"><i class="glyphicon glyphicon-calendar"></i><?php the_time( 'Y-m-d' ) ?></a>
                <a href="<?php the_permalink(); ?>"><i class="glyphicon glyphicon-eye-open"></i><?php echo getPostViews(get_the_ID()); ?></a>
                <a href="<?php the_permalink(); ?>"><i class="glyphicon glyphicon-edit"></i> 2 评论</a>
             </div>
             <div class="pull-right">
                <i class="glyphicon glyphicon-tag"></i>
                <?php the_tags('标签:',',',''); ?>
             </div>
          </div>
         </div>
         <?php endwhile;?>
      </div>

Enlighter-支持识别语言并着色显示,仿佛是个编辑器,便于访客快速阅读代码。

(是截图)

Enlighter-支持识别语言并着色显示,仿佛是个编辑器,便于访客快速阅读代码

Enlighter-后台设置有上十种代码显示主题可选。

(是截图)
Enlighter-后台设置有上十种代码显示主题可选

Enlighter-支持加载字体,让您的显示更美观漂亮,个性化。

(是截图)
Enlighter-支持加载字体,让您的显示更美观漂亮,个性化

Enlighter-后台设置好代码语言和主题后添加代码时不用额外调用。

(是截图)
Enlighter-后台设置好代码语言和主题后添加代码时不用额外调用
目前了解到的一个遗憾是,前端显示的时候阅读者没有一键复制源代码的功能。
下面是wpyi调试好的Wordpress代码高亮显示界面(是截图):
Wordpress代码高亮插件就是-Enlighter
Enlighter的使用插入代码也很简单
点击编辑器的代码 图标,然后选择代码语言,然后插入代码。
即可。

如果是您自己写的模板,需要注意的是:

需要您的模板需要在header.php里面添加:

<?php wp_head(); ?>

需要您的模板需要在footer.php里面添加:

<?php wp_footer(); ?>

因为插件会自动加载相关文件。


本文地址: https://www.wpyi.com/enlighter.html