给自己搭建Wordpress网站的朋友或多或少都会记录一些程序相关的代码,但是WordPress的代码高亮功能非常简陋的,甚至没有高亮效果,难以阅读。
如果你想要展示漂亮的代码效果,需要安装一款合适的代码高亮插件
本站目前默认使用的Wordpress代码高亮插件就是-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>
(是截图)
(是截图)
(是截图)
(是截图)
目前了解到的一个遗憾是,前端显示的时候阅读者没有一键复制源代码的功能。
下面是wpyi调试好的Wordpress代码高亮显示界面(是截图):
Enlighter的使用插入代码也很简单
点击编辑器的代码 图标,然后选择代码语言,然后插入代码。
即可。
如果是您自己写的模板,需要注意的是:
需要您的模板需要在header.php里面添加:
<?php wp_head(); ?>
需要您的模板需要在footer.php里面添加:
<?php wp_footer(); ?>
因为插件会自动加载相关文件。