如何在React项目中使用ASCII艺术并维持其显示格式

核心原因 #

JSX编译时会自动压缩连续空白字符（空格、换行），同时ASCII里的反斜杠、单引号等特殊字符可能被意外转义，导致<pre>标签无法正确保留图像的原始格式。

解决方案 #

1. 模板字符串+强制保留格式样式 #

将ASCII图像放在模板字符串中，同时给<pre>显式设置white-space: pre样式，强制浏览器保留所有空白字符。

修改后代码示例：

<Grid container id="terminal_banner">
  <Grid item xs={10}>
    <pre style={{ whiteSpace: 'pre' }}>
      {`
        __ _.--..--._ _
     .-' _/   _/\\_   \\'-.
    |__ /   _/\\__/\\_   \\__|
       |___/\\_\\__/  \\___|
              \\__/
              \\__/       / \`\`_
               \\__/    0/      \`-_
                \\__/   |            \`'-_                                            
             ____\\__/__|_               \`'-_
       . - '             ' -.               \`-_    
      /                      \\                 \`-_     
~~~~~~~  ~~~~~ ~~~~~  ~~~ ~~~  ~~~~~~~~~~~~  ~~~~~ #{`_///)__/)_.`}
  ~~~   ~~~~~   ~!~~   ~~ ~  ~ ~ ~  ! ~~~~# ~~~~~~~~
      `}
    </pre>
  </Grid>
</Grid>

2. 处理特殊字符转义 #

ASCII中的反斜杠（\）需要转义为\\，避免被JSX误解析。如果使用单引号包裹内容，单引号也要转义，用反引号包裹模板字符串可以避免这类冲突。

3. 分离ASCII内容避免JSX缩进干扰 #

把ASCII图像单独提取成变量，避免JSX的缩进影响图像格式：

const asciiBanner = `
        __ _.--..--._ _
     .-' _/   _/\\_   \\'-.
    |__ /   _/\\__/\\_   \\__|
       |___/\\_\\__/  \\___|
              \\__/
              \\__/       / \`\`_
               \\__/    0/      \`-_
                \\__/   |            \`'-_                                            
             ____\\__/__|_               \`'-_
       . - '             ' -.               \`-_    
      /                      \\                 \`-_     
~~~~~~~  ~~~~~ ~~~~~  ~~~ ~~~  ~~~~~~~~~~~~  ~~~~~ #{`_///)__/)_.`}
  ~~~   ~~~~~   ~!~~   ~~ ~  ~ ~ ~  ! ~~~~# ~~~~~~~~
`;

// 组件内使用
<Grid container id="terminal_banner">
  <Grid item xs={10}>
    <pre style={{ whiteSpace: 'pre' }}>{asciiBanner}</pre>
  </Grid>
</Grid>

验证要点 #

• 确认<pre>的white-space样式为pre或pre-wrap（需要自动换行时用后者），避免样式继承覆盖默认行为。
• 检查ASCII中的特殊字符是否全部正确转义，防止JSX编译时修改内容。

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