代码高亮相关插件推荐

一些技术博客,往往需要发布一些代码,为了方便阅读,需要有代码高亮功能,在此,我便推荐一些优秀的插件,供站长们参考。

一些技术博客,往往需要发布一些代码,为了方便阅读,需要有代码高亮功能,如下:

下面是本页的部分源代码:
<!doctype html>
<html lang="zh-CN" class="avgrund-ready" xmlns:wb="http://open.weibo.com/wb">
<head>
<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>
<!--必填-->
<meta property="og:type" content="webpage" />
<meta property="og:url" content="https://www.npc.ink" />

本站使用主题自带代码高亮功能。

下面来介绍一些优秀的代码高亮插件:

原文链接:https://themeforwp.net/archives/best-code-highlight-plugin/

Crayon Syntax Highlighter

代码高亮

Crayon Syntax Highlighter是功能最全面的代码高亮插件,使用PHP和Jquery构建的,安装好之后它会在Wordpress编辑器中添加一个代码按钮,你可以自定义地添加代码

代码高亮

同时你还可以选择语言、字体、代码格式等多种选项,而且你可以选择自己喜欢的主题,比如Monokai、Eclipse等,内置了几十种风格

还提供了一个工具条,让访客自助能够控制代码的显示,比如

代码换行
超长宽度展示
代码全部选中功能
行号隐藏
新标签中打开代码
如果你不喜欢工具条的话,这些选项你还可以直接在后台设置一个默认值,然后隐藏工具条就是纯代码的展示了

SyntaxHighlighter Evolved

代码高亮

SyntaxHighlighter Evolved是一款非常简洁的插件,最大的特点就是使用方便,他不会为编辑器添加任何多余的元素,如果你想高亮代码,只需要在代码的前后插入对应语言的短代码即可,比如插入PHP语言,就用 [php]代码[/php] 这样的格式,当然这样就无法调整样式了,你可以到插件的设置中设置一个默认的样式,然后应用到所有的代码

Enlighter

代码高亮

相比于其他的插件,Enlighter更加具有现代设计的简洁风格,采用小字体非常的漂亮,支持代码块高亮和行内代码高亮,不管是前台的展示还是后台设计,都是非常用心的设计。

相比Crayon很多非常专业的选项,Enlighter这款插件显得非常易懂,只需要点开输入框,复制进代码保存就行了,不需要进行任何额外的设置就能做出漂亮的代码显示,而且Enlighter很方便的一点就是你可以直接在Wordpress的默认TinyMCE编辑器中直接修改代码,而不必再打开代码框就行修改,即使你是不熟悉代码的人,也能轻松的上手

Code Prettify

代码高亮

可以说是使用最简单的代码高亮插件,Code Prettify在Wordpress的格式化基础上增加了代码高亮样式,你只需要选中代码,然后选择预格式化,他就会自动嗅探语言,并为代码添加高亮效果,这款插件非常适合入门者或者非专业人员使用,它没有任何的设置,但是使用起来非常方便

这几款都是非常优秀的插件,而且全部是免费插件,它们能够帮助我们更好的记录代码、展示代码、阅读代码、改善代码格式

因主题原因,在示例代码中,有部分
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论