如何在 textarea 中显示 Markdown 格式的代码字符串

在 textarea 中显示 Markdown 格式的文本需要借助 JavaScript 库，如 Showdown.js 等。以下是一个简单的实现：

引入 Showdown.js 库：

<script src='https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js'></script>

创建一个 textarea 元素：

<textarea id='markdown-textarea'></textarea>

将代码字符串转换为 Markdown 格式：

const converter = new showdown.Converter();
const markdownText = converter.makeHtml(codeString);

将转换后的 Markdown 格式的文本显示在 textarea 中：

document.getElementById('markdown-textarea').innerHTML = markdownText;

完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'>
  <title>Markdown 示例</title>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js'></script>
</head>
<body>
  <textarea id='markdown-textarea'></textarea>

  <script>
    const codeString = '```javascript
console.log('Hello world!');
```';
    const converter = new showdown.Converter();
    const markdownText = converter.makeHtml(codeString);

    document.getElementById('markdown-textarea').innerHTML = markdownText;
  </script>
</body>
</html>

以上代码会将代码字符串 console.log('Hello world!'); 转换为以下 Markdown 格式的文本：

<pre><code class='language-javascript'>console.log('Hello world!');</code></pre>