React项目中如何在UI界面美化展示Shell脚本？

针对你在React项目中美化Shell脚本展示、处理长下拉选项文本的需求，这里提供几个实用方案：

方案1：使用React代码高亮库（推荐） #

用react-syntax-highlighter这类专门的React组件，既能实现Shell语法高亮，又能轻松处理文本溢出、换行等布局问题，新手也容易上手。

1. 安装依赖：

npm install react-syntax-highlighter

2. 修改你的MainPage.js代码：

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { useState } from 'react';

const Script = (option1, option2) => {
  return `#!/bin/bash

###Dropdown1
echo ${option1}

###Dropdown2
echo ${option2}
`;
};

function MainPage() {
  // 假设option1和option2是从下拉菜单获取的状态值
  const [option1, setOption1] = useState("默认选项1");
  const [option2, setOption2] = useState("这是一个非常非常长的下拉选项文本，用来测试长内容展示");

  return (
    <div className="left">
      <SyntaxHighlighter
        language="bash"
        style={tomorrow}
        customStyle={{
          maxHeight: '400px',
          overflowX: 'auto',
          whiteSpace: 'pre-wrap', // 长文本自动换行
          padding: '1rem',
          borderRadius: '8px'
        }}
      >
        {Script(option1, option2)}
      </SyntaxHighlighter>
    </div>
  );
}

这个组件会自动给Shell代码添加语法高亮，whiteSpace: 'pre-wrap'让长文本自动换行，overflowX: 'auto'在内容超宽时显示横向滚动条，同时通过customStyle可以自定义容器样式，让展示更美观。

方案2：自定义CSS优化原生<pre>标签 #

如果不想引入额外依赖，可以直接给<pre>标签加自定义样式，同时区分脚本里的注释和代码部分：

1. 在你的CSS文件中添加样式：

.shell-script-container {
  background-color: #f5f5f5;
  padding: 1rem;
  border-radius: 8px;
  max-height: 400px;
  overflow-y: auto;
}

.shell-script-pre {
  white-space: pre-wrap; /* 长文本换行 */
  word-wrap: break-word;
  margin: 0;
}

.shell-comment {
  color: #6a9955; /* 给###开头的注释设置绿色，模拟Shell注释高亮 */
  font-weight: 500;
}

2. 修改React组件代码，把脚本里的注释部分单独处理：

import { useState } from 'react';

const Script = (option1, option2) => {
  // 拆分脚本内容，把注释和代码分开
  return (
    <>
      <span className="shell-comment">#!/bin/bash</span>
      <br /><br />
      <span className="shell-comment">###Dropdown1</span>
      <br />
      echo {option1}
      <br /><br />
      <span className="shell-comment">###Dropdown2</span>
      <br />
      echo {option2}
    </>
  );
};

function MainPage() {
  const [option1, setOption1] = useState("默认选项1");
  const [option2, setOption2] = useState("这是一个非常非常长的下拉选项文本，用来测试长内容展示");

  return (
    <div className="left shell-script-container">
      <pre className="shell-script-pre">
        {Script(option1, option2)}
      </pre>
    </div>
  );
}

这种方式通过拆分内容给注释加样式，同时用CSS控制容器的滚动和换行，让长选项文本不会打乱界面布局。

方案3：长选项文本截断+Tooltip提示 #

如果希望长选项不换行，同时又能让用户看到完整内容，可以用截断+Tooltip的方式：

1. 安装react-tooltip：

npm install react-tooltip

2. 修改代码：

import { useState } from 'react';
import { Tooltip } from 'react-tooltip';

// 工具函数：截断长文本
const truncateText = (text, maxLength = 20) => {
  if (text.length <= maxLength) return text;
  return `${text.slice(0, maxLength)}...`;
};

const Script = (option1, option2) => {
  return `#!/bin/bash

###Dropdown1
echo <span data-tooltip-id="option1-tooltip">${truncateText(option1)}</span>

###Dropdown2
echo <span data-tooltip-id="option2-tooltip">${truncateText(option2)}</span>
`;
};

function MainPage() {
  const [option1, setOption1] = useState("默认选项1");
  const [option2, setOption2] = useState("这是一个非常非常长的下拉选项文本，用来测试长内容展示");

  return (
    <div className="left">
      <pre 
        style={{
          background: '#f5f5f5',
          padding: '1rem',
          borderRadius: '8px',
          whiteSpace: 'pre' // 保持原格式不换行
        }}
        dangerouslySetInnerHTML={{ __html: Script(option1, option2) }}
      />
      <Tooltip id="option1-tooltip" content={option1} />
      <Tooltip id="option2-tooltip" content={option2} />
    </div>
  );
}

这里用truncateText截断长文本，通过dangerouslySetInnerHTML渲染带Tooltip的内容，用户鼠标hover截断的文本时就能看到完整的选项内容，既保持了脚本的整洁布局，又不影响信息完整性。

内容的提问来源于stack exchange，提问作者vvv-1234