如何为Monaco Editor中的代码块添加不同背景色及边框？

• 直接用CSS自定义样式
  不用纠结官方有没有对应API，直接给每个代码块分配独立样式就行。可以预设一组柔和的配色方案，给新创建的代码块绑定不同类或者行内样式：

  /* 预设的代码块样式组 */
  .code-block-light-blue {
    background-color: #f0f8ff;
    border: 1px solid #add8e6;
    padding: 12px;
    border-radius: 4px;
  }
  .code-block-beige {
    background-color: #f5f5dc;
    border: 1px solid #d2b48c;
    padding: 12px;
    border-radius: 4px;
  }
  

  生成代码块时，循环或随机给元素加上这些类，就能实现区分效果。

• 基于语法高亮库扩展
  如果你的应用用了Prism、Highlight.js这类语法高亮工具，可以给每个代码块加自定义标识（比如data-block-id属性），再用CSS属性选择器设置样式：

  pre[data-block-id="1"] {
    background: #e8f4f8;
    border: 1px solid #7fc6e4;
  }
  pre[data-block-id="2"] {
    background: #fff3e0;
    border: 1px solid #ffe0b2;
  }
  

  这种方式不会破坏原有语法高亮逻辑，只是叠加了背景和边框样式。

• 动态生成配色的简单逻辑
  要是不想预设配色，也可以用JS随机生成柔和的背景色（避免刺眼颜色），直接绑定到代码块的行内样式：

  // 生成低饱和度的随机背景色
  function getSoftColor() {
    const hue = Math.floor(Math.random() * 360);
    return `hsl(${hue}, 30%, 90%)`;
  }
  // 创建代码块时设置样式
  const codeBlock = document.createElement('pre');
  const hue = Math.floor(Math.random() * 360);
  codeBlock.style.backgroundColor = `hsl(${hue}, 30%, 90%)`;
  codeBlock.style.border = `1px solid hsl(${hue}, 40%, 70%)`; // 对应稍深的边框色
  codeBlock.style.padding = '12px';
  

不用硬套官方的diff功能，那是针对代码差异对比的，和你要区分不同代码块的需求不搭，直接自定义样式就能实现预期效果。

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