如何在WordPress站点的前端显示自定义代码段

Question

我有一个Wordpress网站，我希望它在前端显示原始代码片段，但它一直显示输出。这就是我需要在前端展示的东西。

我在Elementor Pro中使用了几个插件，比如一个模块.等，HTML编辑器，语法高亮器，插入HTML片段，PHP，原始HTML代码片段，SyntaxHighlighter发展，SyntaxHighlighter发展：

我该怎么做呢？

Answer 1

如果您使用的是古腾堡：

1. 在WordPress仪表板中，单击Posts或Pages。
2. 选择“添加新”或“悬停在现有的帖子或页面上”并选择“编辑”。
3. 将光标放置在要显示代码的位置。
4. 单击“添加块”图标(加号)并搜索“代码”。当代码块出现时选择它。

如果您使用的是经典编辑器

使用预先格式化的文本选项显示代码段。

1. 使用经典编辑器打开要包含代码的帖子。
2. 在文本框中输入代码
3. 突出显示代码片段，并从下拉列表中选择预格式化文本选项。

编辑: Gutenberg示例：

<ul id=”mylist”>
  <li id=”list-item3″>text 3</li>
  <li id=”list-item4″>text 4</li>
  <li id=”list-item2″>text 2</li>
  <li id=”list-item1″>text 1</li>
</ul>

显示结果的屏幕截图这里：