如何在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组件接受两个道具:text用于ASCII文本艺术字符串，label用于可访问性描述文本(成为aria-label属性的值)。通过使用<figure>元素和<figcaption>元素，可以进一步提高可访问性。在<pre>-可访问性关注中了解更多信息。

以下是text-art类样式的一些信息:

• 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模块，其默认导出是包含文本art的字符串:

   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艺术文本文件的整个目录中，等等。