md-to-htmllisted
Install: claude install-skill open-ace/open-ace
# Markdown 转 HTML Skill
此 skill 用于将 Markdown 文档转换为带有专业样式的 HTML 格式，并在浏览器中打开查看。
## 使用场景
- 需要将项目文档以更美观的方式展示
- 需要生成可分享的 HTML 格式文档
- 需要参考现有 HTML 模板格式转换文档
## 工作流程
### 1. 确认源文件和目标文件
- **源文件**: 用户指定的 Markdown 文件路径
- **目标文件**: 默认为源文件同名但扩展名为 `.html`，或用户指定路径
- **参考模板**: 可选，用于参考样式的现有 HTML 文件
### 2. 读取参考模板（如有）
如果用户指定了参考模板，读取该模板提取：
- CSS 样式（`<style>` 标签内容）
- 页面结构布局
- 颜色变量和主题配置
### 3. 转换 Markdown 为 HTML
将 Markdown 内容转换为 HTML，包括：
| Markdown 元素 | HTML 转换 |
|--------------|----------|
| 标题 `#` | `<h1>` - `<h6>` |
| 粗体 `**text**` | `<strong>text</strong>` |
| 斜体 `*text*` | `<em>text</em>` |
| 代码 `` `code` `` | `<code>code</code>` |
| 代码块 ` ``` ` | `<pre><code>...</code></pre>` |
| 引用 `>` | `<blockquote>...</blockquote>` |
| 列表 `-` / `1.` | `<ul>` / `<ol>` |
| 表格 | `<table>` |
| 链接 `[text](url)` | `<a href="url">text</a>` |
| 分隔线 `---` | `<hr>` |
### 4. 应用默认样式
如果没有参考模板，使用以下默认样式：
```css
:root {
--primary-color: #667eea;
--secondary-color: #764ba2;
--bg-color: #f8f9fa;
--card-bg: #ffffff;
--text-color: #333;
--text-muted: #6c757d;
--border-color: #dee2e6;
--code-bg: #f4f4f4;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.8;
color: var(--text-color);
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
min-height: 100vh;
margin: 0;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: var(--card-