-
代码高亮
2019-07-07 13:59:51代码高亮显示符号 ` 代码高亮显示符号 ~(不推荐) 演示内容 ```java public static void main(String[] args) { int i = 1; } ``` 函数名等还可以用`fun()`表示 演示效果 public static void main(String[] ... -
js代码高亮显示 JavaScript代码高亮 jsp
2009-05-17 21:51:06js代码高亮显示 JavaScript代码高亮 jsp js代码高亮显示 JavaScript代码高亮 jsp -
代码高亮_10个WordPress代码高亮插件推荐(2019年)
2021-01-13 19:18:38当然,国内有很多比较成熟的主题都集成了代码高亮插件,如果没有集成代码高亮功能的,就有必要安装一款合适的代码高亮插件。里维斯社从网上整理了一些2019年目前仍在更新的10个WordPress代码高亮插件,推荐给你。1、...很多技术博客都会折腾一些代码,然后将自己的折腾过程记录下来,发到博客上供大家相互学习。但是WordPress自身的代码功能比较简陋,没有自带的高亮效果,这让用户阅读起来比较吃力。
当然,国内有很多比较成熟的主题都集成了代码高亮插件,如果没有集成代码高亮功能的,就有必要安装一款合适的代码高亮插件。里维斯社从网上整理了一些2019年目前仍在更新的10个WordPress代码高亮插件,推荐给你。
1、Crayon Syntax Highlighter
下载地址:https://wordpress.org/plugins/crayon-syntax-highlighter/
Crayon Syntax Highlighter是功能最全面的代码高亮插件,使用PHP和Jquery构建的,安装好之后它会在Wordpress编辑器中添加一个代码按钮,你可以自定义地添加代码
同时你还可以选择语言、字体、代码格式等多种选项,而且你可以选择自己喜欢的主题,比如Monokai、Eclipse等,内置了几十种风格。
提供了一个工具条,让访客自助能够控制代码的显示,比如:
- 代码换行
- 超长宽度展示
- 代码全部选中功能
- 行号隐藏
- 新标签中打开代码
2、Pure-Highlightjs
依赖项目:https://highlightjs.org/
下载地址:https://codeload.github.com/icodechef/Pure-Highlightjs/zip/1.0
一个基于 Highlightjs 实现的 WordPress 代码高亮插件,支持 N 多种语言高亮,还提供多种主题。
3、SyntaxHighlighter Evolved
下载地址:https://wordpress.org/plugins/syntaxhighlighter/
SyntaxHighlighter Evolved是一款非常简洁的插件,最大的特点就是使用方便,他不会为编辑器添加任何多余的元素,如果你想高亮代码,只需要在代码的前后插入对应语言的短代码即可,比如插入PHP语言,就用 [php]代码[/php] 这样的格式,当然这样就无法调整样式了,你可以到插件的设置中设置一个默认的样式,然后应用到所有的代码。
4、Enlighter
下载地址:https://cn.wordpress.org/plugins/enlighter/
相比于其他的插件,Enlighter更加具有现代设计的简洁风格,采用小字体非常的漂亮,支持代码块高亮和行内代码高亮,不管是前台的展示还是后台设计,都是非常用心的设计。
相比Crayon很多非常专业的选项,Enlighter这款插件显得非常易懂,只需要点开输入框,复制进代码保存就行了,不需要进行任何额外的设置就能做出漂亮的代码显示,而且Enlighter很方便的一点就是你可以直接在Wordpress的默认TinyMCE编辑器中直接修改代码,而不必再打开代码框就行修改,即使你是不熟悉代码的人,也能轻松的上手。
5、Code Prettify
下载地址:https://cn.wordpress.org/plugins/code-prettify/
可以说是使用最简单的代码高亮插件,Code Prettify在Wordpress的格式化基础上增加了代码高亮样式,你只需要选中代码,然后选择预格式化,他就会自动嗅探语言,并为代码添加高亮效果,这款插件非常适合入门者或者非专业人员使用,它没有任何的设置,但是使用起来非常方便。
6、WP-GeSHi-Highlight
下载地址:https://wordpress.org/plugins/wp-geshi-highlight/
输出代码更加简洁,跟进最新的 WordPress API 调用,完全兼用 WP-Syntax (使用方法,参数都继承了)。WP-GeSHi-Highlight 支持N多种语言高亮。
7、CodeColorer
下载地址:https://wordpress.org/plugins/codecolorer/
CodeColorer是一款wordpress下的代码高亮插件,支持语言广泛,有多种风格可以选择,另外也可以定义自己风格。
8、SyntaxHighlighter
下载地址:https://wordpress.org/plugins/syntaxhighlighter/
相对比较成熟稳定的老牌语法高亮插件了,而且还支持复制、在新窗口查看源代码等较多的可选功能。
9、FV Code Highlighter
下载地址:https://wordpress.org/plugins/fv-code-highlighter/
这个插件支持PHP的突出显示,(x)HTML,JavaScript,CSS和XML。默认的荧光笔颜色方案使用Adobe的Dreamweaver使用的相同颜色。通过一些关于CSS的知识,可以完全自定义插件的输出样式。
10、Developer Formatter
下载地址:https://wordpress.org/plugins/devformatter/
在页面或博客上创建更好的代码显示。这个插件使用GeSHi高亮系统,支持超过110种语言,包括PHP,ASP,Html,JavaScript,CSS,Java,Python,Delphi,C ++,C,Visual Basic等等。
-
代码高亮问题
2019-03-10 21:15:08我们知道,在使用编译器开发时,都会有代码高亮。一来可以帮助我们快速找到相应关键词,二来可以优化我们写代码的体验,那么在发表文章时候该怎么来使得代码高亮呢。 这里,我就为大家简单介绍下csdn的代码高亮。 ...我们知道,在使用编译器开发时,都会有代码高亮。一来可以帮助我们快速找到相应关键词,二来可以优化我们写代码的体验,那么在发表文章时候该怎么来使得代码高亮呢。
这里,我就为大家简单介绍下csdn的代码高亮。
正常情况我们插入的代码应该是这样的
但是csdn有自己独有的代码高亮,只需要在代码前加入三个" ` ";也就是键盘上1左边的这个符号然后附上代码所属的语言,例如以下代码为JavaScript的加上JavaScript就可以高亮展示了。怎么样,小伙伴,是不是又get一个新技能呢。var poem=document.getElementById('poem'); var str="“你的过去我不愿过问,那是你的事情;你的未来我希望参与,这是我的荣幸!”"; var arr=str.split(""); setTimeout(function(){ poem.style.display='block'; for (var i=0; i<arr.length; i++) { (function (i) { setTimeout(function(){ var oN=document.createElement('br'); var oS=document.createElement('span'); var a=Math.random()*255; var b=Math.random()*255; var c=Math.random()*255; oS.innerText=arr[i]; oS.style.color='rgb('+a+','+b+','+c+')'; poem.appendChild(oS) if(i%10==0&&i>0){ poem.appendChild(oN); } },300*i) })(i) } },5000)
-
代码高亮_程序员的福利,四个技巧,让OneNote支持代码高亮
2021-01-14 07:31:36写在前面对于程序员来说,代码高亮是最基本的需求。印象笔记、有道云笔记、为知笔记都提供了相应的功能。而OneNote,沿袭了微软“术业有专攻”的理念,并没有提供类似的功能。插入到OneNote中的代码,只会以普通文本...写在前面
对于程序员来说,代码高亮是最基本的需求。
印象笔记、有道云笔记、为知笔记都提供了相应的功能。
而OneNote,沿袭了微软“术业有专攻”的理念,并没有提供类似的功能。
插入到OneNote中的代码,只会以普通文本显示,这不免令人沮丧。也劝退了一部分用户。
好在,我们可以通过间接的方式来实现代码高亮。
目录
- Gem-数字珍宝插件
- NoteHighlight插件
- 借助Word
- 在线代码高亮工具
- 前端IDE
- 总结
Gem-数字珍宝插件
“数字珍宝”是OneNote上最出名的插件,自然不会少了“代码高亮”这样的功能。该功能兼容多种编程语言,具有丰富的自定义选项。
“数字珍宝”下载地址:http://cn.onenotegem.com/gem-for-onenote.html
关于插件的安装与卸载请看“一册笔记”的另一篇文章:谁说OneNote不能批量替换与排序?活用插件,实现效率最大化
数字珍宝,代码高亮功能位置
数字珍宝,代码高亮演示
这款插件是付费的,拥有30天的试用期。到期后,会弹出提示窗口要求购买。取消这个提示窗口后,“代码高亮”功能依然可用。虽然很繁琐,但这样可以绕过付费提示。如果有能力的话,还是希望购买此插件。
付费提示
还需要说明的是,该插件提供的“代码高亮”功能,有一个BUG,插件生成到OneNote中的代码,再复制到IDE中会报错。
错误演示
强烈不建议大家“插入代码行数”,再把代码复制到IDE时,会将“行数数字”一并复制过去,这不是你想看到的!
NoteHighlight插件
“NoteHighlight”专注于“代码高亮”功能,是github上的一个开源项目。支持多种编程语言,以及自定义风格。该插件需要根据自己的OneNote版本选择对应的插件版本,比较麻烦。
功能位置
2010版没有发现安装版。而2013版是在2010基础上改进的,原版本已经长久不更新,所以2013版的插件又划分出多个版本。请看好自己的版本再下载安装。
NoteHighlight2010(源码版,区分32/64):https://archive.codeplex.com/?p=notehighlight
NoteHighlight2013(源码版,区分32/64):https://archive.codeplex.com/?p=notehighlight2013
NoteHighlight2013(中文安装版,不稳定,区分32/64):
https://github.com/yifengling0/NoteHighlight/releases/tag/1.0
NoteHighlight2013(英文安装版,需要积分下载,区分32/64):https://download.csdn.net/download/zzg19950824/10254704
NoteHighlight2016(安装版,推荐,区分32/64):https://github.com/elvirbrk/NoteHighlight2016/releases
经“一册君”测试,NoteHighlight2013中文版非常不稳定。
报错信息
英文版在安装时,请退出OneNote,否则需要人为启动该插件,或重启OneNote。
进行到如下步骤时,请一定要选择“Everyone”,否则OneNote无法加载插件,需要卸载插件重新安装。
英文版注意事项
同样不建议大家“插入代码行数”,你懂的!
借助Word
将Eclipse(VS同理)的代码复制到Word可以保留高亮,再将Word中的代码剪切到OneNote即可。该方式无需插件,缺点就是有点麻烦,而Office又不是免费的。
借助word转存演示
使用IDEA的话,复制代码到OneNote可保留高亮,但空格被消除了。
直接复制的后果
经手Word的话,主题如果是黑色,复制到Word后,还需要清除样式。白色主题不受此影响。
复制到word,记得“清除样式”
在线代码高亮工具
通过“在线工具”,给代码添加高亮,再保存到OneNote中。虽然不需要插件,也不需要其它Office软件。但需要保持联网,而且和“数字珍宝”一样,生成的代码保存到OneNote中,再复制到IDE也会报错。
网址:http://tool.oschina.net/highlight
报错演示
前端IDE
总结之前,还要对前端IDE进行一些说明:
- WebStorm 代码在OneNote中保持高亮,使用的方法与IDEA一样。
- Sublime Text 安装“Sublime Highlight”插件,即可实现代码复制到OneNote保持高亮。
- VS Code中的代码复制到OneNote直接保持高亮,应该是最方便的IDE了。
总结
是时候做个总结了!
四种方法优缺点如下表:
还有一些其它的方法,都绕不开“第三方转换”这一道工序,鉴于性质类似,“一册君”就没有整理到文章中了。
不管使用什么方法, “插入代码行数”都是不明智的!
想在OneNote中给代码设置背景,可以通过表格中的“底纹”来实现。
将代码放入到表格,给表格设置“底纹”
如果大家还有其它疑问的话,欢迎在评论区留言。
碎碎念
实话说,OneNote设置代码高亮还是蛮繁琐的。如果很在意这个功能的话,应该适当考虑支持“Markdown”或者支持“插入代码块”的云笔记软件。
OneNote,想说“爱你”,不容易!
以上。
如果你喜欢“一册笔记”,请记得分享,点赞和关注!
未完待续。。。
-
hexo代码高亮
2020-11-27 17:40:26开启代码高亮 配置文件中有开启代码高亮的配置项 写法 关于语言类型怎么写? hexo中markdown语法高亮使用的是highlight.js,可以参考highlight.js文档 ????????????????????????????????????????????????????????... -
谈谈iceCode代码高亮插件的开发问题,由我们国人开发代码高亮插件!
2020-05-09 14:23:01做为一名资深的开发者,有时候再写一些技术性的文章时,常常需要使用代码高亮插件来展示自己的代码,大家都知道SyntaxHighlighter、Google Code Prettify、Highlight等等JavaScript代码高亮插件,你或许发现最出名的... -
highlight 网页代码高亮显示插件
2019-04-05 09:58:16highlight.pack.js 网页代码高亮显示插件,独立插件js代码 -
csdn 普通编辑器 代码样式 代码高亮 高亮代码皮肤更换
2017-06-12 18:00:33至今为止,没有用过一次普通的编辑器,原因就是,代码样式,代码高亮的问题,代码从编译器贴进去,代码的缩进格式问题。 不知道你是否也有这样的问题,那么你看了这篇文章,也许就能帮你解答。 插入代码 -
OneNote 代码高亮方法
2020-11-19 00:23:02但是它有一个令人头疼的问题就是:无法代码高亮。而NoteHightlight2016正是解决这个问题的完美利器。 方法1: 用 Microsoft VS Code编辑器,复制代码粘贴到OneNote,代码块就自带高亮效果了。 OneNote显示效果... -
设置c++代码高亮
2019-09-11 16:22:01设置c++代码高亮 markdown语法: -
WordPress自动代码高亮
2020-10-20 09:34:00WordPress 自带的代码块是没有代码高亮的,我们可以通过安装插件,设置代码高亮。 因为都是使用 Markdown 写博客,再用 MWeb 发布到博客上,Enlighter 这种需要依赖谷腾堡编辑器插入额外模块的插件,就不太适合我了... -
Vue之代码高亮组件
2019-11-19 21:34:23Vue实现代码高亮 -
oneNote2016代码高亮
2017-09-15 23:27:04oneNote2016代码高亮插件 -
Wangeditor如何实现代码高亮
2020-02-21 10:50:31使用WangEditor,如何实现代码高亮? WangEditor官网指导安装highlight.js会自动识别该插件,但是安装了不能识别 -
Github实现代码高亮
2020-05-19 10:44:50这是GitHub上某个项目中的一个文件代码,若我想将这个文件的代码发送给别人看,那么只需将网页上的地址发送给别人即可,但如果该文件的代码量特别大,而我想提醒别人从哪个地方开始看,你就可以使用代码高亮。... -
VsCode打开.vue文件代码高亮
2020-04-10 08:54:58vscode代码高亮 -
CSDN博客代码高亮
2019-01-16 13:58:35代码默认效果 默认效果一片黑 Thread thread = new Thread(() -> { System.out.println("hello world!"); System.out.println("welcome to Westworld!"...代码高亮效... -
代码高亮syntaxhighlighter
2011-05-27 18:05:00下载地址: http://alexgorbatchev.com/SyntaxHighlighter/<br /> 对于一些程序代码类的网页,常常需要贴出代码,但显示效果往往很难让人满意(不能突出代码),如必优博客使用的代码高亮都是... -
代码高亮——CodeColorer
2017-12-11 21:46:081.在VPS上执行指令 ...2.下载CodeColorer插件,支持代码高亮 3.在非可视化的文本下编辑,由[cc lang="你要高亮的代码,如java"]code[//cc]进行插入代码,然后回到文章页面查看 java实例如下:public String execute -
Sublime 如何使solidity代码高亮
2019-07-17 17:58:53sublime 如何使solidity代码高亮 -
Wangeditor如何实现代码高亮?
2018-11-11 11:42:18使用WangEditor的vue项目,如何实现代码高亮? WangEditor官网指导安装highlight.js会自动识别该插件,但是安装了不能识别 -
Vue中实现代码高亮功能
2019-04-25 12:22:25import hljs from 'highlight.js' //导入代码高亮文件 import 'highlight.js/styles/monokai-sublime.css' //导入代码高亮样式 同样是在main.js文件中自定义一个指令: //自定义一个代码高... -
ckeditor4.4.6添加代码高亮
2018-08-26 21:41:49研究了很久才发现,在 ckeditor4.4.6中添加代码高亮超级简单啊,下面直接上过程 ckeditor4.4.6支持自定义代码高亮,利用Code Snippet插件并默认启用highlight.js库 去ckeditor官网下载Code Snippet,然后把解压的... -
WordPress自定义pre样式DIY代码高亮
2020-08-26 11:04:191、强烈推荐手动安装谷歌代码高亮 google-code-prettify到wordpress 2、把WP-GeSHi-Highlight代码高亮插件集成到wordpress文本编辑器 3、WordPress代码高亮插件 WP-GeSHi-Highlight 将以下css样式添加到你主题的 ... -
CSDN博客代码高亮显示
2018-10-20 22:22:30今天分享下在CSDN写博客的时候如何设置代码高亮 一、首先进入个人博客界面: 二、进入博客管理界面 三、进入管理界面后进入博客设置 四、设置选择你的博客标题、描述和想要的皮肤并选择代码显示格式 那么走到这里... -
Eclipse设置代码高亮,设置代码样式
2018-03-23 16:11:58前言 由于eclipse自身的文本框、代码颜色等不够好看,不够护眼等原因,于是自己摸索试着设置了下,最后成功设置代码颜色高亮,分享如下。...)方法一、设置代码高亮 先打开eclipse,打开菜单栏window->pr... -
MarkdownPad2使用代码高亮插件
2017-11-18 12:12:00MarkdownPad 2有插入代码块的功能,但样式却不尽人意,但又不想换个编辑器,找了挺多相关资料,最后在...Google Code Prettify,代码高亮的JS库 详解Google Code Prettify代码高亮Prettify.js库使用及其应用 pret...