一，相关知识

之前使用的代码高亮工具是highlight.js，但是该插件不支持行号。现在换成了更为流行的 prism.js。

插入代码的方式是在HTML中添加如下代码：

<pre class="language-js"><code>console.log('Hello World')</code></pre>

code 标签：用于表示一段计算机代码。强调的是代码本身的含义，而不是格式。不保留代码的原始格式，如空格、换行符和缩进。

pre 标签：表示预格式化的文本。浏览器会保留<pre>标签中内容的空格、换行符和缩进等格式，标签强调的是代码的格式和布局。

为了最大程度地提高代码的可读性和可访问性，建议将<code>标签嵌套在<pre>标签内，以便同时表示代码的语义和保留其格式‌。

在 WordPress 中插入程序代码，分两种情况。一种是经典编辑器，一种是古腾堡编辑器。

二，在古腾堡编辑器中插入代码：

第一步：在古腾堡编辑器中添加“代码”区块。

第二步：最后需要更具代码的语言，在区块的额外的CSS类中添加“language-js”或“language-html”等。

三，在经典编辑器中插入代码：

在经典编辑器中，切换成文本，添加相关的标签和代码。

四，使用TinyMCE自带的插件codesample

参考 https://vtheme.cn/archives/1090