一,相关知识
之前使用的代码高亮工具是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”等。
三,在经典编辑器中插入代码:
在经典编辑器中,切换成文本,添加相关的标签和代码。