关于google blogger 添加代码高亮和行号功能

{tocify} $title={Table of Contents}

两种方案的选择

方案	适合人群	优点	推荐指数
highlightjs-line-numbers.js	已用 Highlight.js 的用户	快速、简单	⭐⭐⭐
Prism.js + 行号插件	想要更美观、强大的用户	美观、灵活	⭐⭐⭐⭐⭐

highlightjs vs Prism

支持的语言特别多，但是在添加行号处理的时候，highlightjs-line-numbers.js会出现表格化问题，每一行虽然有行号，形成很丑的表格。
Prism.js问题是仅仅支持js、css、html几种语言，十分的轻量。对于C语言没法处理，需要引入特别为其他语言准备的js，因此需要引入针对特定的语言脚本。

Prism.js 用法

<!-- Prism 样式：Monokai 风格 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-one-dark.min.css" rel="stylesheet" />

<!-- Prism 主库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>

<!-- Prism 行号插件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>

<!-- Prism 行号插件样式 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet" />

<!-- Prism C语言支持，默认的支持js,css,html基本语言，有需要自己导入特定语言 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-c.min.js"></script>

将这段代码复制粘贴到blogger html源代码的head中。

新建文章，嵌入你需要添加代码

<pre class="line-numbers"><code class="language-xxx">
  代码
</code></pre>

代码转换

将代码放入到<pre><code>中，由于HTML会进行编译处理，为了避免代码中的转义错误。

你需要将 "<" 和 ">" 转换成 HTML 实体 &lt; 和 &gt;，以避免它们在浏览器中被解析为 HTML 标签。

代码转义工具

• https://www.lksr.net/p/html.html