如何修复HTML中pre与code标签的代码块缩进异常问题

出现这个问题的核心原因是<pre>标签默认会保留内部所有空白字符，你为了保持HTML代码层级缩进，给<code>内部代码添加的前置缩进都会被原样渲染，最终展示的时候就会出现左侧多余空白。

方案1：JS自动移除公共缩进（最通用，无侵入） #

这是目前工业界最常用的处理方案，完全不需要修改你的HTML书写习惯，页面加载后自动处理所有代码块的多余缩进：
给页面加入以下JS代码即可：

document.querySelectorAll('pre code').forEach(codeBlock => {
  const lines = codeBlock.innerHTML.split('\n');
  // 移除首尾空行
  while (lines.length && lines[0].trim() === '') lines.shift();
  while (lines.length && lines.at(-1).trim() === '') lines.pop();
  if (!lines.length) return;
  // 计算所有非空行的最小公共缩进长度
  const minIndent = Math.min(
    ...lines.filter(line => line.trim())
      .map(line => line.match(/^\s*/)[0].length)
  );
  // 移除每一行的公共缩进
  codeBlock.innerHTML = lines.map(line => line.slice(minIndent)).join('\n');
});

如果你用Prism.js、Highlight.js等主流代码高亮库，它们本身已经内置了该功能，只需要开启对应配置即可，无需自行编写代码。

方案2：CSS固定偏移（适合固定缩进场景） #

如果你的所有代码块在HTML书写时的额外缩进长度是固定的，可以直接用CSS做偏移处理，不需要引入JS：
给你的<code>标签添加对应样式即可，比如你额外加了4个Tab（按1Tab=4空格计算共16个空格）的缩进：

pre code.language-html {
  display: block;
  margin-left: -16ch; /* ch单位对应单个数字/空格的宽度，按你的实际缩进值调整即可 */
}

方案3：模板引擎预处理（适合静态站点/服务端渲染场景） #

如果你用EJS、Nunjucks、Handlebars等模板引擎渲染页面，可以直接引入dedent类的工具函数，在渲染阶段就把代码内容的多余公共缩进移除，不会增加前端运行负担。

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