求助：WordPress可视化编辑器破坏[code]标签内代码并转JS为图片

我太懂这种糟心的情况了——文本编辑器里好好的代码，切到可视化模式就面目全非，JS还变成图片，这都是WordPress编辑器的安全过滤和内容解析机制在搞鬼。既然你的代码只需要展示不需要执行，给你几个靠谱的解决方案：

• 用古腾堡内置的代码块（最省心）
  如果你用的是新版古腾堡编辑器，直接点击添加块，搜索「代码」，选对应的语言（HTML或JavaScript），把代码粘贴进去就行。这个块是WordPress官方专门为展示代码设计的，不管你怎么切换可视化和文本模式，代码都不会被篡改，前端展示也会保持格式，还自带语法高亮。

• 经典编辑器用<pre><code>+转义特殊字符
  要是还在用经典编辑器，别用自定义的[code]标签了，换成标准的HTML代码容器：

  1. 先把代码里的特殊HTML字符转义：<换成<，>换成>，&换成&
  2. 把转义后的代码放在<pre><code>标签里，比如：

     <pre><code>&lt;div class="demo"&gt;
       &lt;script&gt;
         console.log('这只是展示代码，不会执行');
       &lt;/script&gt;
     &lt;/div&gt;</code></pre>
     

  这样可视化编辑器就不会把代码当成实际可执行的HTML来解析，自然也就不会破坏内容了。

• 安装代码高亮插件（功能最强）
  要是经常需要展示代码，直接装个专门的插件，比如SyntaxHighlighter Evolved或者CodeMirror Blocks。这些插件会提供专属的短代码（比如[html]、[javascript]）或者编辑器块，你直接把原始代码放进去就行，插件会自动处理转义和展示，完全不用担心编辑器切换的问题，还能自定义代码高亮样式，效果比原生的好很多。

为什么原来的[code]标签不行？因为WordPress默认不识别这个自定义短代码（除非你自己在主题或插件里注册过），可视化编辑器会把里面的内容当成普通HTML/JS来处理，出于安全考虑，它会过滤或转换掉它认为有风险的内容（比如script标签），这就是代码被破坏、JS变成图片的原因。

内容的提问来源于stack exchange，提问作者Infor Mat