如何使用HTML和CSS实现彩色代码展示 无需为多个p标签单独设色

以下两种方案都可以实现你要的差异化展示效果，不需要给单个p标签单独设置样式：

• 实现段落交替着色：使用CSS nth-of-type 伪类
  给承载所有p标签的外层容器设置统一样式规则，浏览器会自动按照段落的奇偶序号匹配样式，新增、删除段落都不需要手动调整样式配置，示例代码如下：

  /* 将 .content-wrapper 替换为你实际用的外层容器类名 */
  .content-wrapper p:nth-of-type(odd) {
    background-color: #f7f7f7;
    padding: 8px 12px;
    margin: 0;
  }
  .content-wrapper p:nth-of-type(even) {
    background-color: #efefef;
    padding: 8px 12px;
    margin: 0;
  }
  

  该方案兼容所有主流现代浏览器，配置一次就可以永久生效。
• 实现代码内容语法高亮：直接使用成熟的开源高亮库
  如果你需要的是代码片段里不同语法元素（关键字、注释、字符串等）的差异化着色，直接引入Highlight.js、Prism.js这类开源高亮库即可，只需要把代码内容放在规范的<pre><code>标签中，库会自动给代码内容添加着色样式，完全不需要手动调整单个元素的样式配置。

如果你要实现图片可点击查看大图的效果，只需要把图片资源和跳转指向的大图资源存储在自有站点资源目录下，按如下Markdown格式编写即可：

[![图片替代文本](图片缩略图地址)](图片大图地址)

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