如何在HTML中美化ASCII格式的吉他谱？

核心思路：保留<pre>容器，用CSS实现弦背景与圆形音符 #

直接删除<pre>会丢失ASCII谱依赖的等宽字体、空格/换行排版规则，这是你格式混乱的根本原因。正确的做法是保留<pre>，在此基础上用CSS美化：

步骤1：修改导出的HTML结构 #

保留原始<pre>，手动将每个音符数字包裹在<span class="note">中（等学JS后可自动批量替换），示例结构：

<pre class="guitar-tab">
E|-----------------|
B|-----------------|
G|-----------------|
D|-------<span class="note">3</span>---------|
A|-----<span class="note">3</span>---<span class="note">3</span>-------|
E|-<span class="note">0</span>-<span class="note">3</span>-------<span class="note">3</span>-<span class="note">0</span>---|
</pre>

步骤2：CSS样式实现美化 #

/* 谱面容器基础样式：保留排版规则 */
.guitar-tab {
  font-family: 'Courier New', monospace; /* 必须用等宽字体保证对齐 */
  font-size: 18px;
  line-height: 2.8; /* 调整行高控制弦之间的间距 */
  white-space: pre; /* 强制保留空格和换行 */
  padding: 20px;
  background-color: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 8px;
  width: fit-content;
  margin: 20px auto;
  /* 用线性渐变绘制6条吉他弦 */
  background-image: 
    linear-gradient(#222 1px, transparent 1px),
    linear-gradient(#222 1px, transparent 1px),
    linear-gradient(#222 1px, transparent 1px),
    linear-gradient(#222 1px, transparent 1px),
    linear-gradient(#222 1px, transparent 1px),
    linear-gradient(#222 1px, transparent 1px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* 定位每条弦到对应谱行的位置 */
  background-position: 
    0 calc(1em + 10px),
    0 calc(3.8em + 10px),
    0 calc(6.6em + 10px),
    0 calc(9.4em + 10px),
    0 calc(12.2em + 10px),
    0 calc(15em + 10px);
}

/* 音符样式：彩色圆形 */
.guitar-tab .note {
  display: inline-block;
  background-color: #4ecdc4; /* 自定义音符颜色 */
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  font-weight: bold;
  margin: 0 -4px; /* 抵消span的默认间距，避免破坏原有对齐 */
  position: relative;
  top: -2px; /* 微调垂直位置，让数字居中在弦上 */
}

关键细节说明 #

• 必须保留<pre>的white-space: pre和等宽字体，这是ASCII谱对齐的核心。
• 用线性渐变画弦替代背景图，无需额外图片文件，调整background-position可适配不同行高。
• .note的margin: 0 -4px是为了避免span元素增加额外间距，保证谱面原有对齐规则不被破坏。

自定义优化方向 #

• 修改line-height和background-position的值，调整弦之间的间距。
• 替换background-color（音符）和渐变颜色（弦），匹配你的网站风格。
• 调整font-size和.note的宽高，适配不同屏幕尺寸。

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