blogger添加代码高亮教程


说明:本文使用的是highlight.js官网所提供的相关插入代码实现在blogger中写入代码时能显示代码块。本文讲解了如何在blogger中插入自己的代码块,使其得到语法高亮的效果。

声明:本文为博主原创文章,转载时请先与博主联系,并在转载时附上原文链接及相关声明,谢谢。


步骤:

1,       打开博客后台,在布局页面点击添加小工具。


2,       添加HTML/Javascript工具


3,       在工具内容页粘贴以下代码并保存

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/rainbow.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

注意:蓝色标注的rainbow是代码样式,可以自行更换,其他样式可以去highlight.js官网看看,选择自己喜欢的更换。

4,       在博文HTML编辑模式中相应位置插入如下代码

<pre><code class=”python”> 你所要插入的相关代码 </code></pre>
如下图:
显示效果如下


注意:两个双引号中的是你所插入的代码类型,如果是java语言(其它语言类似,更多语言详情见highlight.js官网)可改写为:

<pre><code class=”java”>

   你所要插入的相关代码

</code></pre>

5,       注意如果你使用的一些语言存在一些符号,很可能会显示的时候有缺失,例如:
错误示例

正确示例
对比上图可以发现,当出现'<'符号等特殊符号时,代码会有缺失。

解决办法:将代码粘贴至下面这个网站中将其先转化为HTML编码的样式,再复制粘贴到博客中。(转换的目地就是替换掉一些字符)

                转换网址https://opinionatedgeek.com/Codecs/HtmlEncoder


转换页面示例如下:

将编码结果粘帖进博客中就可以正常显示了!

提醒:上面的只加载了一些通用的语言,如果你还需要其它语言,例如:matlab 
可以加上这一段,
<script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/
9.15.9/languages/matlab.min.js"></script>


打赏作者

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by JXHGZ.COM

此博客中的热门博文

欧拉定理

sort函数和Python部分函数的使用