如何添加WordPress代码高亮？代码块怎么用？-WordPress-PHP中文网

<blockquote>最直接有效的方法是使用专业插件实现WordPress代码高亮。Enlighter、Code Prettify和SyntaxHighlighter Evolved是三款常用插件，其中Enlighter功能全面且与古腾堡编辑器集成良好，支持多种语言、主题、行号和一键复制；Code Prettify轻量高效，适合追求性能的用户；SyntaxHighlighter Evolved稳定经典，适合习惯短代码的用户。古腾堡自带“代码”块仅提供等宽字体显示，无语法高亮、行号或复制功能，实用性有限。为确保最佳效果，应选择合适插件并进行主题统一、响应式适配、可访问性优化，同时注意避免插件冲突和性能影响。</blockquote> <img src="https://img.php.cn/upload/article/001/221/864/175652862219256.jpg" alt="如何添加wordpress代码高亮？代码块怎么用？"> 在WordPress中添加代码高亮，最直接有效的方法通常是依赖专门的插件，它们能将你的代码片段渲染得既美观又易读。当然，WordPress自带的古腾堡编辑器也有一个“代码”块，但它默认只提供等宽字体显示，并不具备语法高亮功能，除非你通过其他方式进行扩展。所以，如果你想要真正的语法高亮效果，插件几乎是必选项。 <h3>解决方案</h3> 要为WordPress文章中的代码实现高亮显示，最普遍且功能强大的做法是安装并配置一个专业的代码高亮插件。以我个人经验来看，这是一个投入产出比非常高的选择。这些插件通常提供多种编程语言支持、不同的主题样式、行号显示、一键复制等功能，极大地提升了用户阅读体验。 具体操作流程大致如下： <ol> <li>选择并安装插件： 前往WordPress后台，在“插件”菜单下选择“安装插件”。搜索诸如“Enlighter”、“Code Prettify”、“SyntaxHighlighter Evolved”等关键词。我个人比较推荐Enlighter，它功能全面，界面也比较友好。找到心仪的插件后，点击“立即安装”，然后“启用”。</li> <li> 配置插件设置： 插件启用后，通常会在“设置”或独立的菜单项下出现其配置页面。在这里，你可以根据自己的喜好和网站风格进行调整。 <ul> <li> 主题选择： 多数插件提供多种内置主题（如深色、浅色、Solarized等），你可以预览并选择最适合你网站的。</li> <li> 语言支持： 确认插件支持你常用的编程语言，如PHP、JavaScript、Python、CSS等。</li> <li> 行号显示： 决定是否默认显示代码行号。</li> <li> 复制按钮： 启用或禁用代码块右上角的一键复制按钮。</li> <li> 其他高级设置： 比如字体大小、是否自动换行、自定义CSS等。</li> </ul> </li> <li> 在文章中插入代码： 当你编辑文章时，根据插件的不同，插入代码的方式也会有所差异。 <ul> <li> 古腾堡编辑器： 许多插件会集成到古腾堡编辑器中，提供一个专门的代码块。例如，Enlighter插件会添加一个“Enlighter Code Block”，你可以直接选择语言和主题。</li> <li> 经典编辑器/短代码： 如果你还在使用经典编辑器，或者插件没有直接的古腾堡块，通常会提供短代码（shortcode）的方式。例如：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'>[enlighter language="php" theme="atom-one-dark"] <?php echo "Hello, WordPress!"; ?> [/enlighter]</pre>

登录后复制

</div>你只需将代码粘贴在短代码之间，并指定语言和主题即可。 </li> </ul> </li> <li>保存并预览： 完成代码插入和文章编辑后，保存并预览你的文章。你应该能看到代码已经按照你选择的主题进行了语法高亮显示。</li> </ol> <h3>WordPress代码高亮插件哪个好用？如何选择适合你的？</h3> 在WordPress生态中，代码高亮插件的选择确实不少，各有侧重。我个人在尝试过几个之后，对以下几款有些心得体会： <ol> <li> Enlighter: <ul> <li> 优点： 这是我目前最常用的。它功能非常强大，内置了多种漂亮的主题，支持几乎所有主流编程语言，而且与古腾堡编辑器的集成做得非常好，有专门的“Enlighter Code Block”，插入和配置都非常直观。它还支持行号、代码复制、高亮特定行等高级功能。性能方面也表现不错，不会给网站带来太大负担。</li> <li> 缺点： 初次接触时，设置选项可能略显繁多，需要花一点时间熟悉。</li> </ul> </li> <li> Code Prettify: <ul> <li> 优点： 基于Google Code Prettify库，轻量级，性能优秀。安装后基本不需要太多配置就能工作，适合追求简洁和速度的用户。它会自动检测语言，这一点很方便。</li> <li> 缺点： 主题和自定义选项相对较少，如果你对外观有很高的要求，可能需要自己写一些CSS来调整。语言检测偶尔也会出现偏差，需要手动指定。</li> </ul> </li> <li> SyntaxHighlighter Evolved: <ul> <li> 优点： 这是一款非常老牌且经典的插件，由Automattic（WordPress的母公司）开发。它稳定可靠，支持多种语言和主题，也支持行号。短代码用法非常灵活，对于习惯经典编辑器的用户来说很友好。</li> <li> 缺点： 它的界面和主题风格可能略显陈旧，更新频率也相对较低。在古腾堡编辑器中的集成可能不如Enlighter那么现代化。</li> </ul> </li> </ol> 如何选择适合你的？ <ul> <li> 如果你追求功能全面、美观且易用性高： 毫无疑问，Enlighter 是一个非常棒的选择。它能满足绝大多数技术博客的需求，让你的代码块看起来专业且吸引人。</li> <li> 如果你更看重轻量级、高性能和“设置即用”： Code Prettify 值得一试。它能快速为你提供基本的高亮功能，减少网站的资源消耗。</li> <li> 如果你偏爱经典、稳定，并且主要通过短代码操作： SyntaxHighlighter Evolved 仍然是一个可靠的选项，尤其是对于那些对老牌插件有情怀的用户。</li> </ul> 我的建议是，先尝试Enlighter，如果觉得它过于“重”或者你对它的主题不满意，再考虑Code Prettify。最重要的是找到一个能让你在发布代码时感到轻松愉快的工具。 <h3>WordPress古腾堡（Gutenberg）代码块怎么用？它有什么限制？</h3> 古腾堡编辑器自带的“代码”块，使用起来确实非常简单，但它的功能性却相当有限，这可能是我在初次使用时感到有些失望的地方。 怎么用？ <div class="aritcle_card"> <a class="aritcle_card_img" href="/ai/%E4%BB%A3%E7%A0%81%E5%B0%8F%E6%B5%A3%E7%86%8A"> <img src="https://img.php.cn/upload/ai_manual/001/246/273/68b6cdbf48df2598.png" alt="代码小浣熊"></a> <div class="aritcle_card_info"> <a href="/ai/%E4%BB%A3%E7%A0%81%E5%B0%8F%E6%B5%A3%E7%86%8A">代码小浣熊</a> 代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节 <div class=""> <img src="/static/images/card_xiazai.png" alt="代码小浣熊">51 </div> </div> <a href="/ai/%E4%BB%A3%E7%A0%81%E5%B0%8F%E6%B5%A3%E7%86%8A" class="aritcle_card_btn"> 查看详情 <img src="/static/images/cardxiayige-3.png" alt="代码小浣熊"></a> </div> <ol> <li>在古腾堡编辑器中，点击“+”号添加新块。</li> <li>在搜索框中输入“代码”，或者在“格式”分类下找到“代码”块。</li> <li>点击插入“代码”块后，你就可以直接将你的代码粘贴到文本区域。</li> </ol> 它有什么限制？ <ol> <li> 无语法高亮： 这是最大的限制。古腾堡的“代码”块仅仅是将你粘贴的文本用等宽字体显示在一个灰色背景的框中，它并不会根据编程语言的语法规则进行颜色区分。换句话说，它只是一个“预格式化文本”块，而不是一个“语法高亮”块。对于技术内容来说，这显然是不够的，因为它失去了高亮显示的关键作用——提高代码的可读性。</li> <li> 无主题选择： 你无法选择不同的颜色主题来改变代码块的样式。它只有一个固定的、非常基础的外观。</li> <li> 无行号显示： 它不提供自动的行号显示功能，这对于较长的代码片段来说，会降低引用和讨论的便利性。</li> <li> 无一键复制功能： 读者无法直接点击按钮复制代码，必须手动选择并复制，这在移动端体验尤其不便。</li> <li> 有限的语言支持： 因为没有语法高亮，所以谈不上对特定编程语言的“支持”。它只是一个纯文本容器。</li> </ol> 什么时候会用到它？ 尽管有这些限制，古腾堡的“代码”块也不是完全没有用武之地。 <ul> <li> 展示非编程代码的文本： 比如你只是想展示一段配置文件、日志输出、或者其他不需要语法高亮的纯文本。</li> <li> 临时或快速展示： 如果你只是想快速地在文章中插入一小段代码，而对美观度没有太高要求，或者你后期打算用CSS手动美化，那么它可以作为一个起点。</li> <li> 作为插件的替代方案（配合自定义CSS）： 如果你不想安装额外的插件，并且你对CSS有一定了解，你可以通过自定义CSS来为古腾堡的代码块添加一些基础的高亮效果。但这通常需要你手动为不同类型的代码添加不同的CSS类，并编写复杂的样式规则，维护起来也比较麻烦。</li> </ul> 总的来说，如果你是写技术博客，并且希望你的代码片段能够专业、美观地呈现，那么古腾堡自带的“代码”块远远不能满足需求，你几乎肯定需要一个专业的代码高亮插件。 <h3>WordPress代码高亮设置常见问题与优化技巧</h3> 在使用WordPress代码高亮插件的过程中，我遇到过一些问题，也总结了一些优化技巧，希望能帮到你。 常见问题： <ol> <li> 高亮不生效或显示异常： <ul> <li> 原因： 最常见的是插件冲突，或者主题的CSS覆盖了插件的样式。有时候，如果你手动在代码块中添加了HTML实体（如<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><</pre>

登录后复制

</div>），也可能导致显示问题。</li> <li> 解决方案： 尝试禁用其他插件，看看是否解决。检查主题的<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">functions.php</pre>

登录后复制

</div>或自定义CSS中是否有与代码块相关的样式。确保你的代码是纯文本，没有被WordPress自动转换成HTML实体。某些插件可能需要你手动指定语言，否则会 fallback 到纯文本。</li> </ul> </li> <li> 页面加载速度变慢： <ul> <li> 原因： 某些代码高亮插件可能比较“重”，加载了大量的JavaScript和CSS文件。如果你的文章中有很多代码块，或者代码块特别长，也可能影响性能。</li> <li> 解决方案： 选择轻量级的插件（如Code Prettify）。优化插件设置，只加载你需要的语言包和主题。考虑使用缓存插件，并启用JS/CSS文件的合并与压缩。如果文章中代码块过多，可以考虑将其拆分或使用“展开/折叠”功能（部分插件支持）。</li> </ul> </li> <li> 代码块样式不符合网站整体风格： <ul> <li> 原因： 插件默认的主题可能与你的网站设计不协调。</li> <li> 解决方案： 大多数插件都允许你选择不同的内置主题。如果内置主题都不满意，你可以通过插件的自定义CSS选项，或者在WordPress的“自定义”-youjiankuohao<a style="color:#f60; text-decoration:underline;" title="php" href="https://www.php.cn/zt/15714.html" target="_blank">php</a>cn“额外CSS”中，覆盖插件的默认样式。这需要一些CSS知识，但能让你完全掌控代码块的外观。</li> </ul> </li> </ol> 优化技巧： <ol> <li> 统一代码风格： 无论你选择哪个插件，最好在整个网站中保持代码高亮的主题和设置一致。这能让你的网站看起来更专业，用户体验更好。</li> <li> 利用插件的高级功能：<ul> <li> 高亮特定行： 如果你在讨论代码的某个特定部分，利用插件的高亮行功能（通常通过短代码参数或古腾堡块设置）可以引导读者注意力。</li> <li> 显示文件名/标题： 有些插件允许你在代码块顶部添加文件名或标题，这对于展示多个文件或模块的代码非常有用。</li> <li> 代码复制按钮： 确保启用这个功能，它极大地提升了用户体验。</li> </ul> </li> <li> 响应式设计考虑： 确保你的代码块在不同设备（尤其是移动设备）上都能良好显示。如果代码行很长，插件通常会提供水平滚动条，而不是让代码溢出容器。</li> <li> 可访问性：<ul> <li> 颜色对比度： 确保你选择的代码高亮主题具有足够高的颜色对比度，以便色盲或视力障碍的用户也能清晰阅读。</li> <li> 字体大小： 允许用户通过<a style="color:#f60; text-decoration:underline;" title="浏览器" href="https://www.php.cn/zt/16180.html" target="_blank">浏览器</a>设置调整字体大小，或者插件本身提供字体大小调整选项。</li> </ul> </li> <li> 定期更新插件： 及时更新你的代码高亮插件，以获取最新的功能、性能优化和安全补丁。但在更新前，最好在测试环境中进行验证，以避免潜在的兼容性问题。</li> </ol> 通过这些实践，你会发现管理和展示代码变得轻松许多，也能为你的读者提供更好的阅读体验。毕竟，技术文章的核心之一就是清晰、准确地展示代码。

以上就是如何添加WordPress代码高亮？代码块怎么用？的详细内容，更多请关注php中文网其它相关文章！