WordPress 插入程序代码

一,相关知识

之前使用的代码高亮工具是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”等。

 

三,在经典编辑器中插入代码:

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

收藏
评论
打赏
动态
LandV 企业主题 v2.8.0 发布
2024-12-26
常见问题
不要轻易变更配置,阿里云新人特惠服务器续费问题
2024-12-31
飞翔的鱼丸
39289 阅读
82 发布
2 收藏
动态
FishV 主题 v1.21.0 发布
LandV 企业主题 v2.8.0 发布
MirageV 主题 v2.6.4 发布
FishV 主题 v1.14 发布
BotV 插件 v1.7.0 发布
MirageV 主题 v2.5 正式发布
LandV 企业主题 v2.6.0 发布
MirageV 主题 v2.6.0 发布
生成中...
真诚赞赏,手留余香
登录
注册
重置密码