如何让Prism代码高亮工具显示类错误样式的代码块？

不需要额外自定义插件，通过自定义CSS+标记类名就能实现你要的效果，具体步骤如下：

• 给目标代码块添加专属类
  在包裹代码的<pre>标签上添加自定义类（比如error-block），同时保留Prism的语法高亮类：

  <pre class="error-block"><code class="language-python"># 错误代码示例：缩进错误
  def test():
  print("这行没有缩进")
  </code></pre>
  

• 编写自定义CSS样式
  针对这个类编写样式，匹配你示例图里的错误视觉效果：

  /* 错误代码块基础样式 */
  .error-block {
    border-left: 4px solid #e74c3c;
    background-color: #fdf2f2;
    margin: 1em 0;
    position: relative;
  }
  /* 添加右上角的错误标签 */
  .error-block::before {
    content: "错误代码";
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.2em 0.8em;
    background-color: #e74c3c;
    color: #fff;
    font-size: 0.8em;
    border-radius: 0 0 0 4px;
  }
  

• 进阶：标记单/多行错误
  如果需要高亮代码内的错误行，可以给对应行套<span>并添加类：

  <pre class="error-block"><code class="language-javascript">function calc() {
    let a = 10;
    <span class="error-line">return a + ; // 缺少操作数</span>
  }
  </code></pre>
  

  补充对应的CSS：

  .error-line {
    background-color: #ffebee;
    display: block;
    margin: 0 -1em;
    padding: 0 1em;
    border-left: 3px solid #c0392b;
  }
  

这种方式完全基于Prism现有功能扩展，不需要额外插件，样式可以根据你的需求自由调整。

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