zoukankan      html  css  js  c++  java
  • 解决博客园TinyMCE模式下内置插入代码块功能不支持Go语言的问题(两个并不完美的解决方案)

    写在前面

    针对在博客园TinyMCE模式下,内置的插入代码功能不支持Go语言的问题,本文提出两个并不十分完美的解决方案。本文所提方案支持代码高亮、折叠、行号。同时,本文中的方法二可以用来自定义代码高亮(不管是什么语言)。由于在下并没有前端基础,所以某些表述可能不够确切,欢迎读者批评指正。

    正文

    在TinyMCE模式下,有两种插入代码块的方式,如下图所示。

    View Pic

    其中,蓝色框中方法是利用第三方插件实现的,支持Go语言,但折叠的代码展开后不能再折叠,且没有代码复制按钮。红色框中方法是博客园后台自己实现的,直接生成HTML代码来渲染高亮,但该方法目前不支持go语言。

    针对这种情况,在下找到两种不太完美的解决方案。

    方案一

    使用Markdown。

    首先需要进行以下设置:进入博客园主页(https://www.cnblogs.com/)-->鼠标放在右上角自己的头像上(不要点击)-->在下拉列表框中点击“我的博客”-->在页面上方找到“管理”按钮并点击(不同皮肤下“管理”按钮的位置可能有所不同)-->点击“设置”标签-->勾选“显示行号”-->点击“保存”。如下图所示:

    View Pic

     然后就可以写MarkDown代码了。如下面的Markdown语句,

     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

    将产生以下效果:

    View Pic

    该方案注意事项如下:

    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”的那个,点击它,就能看到博客对应的HTML代码。2)肯定不是手写,但需要借助其它工具,Sublime Text,可以到这里下载,然后根据这里这里操作。在此特别感谢以上三个链接的作者。

    至此,动手能力强或者有HTML基础的读者,可以搞起来了。想了解细节的,可以往后看。

    步骤1:根据上面三个链接,安装 Sublime Text 和 SublimeHighlight 插件,这里不再赘述。

    步骤2:到  Sublime Text安装目录DataPackagesSublimeHighlight  下,打开 themes.png 文件,可以看到各主题名称和对应的式样,如下图:

    View Pic

    步骤3:还是在步骤2中的目录下,用任意文本编辑器(如Sublime Text、notepad++等)打开 SublimeHighlight.sublime-settings 文件,进行如下图所示的修改:

    View Pic

    注意,以上设置的是导出的代码式样,不是Sublime Text编辑区的代码式样,读者会发现修改配置后编辑区代码的式样没有变化,这是正常现象。

    步骤4:在Sublime Text中键入要插入的Go代码段,注意确保文件后缀为 .go。接着,按下图操作:

    View Pic

    步骤5:用编辑器的批量替换功能,将 background-color: #f8f8f8 全部替换为 color: #008080;user-select:none ,这里, #f8f8f8 是行号的背景色,不同主题可能会有不同, #f8f8f8 对应的是 default 主题; #008080 是博客园默认的行号颜色,读者也可以设置自己喜欢的其它颜色。这么做的原因是:博客园插入代码块的背景是灰色的(#f5f5f5),如果行号有其它颜色背景的话,会不好看。结果如下图所示(图中为 default 主题,并且为清晰展示,手动对代码进行了换行):

    View Pic

    步骤6:在博客园中,使用内置插入代码按钮,插入代码,语言任选一种,勾选“全部折叠”和“显示行号”,最后点击“插入代码”按钮。如下图:

    View Pic

    步骤7:在博客园编辑页面,点击“HTML”按钮,打开博客对应的HTML代码,如下图,用上图红框内代码替换下图红框内代码,然后点击左下角“更新”按钮。(下图中代码也是经过手动排版的)

    View Pic

    步骤8:最终效果如下图:

    View Pic

    GIF颜色有些失真,静态图如下

    View Pic

    如果想要使用 themes.png 中的黑色背景主题,如 vim 主题,需要在步骤7中图片上划蓝线的语句中加入 style="background: #000000;" ,即将背景设为黑色,同时,建议在步骤5中将行号颜色设为与黑色对比鲜明的颜色(如 #ffc300 )。效果如下:

    View Pic

    多说一句,修改步骤7中图片上划绿线的语句,可以修改整个“代码展示框”的背景,读者可以自行试验。

    至此,方案二介绍完毕。

    该方法的缺点也很明显——麻烦!

    题外话:

    notepad++也能导出HTML文件,十分简便(貌似高版本的 notepad++ 自带 NppExport 插件),但不支持连同连行号一起导出(这里有一个解决方案,很佩服作者的清奇思路),同时,生成的HTML代码将式样抽离为一堆类选择器,因此,在和博客园的HTML代码进行整合的时候会比较麻烦,特别是当一篇博客需要插入多段代码的时候。

    VS Code将代码导出为HTML文件的步骤更加繁琐,需要借助第三方工具,且同样不支持代码行号。这个局面,在下也很惊讶。如果有知道利用VS Code将代码导出为HTML的简单方法的读者,烦请不吝赐教。

    写在后面

    1. 上面教程针对的是折叠代码并显示行号的情况,如果不需要这些功能,只要在博客园和Sublime Text中做相应调整即可,相信读者可以举一反三。
    2. 再次对本文中所有链接的作者表示由衷感谢。
    3. 在下才疏学浅,文中难免有错误疏漏之处,欢迎大家批评指正,您的批评是在下前进的不懈动力。
  • 相关阅读:
    18 | 案例篇:内存泄漏了,我该如何定位和处理?
    17 | 案例篇:如何利用系统缓存优化程序的运行效率?
    16 | 基础篇:怎么理解内存中的Buffer和Cache?
    Scrapyd 改进第一步: Web Interface 添加 charset=UTF-8, 避免查看 log 出现中文乱码
    scrapy_redis 相关: 将 jobdir 保存的爬虫进度转移到 Redis
    lxml.etree.HTML(text) 解析HTML文档
    CSS/Xpath 选择器 第几个子节点/父节点/兄弟节点
    scrapy_redis 相关: 查看保存的数据
    scrapy 通过FormRequest模拟登录再继续
    python2 python3 转换,兼容
  • 原文地址:https://www.cnblogs.com/zpcdbky/p/15232537.html
Copyright © 2011-2022 走看看