适用Go英语的语法高亮度的HTML编码

写在前面

对于在博客园TinyMCE方式下,内嵌的插进编码作用不兼容Go语言的难题,文中明确提出2个并不十分极致的解决方法。文中所提计划方案适用代码高亮、伸缩、号码。与此同时,文中中的方式二可以用于自定代码高亮(无论是什么语言)。因为在下并沒有前面基本,因此一些描述很有可能不足准确,热烈欢迎大家不吝赐教。

文章正文

在TinyMCE方式下,有二种插进代码块的方法,如下图所显示。

在其中,深蓝色框中方式是借助第三方软件完成的,适用Go语言,但可折叠的编码进行后无法再伸缩,且沒有编码拷贝按键。鲜红色框中方式是博客园后台管理自身完成的,立即转化成HTML编码来3D渲染高亮度,但该方式现阶段不兼容go语言表达。

对于这样的状况,在下寻找二种不太美好的解决方法。

计划方案一

应用Markdown。

最先必须开展下列设定:进到博客园首页(https://www.cnblogs.com/)–>电脑鼠标放到右上方自身的头像图片上(不必点一下)–>在下拉框框中点一下“我的网站”–>在网页页面上边寻找“管理方法”按键并点一下(不一样肌肤下“管理方法”按键的地方很有可能各有不同)–>点一下“设定”标识–>启用“表明号码”–>点一下“储存”。如下图所显示:

%title插图%numView Pic

随后就可以写MarkDown编码了。如下边的Markdown句子,

%title插图%num

 1 <details> 2 <summary>View Code</summary> 3  4 ```go 5 package main 6  7 import \"fmt\" 8  9 func main(){10     fmt.Println(\"hello world\")11 }12 ```13 </details>

View Code

将造成下列实际效果:

%title插图%num

该计划方案常见问题如下所示:

  1.  <summary>View Code</summary> 中 View Code 可以改成自身喜爱的文本,适用汉语。
  2.  <summary>View Code</summary> 后边务必空出一行,这一点在网上很多材料也没有提及。
  3. 必须显式指出语言表达(如上边编码第4行,go或golang都能够,且不区别英文字母的英文大小写)。

之上计划方案存有显著缺点:1)并没处理TinyMCE方式下的难题,改用Markdown,归属于耍赖皮。2)沒有编码拷贝按键。

计划方案二

如前所述,博客园给予“内嵌”的代码块插进作用,适用高亮度、伸缩、号码、拷贝等作用。该作用的英语的语法高亮度,是运用后台管理优化算法,根据将编码立即用HTML语言表达“装饰”(指出字体样式、色调等)来完成的。缺憾的是,现阶段该作用都还没对于Go语言的“装饰器”。

因此,一种从源头上解决困难的构思是:第一步,仍然运用内嵌作用插进Go编码,只不过是先随意选一种其他语言表达(如C 、C#等),显而易见,这时的高亮度肯定是有所不同的,由于不一样的语言表达关键词各有不同,因此,必须开展第二步。第二步,将【博客园网页页面中装饰代码格式的那一段HTML编码】换成【适用Go英语的语法高亮度的HTML编码】。

那麼,那么问题来了:1)如何寻找后台管理HTML编码?2)如何获得【适用Go英语的语法高亮度的HTML编码】?不容易是必须手写吧?

回应:1)返回文中第一张照片,深蓝色框右侧的按键,便是写着“HTML”的那一个,点一下它,就能见到blog相匹配的HTML编码。2)毫无疑问并不是笔写,但必须依靠其他专用工具,Sublime Text,可以到这儿免费下载,随后依据这儿和这儿实际操作。在这里非常感谢之上三个环节的创作者。

到此,自学能力强或是有HTML基本的阅读者,可以搞起来了。想掌握关键点的,可以往下看。

流程1:依据上边三个连接,安裝 Sublime Text 和 SublimeHighlight 软件,这儿不会再过多阐释。

流程2:到  Sublime Text安装文件\\Data\\Packages\\SublimeHighlight  下,开启 themes.png 文档,可以见到各主题风格名字和相匹配的款式,如下图:

流程3:或是在流程2中的文件目录下,用随意文本编辑(如Sublime Text、notepad 等)开启 SublimeHighlight.sublime-settings 文档,开展如下图所显示的改动:

留意,之上设定的是导出来的编码款式,并不是Sublime Text编写区的编码款式,阅读者会发觉改动配备后编写区编码的款式沒有转变,这也是正常的状况。

流程4:在Sublime Text中输入要添加的Go字符串常量,留意保证文件后缀为 .go。然后,按下面的图实际操作:

流程5:用在线编辑器的大批量更换作用,将 background-color: #f8f8f8 所有更换为 color: #008080 ,这儿, #f8f8f8 是号码的背景颜色,不一样主题风格很有可能会出现不一样, #f8f8f8 相匹配的是 default 主题风格; #008080 是博客园默认设置的号码色调,阅读者还可以设定自身喜爱的其他色调。那么做的因素是:博客园插进代码块的情况是橘黄色的(#f5f5f5),假如号码有其他色调环境得话,会不好看。結果如下图所显示(图上为 default 主题风格,而且为清楚展现,手动式对编码开展了自动换行):

流程6:在博客园中,应用内嵌插进编码按键,插进编码,语言表达随意选择一种,启用“所有伸缩”和“表明号码”,最终点一下“插进编码”按键。如下图:

%title插图%num

流程7:在博客园编写网页页面,点一下“HTML”按键,开启blog相匹配的HTML编码,如下图,用图中白框内编码更换下面的图白框内编码,随后点一下左下方“升级”按键。(下面的图中编码也是通过手动式排版设计的)

%title插图%num

流程8:最后实际效果如下图:

%title插图%num

GIF色调有一些失帧,静态数据图如下所示

%title插图%num

假如需要应用 themes.png 中的灰色背景主题风格,如 vim 主题风格,必须在流程7中照片上划绿线的句子中添加 style=\”background: #000000;\” ,将要环境设为灰黑色,与此同时,提议在流程5里将号码色调设成与灰黑色比照独特的色调(如 #ffc300 )。实际效果如下所示:

%title插图%num

多讲一句,改动流程7中照片上划蓝线的句子,可以改动全部“编码展现框”的环境,阅读者可以自主实验。

到此,计划方案二详细介绍结束。

该办法的弊端也很显著——不便!

题外话:

notepad 也可以导出来HTML文档,十分简单(好像高版本号的 notepad 内置 NppExport 软件),但不兼容连着连号码一起导出来(这儿有一个解决方法,很钦佩创作者的迥异构思),与此同时,转化成的HTML编码将款式抽身为一堆类选择器,因而,在和博客园的HTML源代码开展融合的过程中会非常不便,尤其是当一篇blog必须插进多段编码的情况下。

VS Code将编码导出来为HTML文档的流程更为繁杂,必须依靠第三方专用工具,且一样不兼容编码号码。这一局势,在下也很诧异。如果有了解运用VS Code将编码导出来为HTML的通俗方式的阅读者,劳烦鼎力相助。

写在后面

  1. 上边实例教程对于的是伸缩编码并表明号码的状况,假如不用这种作用,只需在博客园和Sublime Text中做相对应调节就可以,坚信阅读者可以举一反三。
  2. 再度对文中中全部连接的小编表明由衷的感谢。
  3. 在下孤陋寡闻,原文中免不了有不正确疏忽之处,热烈欢迎大伙儿不吝赐教,您的指责是在下前行的锲而不舍驱动力