📝 Markdown预览工具

在线Markdown预览工具，实时查看Markdown渲染效果。支持常见Markdown语法，所有处理均在浏览器端完成。

功能特点

• ✅ 实时预览 - 输入即预览，所见即所得
• ✅ 语法高亮 - 代码块语法高亮显示
• ✅ 暗色主题 - 保护眼睛的暗色预览
• ✅ 隐私安全 - 所有处理在浏览器本地完成

使用方法

1. 在左侧文本框输入Markdown
2. 右侧实时显示渲染效果
3. 支持复制HTML代码

示例

1
2
3
4
5
6
7
8
9

# 标题
## 子标题
- 列表项1
- 列表项2

**加粗文本** 和 *斜体文本*

```javascript
console.log('Hello World');

## 在线预览

<div id="markdown-preview">
  <div class="editor">
    <textarea id="md-input" placeholder="在此输入Markdown..."></textarea>
  </div>
  <div class="preview">
    <div id="md-output"></div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<style>
#markdown-preview { display: flex; gap: 20px; }
#markdown-preview .editor, #markdown-preview .preview {
  flex: 1;
  min-height: 400px;
}
#markdown-preview textarea {
  width: 100%;
  height: 400px;
  padding: 10px;
  font-family: 'Courier New', monospace;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
}
#markdown-preview .preview {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px;
  background: #1e1e1e;
  color: #d4d4d4;
  overflow-y: auto;
}
#markdown-preview h1 { color: #569cd6; }
#markdown-preview h2 { color: #4ec9b0; }
#markdown-preview code { background: #2d2d2d; padding: 2px 5px; border-radius: 3px; }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const mdInput = document.getElementById('md-input');
  const mdOutput = document.getElementById('md-output');

  const defaultMd = `# Markdown 预览示例

## 标题层级

### 三级标题
#### 四级标题
##### 五级标题

## 基本语法

**加粗文本** 和 *斜体文本*

> 这是引用文本

- 列表项1
- 列表项2
- 列表项3

## 代码块

\`\`\`javascript
function hello() {
  console.log('Hello World');
}
\`\`\`

## 表格

| 列1 | 列2 | 列3 |
|-----|-----|-----|
| A   | B   | C   |
| 1   | 2   | 3   |

## 链接和图片

[百度](https://www.baidu.com)

![图片](https://via.placeholder.com/300x150)

## 分割线

---
`;

  mdInput.value = defaultMd;

  function renderMarkdown() {
    mdOutput.innerHTML = marked.parse(mdInput.value);
  }

  mdInput.addEventListener('input', renderMarkdown);
  renderMarkdown();
});
</script>