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

对于代码的高亮一般有两个，highlightjs 以及Prism。下面我们对他们都进行一番详细介绍。

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

导入到对应的HTML , 中即可。

代码修饰用法

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

针对highlightjs

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>

<!-- and it's easy to individually load additional languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/go.min.js"></script>

同样的放到元素中

<script>hljs.highlightAll();</script>

将代码放到中。

代码修饰用法

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

添加行号

• Prism

<!-- 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" />

• higtlightjs

<!-- Highlight.js 行号插件 -->
<script src="https://cdn.jsdelivr.net/gh/wcoder/highlightjs-line-numbers.js/dist/highlightjs-line-numbers.min.js"></script>

<!-- 启动行号 -->
<script>
  hljs.initLineNumbersOnLoad();
</script>

对比

两者之间没有绝对的优劣之分，各有特点

• Prism 代码更小，支持语言需要特定方式导入。（有些语言不高亮了，你需要找特定语言的插件）
• highlightjs 支持代码多，但是他的包很大，会影响网页加载速度。

代码转换

将代码放入到<pre><code>中，由于HTML会进行编译处理，为了避免代码中的转义错误。你需要将<和 >转换成 HTML 实体 < 和 >，以避免它们在浏览器中被解析为 HTML 标签。

补充

点击highlightjs 官方Demo 你可以看检查效果，那么主题名称与文件是如何对应的的呢？

正确的主题替换方式：主题a11y-dark-mini 替换/default.min.css 成对应对应文件名：a11y-dark.mini.css

替换方式：a11y-dark.mini.css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/a11y-dark.mini.css"/>

代码转义工具

Related Post:

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