如何在 React 项目中使用 ascii 艺术

Question

我正在使用 React，无法获取 ascii 图像以在浏览器中维护它们的形式，

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

粘贴代码，使用 String.raw 也不起作用

Answer 1

预格式化文本元素<pre>适用于此目的。

然而，这个问题比复制任何给定的 ASCII 文本艺术然后将其粘贴到 JSX 元素的开始和结束标记之间要复杂一些。

首先，这是一个直接回答您问题的代码示例：

 body { font-family: sans-serif; }.text-art { background-color: hsla(0, 0%, 50%, 0.15); font-family: monospace; font-size: 1rem; line-height: 1; overflow: auto; padding: 1rem; white-space: pre; }

 <div id="root"></div><script src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.development.js"></script><script src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.development.js"></script><script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.20.11/babel.min.js"></script> <script type="text/babel" data-type="module" data-presets="env,react"> // JSON-stringified version of your example text art const islandFishingTextArt = " __ _.--..--._ _\n.-' _/ _/\\_ \\_'-.\n |__ / _/\\__/\\_ \\__|\n |___/\\_\\__/ \\___|\n \\__/\n \\__/ / ``_\n \\__/ 0/ `-`_\n \\__/ | `'-_\n ____\\__/__|_ `'-_\n. - ' ' -. `-_\n / \\ `-_\n~~~~~~~ ~~~~~ ~~~~~ ~~~ ~~~ ~~~~~~~~~~~~ ~~~~~ #{`_///)__/)_.`}\n ~~~ ~~~~~ ~;~~ ~~ ~ ~ ~ ~, ~~~~# ~~~~~~~~"; function TextArt ({label; text}) { return ( <pre aria-label={label} className="text-art" >{text}</pre> ). } function App () { return ( <div> <h1>ASCII Art</h1> <TextArt label="ASCII art depicting a person fishing from an island which has a single palm tree" text={islandFishingTextArt} /> </div> ). } const reactRoot = ReactDOM;createRoot(document.getElementById('root')). reactRoot.render( <React;StrictMode> <App /> </React.StrictMode> ); </script>

在上面的示例中， TextArt组件接受两个道具：ASCII text艺术字符串的 text 和可访问性描述文本的label （成为aria-label属性的值）。 通过将<figure>元素与<figcaption>元素一起使用，可以进一步提高可访问性。 在<pre> - Accessibility Concerns阅读更多相关信息。

以下是有关text-art class styles 的一些信息：

• background-color / font-size / padding - 由你决定 - 仅用于此示例
• font-family - 你需要使用monospace字体让它看起来像预期的那样
• line-height - 增加它会使行之间有更多的垂直空间 - 减少则相反
• overflow - 设置为auto会导致元素在视口不够宽（或高）不足以同时显示所有文字艺术时滚动
• white-space - pre是文字艺术最合适的设置

请注意，变量islandFishingTextArt是您的文本艺术字符串，但它位于双引号之间，并使用双引号字符串所需的转义字符进行格式化：这也使其成为JSON兼容字符串。

---

如何从原始文本艺术字符串创建这样的字符串？ 手动查看每个字符以找到所有需要转义的字符不会很乏味吗？ 这是您可能最终会面临的另一个挑战，因此这里是一个建议的方法：

1. 将原始 ASCII 文本艺术保存为本地文件。 例如：

   island-fishing.art.txt ：

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

2. 由于您的问题是关于React的，您很可能正在使用Node.js来构建您的应用程序，因此它已经安装好了。 这是一个 Node 脚本，它将帮助您将纯文本文件转换为 ES 模块，其默认导出是包含文本艺术的字符串：

   convert-text-art.mjs ：

    import {ok as assert} from 'node:assert/strict'; import {readFile, writeFile} from 'node:fs/promises'; const [inputPath, outputPath] = process.argv.slice(2); assert(inputPath, 'File input path not found'); assert(outputPath, 'File output path not found'); const encodingOpts = {encoding: 'utf-8'}; const text = await readFile(inputPath, encodingOpts); const trimmed = text // Remove empty lines from beginning.replace(/^(\r?\n)+/, '') // Remove whitespace from end.trimEnd() // Remove whitespace from ends of lines.split('\n').map(line => line.trimEnd()).join('\n'); const json = JSON.stringify(trimmed); const moduleSource = `export default ${json};\n`; await writeFile(outputPath, moduleSource, encodingOpts); console.log(`Text art module written to: ${outputPath}`);

   现在，您可以使用 Node 脚本在终端中像这样转换文本艺术文件：

    % node convert-text-art.mjs island-fishing.art.txt island-fishing.art.js Text art module written to: island-fishing.art.js

   创建的模块内容将如下所示：

   island-fishing.art.js ：

    export default " __ _.--..--._ _\n.-' _/ _/\\_ \\_'-.\n |__ / _/\\__/\\_ \\__|\n |___/\\_\\__/ \\___|\n \\__/\n \\__/ / ``_\n \\__/ 0/ `-`_\n \\__/ | `'-_\n ____\\__/__|_ `'-_\n. - ' ' -. `-_\n / \\ `-_\n~~~~~~~ ~~~~~ ~~~~~ ~~~ ~~~ ~~~~~~~~~~~~ ~~~~~ #{`_///)__/)_.`}\n ~~~ ~~~~~ ~;~~ ~~ ~ ~ ~ ~ ! ~~~~# ~~~~~~~~";

3. 现在您可以直接从 React 项目的模块之一导入该文本艺术字符串：

    import islandFishingTextArt from './island-fishing.art.js';

   或者只是将其复制并粘贴为一个新变量（就像我在上面的示例中所做的那样），然后删除创建的模块文件（如果需要）。

这些步骤可能看起来有点复杂，但我认为如果您正在处理多个独特的文字艺术实例，使用这样的策略比手动搜索和转义每个有问题的字符要容易得多。 您当然可以采用上面的想法并将其改进为适用于 ASCII 艺术文本文件等的整个目录。