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
飞翔的鱼丸
36119 阅读
82 发布
2 收藏
动态
FishV 主题 v1.14 发布
MirageV 主题 v2.5 正式发布
MirageV 主题 v2.6.4 发布
LandV 企业主题 v2.6.0 发布
BotV 插件 v1.7.0 发布
MirageV 主题 v2.6.0 发布
MirageV-App 小程序 v1.2.2 发布
LandV-App 企业官网小程序 v1.1.0 发布
生成中...
真诚赞赏,手留余香
登录
注册
重置密码