【SyntaxHighlighter赋能代码展示】—— 打造专业级代码可视化体验

作者： |

写在前面：本博客仅作记录学习之用，部分图片来自网络，如需引用请注明出处，同时如有侵犯您的权益，请联系删除！

前言

在当今数字化内容创作中，WordPress博客支持代码十分必要。一方面，它能满足技术类博主需求，在分享编程知识、算法解析等内容时，直接插入代码示例，让读者清晰看到代码结构与细节，提升内容专业性与可读性。另一方面，对于开发教程、网站搭建经验分享等场景，支持代码可让读者精准复现操作，增强互动性与实用性。此外，代码支持还能丰富博客功能，如嵌入交互式代码编辑器，提升用户体验，吸引更多技术爱好者关注，助力博客在细分领域脱颖而出。

安装 SyntaxHighlighter 插件

  • 正常搜索插件：SyntaxHighlighter，并进行安装与启用。
    在这里插入图片描述
  • 修改插件配置
    在这里插入图片描述

代码样例

[php]your code here[/php]

[css autolinks="false" classname="myclass" collapse="false" firstline="1" gutter="true" highlight="1-3,6,9" htmlscript="false" light="false" padlinenumbers="false" smarttabs="true" tabsize="4" toolbar="true" title="example-filename.php"]your code here[/css]

[code lang="js"]your code here[/code]

[sourcecode language="html"]your code here[/sourcecode]

参数说明

  • lang — 代码语言。如bash、python、html、java、sql、latex、ruby、yaml。
  • autolinks — 切换自动 URL 链接。
  • classname — 向代码框添加一个额外的 CSS 类。
  • collapse — 默认情况下，切换折叠代码框，需要单击即可展开它。
  • highlight – 要突出显示的行号的逗号分隔列表。
  • htmlscript — 切换突出显示任何额外的 HTML/XML。当您将 HTML/XML 与其他语言混合时，例如在 HTML 网页中使用 PHP。例如，上面的预览版启用了它。这仅适用于某些语言。
  • padlinenumbers- 控制行号填充。有效值为 false（无填充）、true（自动填充）或整数（强制填充）。
  • quickcode— 双击时启用编辑模式。

可在插件下方显示代码风格，如下，定制需要进行css定制。

在这里插入图片描述

实际展示

[code lang="html"]
<script type="text/javascript" async
          src="mathjax/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

<script type="text/x-mathjax-config">
              MathJax.Hub.Config({
                showProcessingMessages: false, //关闭js加载过程信息
                messageStyle: "none", //不显示信息
                showMathMenu: false, //关闭右击菜单显示
                availableFonts: ["STIX", "TeX"], //可选字体
                jax: ["input/TeX", "output/HTML-CSS"],
                tex2jax: {
                  inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                  displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
                }
              });
</script>
[/code]

在这里插入图片描述

总结

总结： 本文主要介绍了如何通过安装SyntaxHighlighter插件，让wordpress站点支持对代码进行高亮展示。

致谢

欲尽善本文，因所视短浅，怎奈所书皆是瞽言蒭议。行文至此，诚向予助与余者致以谢意。

参考

[1] SyntaxHighlighter：JS代码高亮与格式化插件完全指南

发表评论

滚动至顶部