如何在WordPress中优雅美观地显示代码片段

学习如何在WordPress中显示代码，对于那些持续在网上发布代码供读者使用的博客和内容创作者来说是至关重要的。计算机代码，根据设计，会在网站的前端显示一些新的东西，而不是你在实际代码片段中发现的标签、斜线和括号。

然而，这给那些写开发和设计的人带来了问题，因为你需要一种方法来正确显示代码，而不需要它做真正的工作，如创建一个按钮或为一个段落块添加样式。

简单地说，如果你写了一篇博客文章，并在其中放了一个代码片段的例子，你会想阻止代码的实际工作! 这样一来，读者就可以看到原始形式的代码，在一个格式良好的块中查看代码，甚至可以复制其内容用于他们的开发工作。

在本指南中，我们将向你展示如何使用几种不同的方法在WordPress中显示代码（无论你的WordPress主题如何），我们将帮助你决定哪种方法最适合你的工作流程。

当你在WordPress中添加常规代码时会发生什么？

如何在你的WordPress网站上显示代码

当你在WordPress中添加常规代码时会发生什么？

你可能会想，如果你在WordPress的可视化编辑器中写一些代码，会发生什么。毕竟，你不是在搞文本或代码编辑器，所以你的代码片段不是应该很好地工作吗？

可能不是。

这里有一些可能发生的不寻常的结果：

代码部分出现，在文章的前端显示一些代码，而其他的则消失了。这在访问者看来是不专业的；这意味着你的代码是不准确的。

完全没有显示，代码在后台完全消失，而在文章的前台没有显示任何东西。

你看到了奇怪的格式——通常是一些对用户不友好的东西，或者是对受众不适合发布的东西。

代码可能只是部分呈现

为了说明这些结果中的几个，我们将使用下面的HTML代码片段：

.cities {

background-color: green;

color: white;

border: 4px solid black;

margin: 10px;

padding: 10px;

}
Chicago
A nickname for Chicago is The City of Broad Shoulders.