网页设计社区的一个真正伟大的方面是它愿意分享解决方案和想法。因此，许多人选择在他们的博客上发布教程和有用的代码片段。
在显示代码时，最好使代码片段看起来尽可能的干净和容易阅读。你也要确保它便于用户复制和粘贴，供他们自己使用。
除了在前台发布代码片段外，在WordPress内部添加语法高亮也有一些很好的理由。首先，标准的WordPress代码编辑器在试图寻找特定的代码时可能会很麻烦--特别是在较长的页面和文章上。
这里有一组免费的WordPress插件，可以帮助你漂亮地显示和编辑代码。
突出显示代码块
高亮代码块设计用于块和经典编辑器，使显示语法高亮的代码变得轻而易举。支持几种流行的语言，包括的设置屏幕可以让你自定义显示。
代码语法块
利用Prism语法高亮器，Code Syntax Block增强了现有的Code block。这使得它很容易在前端显示格式化的代码片段，而无需任何额外的工作。
此外，该插件包括一个视觉主题的选择。其他选择可以通过Prism主题库获得。
语法高亮的代码块（带有服务器端渲染功能）
语法高亮代码块的构建着眼于性能。安装该插件，它将自动为WordPress代码块添加语法高亮--包括现有的代码块。
由于它在服务器端渲染代码，所以不需要在你的网站的前端排队等候JavaScript。而且，CSS只被添加到包含代码块的页面上。它还与谷歌AMP兼容。
SyntaxHighlighter Evolved
SyntaxHighlighter Evolved是一个简单的插件，可以在你的WordPress网站上添加格式化的代码。它包括一个针对Gutenberg用户的自定义块，但仍然可以与经典编辑器很好地配合。顺便说一句，这个块也在WordPress.com上使用。
Urvanov语法高亮器
蜡笔小新语法高亮器的粉丝们会想看看这个 "转世"。
包含的自定义块使它很容易添加高亮的片段，但在其他地方也可以使用放在<pre></pre> 标签之间的任何代码。一个集成的主题编辑器允许大量的定制。
我的语法高亮器
由于支持36个主题，我的语法高亮器很有可能与你的WordPress网站完美地结合起来。
该插件使用CodeMirror库，包括16个不同的Shortcodes，你可以用它来轻松显示代码。
Enlighter - 可定制的语法高亮器
Enlighter将允许在你的网站的后端和前端完全整合WordPress视觉编辑器。这意味着你在WordPress内看到的熟悉的TinyMCE编辑器也可以显示在你的公共网站上。
你还可以显示标签面板，将几个片段组合在一起。
棱镜
Prismatic为你提供三个显示代码的选项。Prism.js,Highlight.js和Plain。
前两个使用他们各自的库，而第三个显示代码时没有任何语法高亮（允许你自定义它的外观）。该插件注重轻量级，只在需要时加载CSS/JS。
Code Prettify
Code Prettify使用谷歌Code Prettify库，自动高亮显示<pre> 或<code> 标签内的任何代码。
HTML编辑器语法高亮程序
现在，为了改进WordPress Post/Page Editor，我们有HTML Editor语法高亮器。在后端高亮显示代码使开发人员的生活变得更加容易。
这个插件不仅可以高亮显示代码，它还可以在页面重新加载后恢复光标位置（这消除了一个常见的小毛病）。
突出显示你的网站
语法高亮器是提高用户体验的一个简单方法，无论你是与世界分享代码片段还是只是在后台编辑自己的代码。
花点时间试验一下上面的一个或多个插件，看看哪个最适合你。
The post10 Free Syntax Highlighter WordPress Pluginsappeared first onSpeckyboy Design Magazine.
