🚀 快速安装

复制以下命令并运行，立即安装此 Skill：

npx @anthropic-ai/skills install github/awesome-copilot/markdown-to-html

💡 提示：需要 Node.js 和 NPM

Markdown 到 HTML 转换

使用 marked.js 库将 Markdown 文档转换为 HTML 或编写数据转换脚本的专家技能；在这种情况下，脚本类似于 markedJS/marked 代码库。对于自定义脚本，知识不限于 marked.js，还利用类似 pandoc 和 gomarkdown/markdown 的工具进行数据转换；以及 jekyll/jekyll 和 gohugoio/hugo 的模板系统。

转换脚本或工具应能处理单个文件、批量转换和高级配置。

何时使用此技能

用户要求“将 markdown 转换为 html”或“转换 md 文件”
用户希望将“渲染 markdown”作为 HTML 输出
用户需要从 .md 文件生成 HTML 文档
用户正在从 Markdown 内容构建静态站点
用户正在构建将 markdown 转换为 html 的模板系统
用户正在为现有的模板系统开发工具、小部件或自定义模板
用户想要预览渲染为 HTML 的 Markdown

将 Markdown 转换为 HTML

基本转换要点

更多信息请参见 basic-markdown-to-html.md

    ```markdown
    # 一级标题
    ## 二级标题

    一个带有[链接](https://example.com)的句子，以及一个 HTML 片段如 `<p>段落标签</p>`。

    - `ul` 列表项 1
    - `ul` 列表项 2

    1. `ol` 列表项 1
    2. `ol` 列表项 2

    | 表格项 | 描述 |
    | One | One 是数字 `1` 的拼写。 |
    | Two | Two 是数字 `2` 的拼写。 |

    ```js
    var one = 1;
    var two = 2;

    function simpleMath(x, y) {
     return x + y;
    }
    console.log(simpleMath(one, two));
    ```
    ```

    ```html
    <h1>一级标题</h1>
    <h2>二级标题</h2>

    <p>一个带有<a href="https://example.com">链接</a>的句子，以及一个 HTML 片段如 <code>&lt;p&gt;段落标签&lt;/p&gt;</code>。</p>

    <ul>
     <li>`ul` 列表项 1</li>
     <li>`ul` 列表项 2</li>
    </ul>

    <ol>
     <li>`ol` 列表项 1</li>
     <li>`ol` 列表项 2</li>
    </ol>

    <table>
     <thead>
      <tr>
       <th>表格项</th>
       <th>描述</th>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>One</td>
       <td>One 是数字 `1` 的拼写。</td>
      </tr>
      <tr>
       <td>Two</td>
       <td>Two 是数字 `2` 的拼写。</td>
      </tr>
     </tbody>
    </table>

    <pre>
     <code>var one = 1;
     var two = 2;

     function simpleMath(x, y) {
      return x + y;
     }
     console.log(simpleMath(one, two));</code>
    </pre>
    ```

代码块转换

更多信息请参见 code-blocks-to-html.md


    ```markdown
    你的代码在这里
    ```

    ```html
    <pre><code class="language-md">
    你的代码在这里
    </code></pre>
    ```

    ```js
    console.log("Hello world");
    ```

    ```html
    <pre><code class="language-js">
    console.log("Hello world");
    </code></pre>
    ```

    ```markdown
      ```

      ```
      可见的反引号
      ```

      ```
    ```

    ```html
      <pre><code>
      ```

      可见的反引号

      ```
      </code></pre>
    ```

折叠区域转换

更多信息请参见 collapsed-sections-to-html.md

    ```markdown
    <details>
    <summary>更多信息</summary>

    ### 内部标题

    - 列表
    - **格式化**
    - 代码块

        ```js
        console.log("Hello");
        ```

    </details>
    ```

    ```html
    <details>
    <summary>更多信息</summary>

    <h3>内部标题</h3>

    <ul>
     <li>列表</li>
     <li><strong>格式化</strong></li>
     <li>代码块</li>
    </ul>

    <pre>
     <code class="language-js">console.log("Hello");</code>
    </pre>

    </details>
    ```

数学表达式转换

更多信息请参见 writing-mathematical-expressions-to-html.md

    ```markdown
    这个句子使用 `$` 分隔符来内联显示数学公式：$\sqrt{3x-1}+(1+x)^2$
    ```

    ```html
    <p>这个句子使用 <code>$</code> 分隔符来内联显示数学公式：
     <math-renderer><math xmlns="http://www.w3.org/1998/Math/MathML">
      <msqrt><mn>3</mn><mi>x</mi><mo>−</mo><mn>1</mn></msqrt>
      <mo>+</mo><mo>(</mo><mn>1</mn><mo>+</mo><mi>x</mi>
      <msup><mo>)</mo><mn>2</mn></msup>
     </math>
    </math-renderer>
    </p>
    ```

    ```markdown
    **柯西-施瓦茨不等式**\
    $$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
    ```

    ```html
    <p><strong>柯西-施瓦茨不等式</strong><br>
     <math-renderer>
      <math xmlns="http://www.w3.org/1998/Math/MathML">
       <msup>
        <mrow><mo>(</mo>
         <munderover><mo data-mjx-texclass="OP">∑</mo>
          <mrow><mi>k</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi>
         </munderover>
         <msub><mi>a</mi><mi>k</mi></msub>
         <msub><mi>b</mi><mi>k</mi></msub>
         <mo>)</mo>
        </mrow>
        <mn>2</mn>
       </msup>
       <mo>≤</mo>
       <mrow><mo>(</mo>
        <munderover><mo>∑</mo>
         <mrow><mi>k</mi><mo>=</mo><mn>1</mn></mrow>
         <mi>n</mi>
        </munderover>
        <msubsup><mi>a</mi><mi>k</mi><mn>2</mn></msubsup>
        <mo>)</mo>
       </mrow>
       <mrow><mo>(</mo>
         <munderover><mo>∑</mo>
          <mrow><mi>k</mi><mo>=</mo><mn>1</mn></mrow>
          <mi>n</mi>
         </munderover>
         <msubsup><mi>b</mi><mi>k</mi><mn>2</mn></msubsup>
         <mo>)</mo>
       </mrow>
      </math>
     </math-renderer></p>
    ```

表格转换

更多信息请参见 tables-to-html.md

    ```markdown
    | 第一列  | 第二列 |
    | ------------- | ------------- |
    | 内容单元格  | 内容单元格  |
    | 内容单元格  | 内容单元格  |
    ```

    ```html
    <table>
     <thead><tr><th>第一列</th><th>第二列</th></tr></thead>
     <tbody>
      <tr><td>内容单元格</td><td>内容单元格</td></tr>
      <tr><td>内容单元格</td><td>内容单元格</td></tr>
     </tbody>
    </table>
    ```

    ```markdown
    | 左对齐 | 居中对齐 | 右对齐 |
    | :---         |     :---:      |          ---: |
    | git status   | git status     | git status    |
    | git diff     | git diff       | git diff      |
    ```

    ```html
    <table>
      <thead>
       <tr>
        <th align="left">左对齐</th>
        <th align="center">居中对齐</th>
        <th align="right">右对齐</th>
       </tr>
      </thead>
      <tbody>
       <tr>
        <td align="left">git status</td>
        <td align="center">git status</td>
        <td align="right">git status</td>
       </tr>
       <tr>
        <td align="left">git diff</td>
        <td align="center">git diff</td>
        <td align="right">git diff</td>
       </tr>
      </tbody>
    </table>
    ```

使用 `markedJS/marked`

先决条件

已安装 Node.js（用于 CLI 或以编程方式使用）
全局安装 marked 以用于 CLI：npm install -g marked
或在本地安装：npm install marked

快速转换方法

请参见 marked.md 中的快速转换方法

分步工作流程

请参见 marked.md 中的分步工作流程

CLI 配置

使用配置文件

创建 ~/.marked.json 以持久化选项：

{
  "gfm": true,
  "breaks": true
}

或使用自定义配置：

marked -i input.md -o output.html -c config.json

CLI 选项参考

选项	描述
`-i, --input <file>`	输入 Markdown 文件
`-o, --output <file>`	输出 HTML 文件
`-s, --string <string>`	解析字符串而不是文件
`-c, --config <file>`	使用自定义配置文件
`--gfm`	启用 GitHub 风格的 Markdown
`--breaks`	将换行符转换为 `<br>`
`--help`	显示所有选项

安全警告

⚠️ Marked 不会对输出的 HTML 进行清理。 对于不受信任的输入，请使用清理器：

import { marked } from 'marked';
import DOMPurify from 'dompurify';

const unsafeHtml = marked.parse(untrustedMarkdown);
const safeHtml = DOMPurify.sanitize(unsafeHtml);

推荐使用的清理器：

支持的 Markdown 风味

风味	支持程度
原始 Markdown	100%
CommonMark 0.31	98%
GitHub 风格 Markdown	97%

故障排除

问题	解决方案
文件开头的特殊字符	去除零宽字符：`content.replace(/^[\u200B\u200C\u200D\uFEFF]/,"")`
代码块未高亮	添加语法高亮器，如 highlight.js
表格未渲染	确保设置了 `gfm: true` 选项
换行被忽略	在选项中设置 `breaks: true`
XSS 漏洞担忧	使用 DOMPurify 清理输出

使用 `pandoc`

先决条件

已安装 Pandoc（从 https://pandoc.org/installing.html 下载）
对于 PDF 输出：LaTeX 安装（macOS 上的 MacTeX，Windows 上的 MiKTeX，Linux 上的 texlive）
终端/命令提示符访问权限

快速转换方法

方法 1：CLI 基本转换

# 将 markdown 转换为 HTML
pandoc input.md -o output.html

# 转换为独立文档（包含页眉/页脚）
pandoc input.md -s -o output.html

# 显式指定格式
pandoc input.md -f markdown -t html -s -o output.html

方法 2：过滤器模式（交互式）

# 将 pandoc 作为过滤器启动
pandoc

# 输入 markdown，然后按 Ctrl-D（Linux/macOS）或 Ctrl-Z+Enter（Windows）
Hello *pandoc*!
# 输出：<p>Hello <em>pandoc</em>!</p>

方法 3：格式转换

# HTML 转 Markdown
pandoc -f html -t markdown input.html -o output.md

# Markdown 转 LaTeX
pandoc input.md -s -o output.tex

# Markdown 转 PDF（需要 LaTeX）
pandoc input.md -s -o output.pdf

# Markdown 转 Word
pandoc input.md -s -o output.docx

CLI 配置

选项	描述
`-f, --from <format>`	输入格式（markdown、html、latex 等）
`-t, --to <format>`	输出格式（html、latex、pdf、docx 等）
`-s, --standalone`	生成带有页眉/页脚的独立文档
`-o, --output <file>`	输出文件（从扩展名推断）
`--mathml`	将 TeX 数学公式转换为 MathML
`--metadata title="Title"`	设置文档元数据
`--toc`	包含目录
`--template <file>`	使用自定义模板
`--help`	显示所有选项

安全警告

⚠️ Pandoc 忠实地处理输入。 当转换不受信任的 markdown 时：

使用 --sandbox 模式以禁用外部文件访问
在处理前验证输入
如果在浏览器中显示，请清理 HTML 输出

# 对不受信任的输入使用沙箱模式
pandoc --sandbox input.md -o output.html

支持的 Markdown 风味

风味	支持程度
Pandoc Markdown	100%（原生）
CommonMark	完整（使用 `-f commonmark`）
GitHub 风格 Markdown	完整（使用 `-f gfm`）
MultiMarkdown	部分支持

故障排除

问题	解决方案
PDF 生成失败	安装 LaTeX（MacTeX、MiKTeX 或 texlive）
Windows 上的编码问题	使用 pandoc 前运行 `chcp 65001`
缺少独立文档的页眉	为完整文档添加 `-s` 标志
数学公式未渲染	使用 `--mathml` 或 `--mathjax` 选项
表格未渲染	确保使用管道符和破折号的正确表格语法

使用 `gomarkdown/markdown`

先决条件

已安装 Go 1.18 或更高版本
安装库：go get github.com/gomarkdown/markdown
对于 CLI 工具：go install github.com/gomarkdown/mdtohtml@latest

快速转换方法

方法 1：简单转换（Go）

package main

import (
    "fmt"
    "github.com/gomarkdown/markdown"
)

func main() {
    md := []byte("# Hello World\n\nThis is **bold** text.")
    html := markdown.ToHTML(md, nil, nil)
    fmt.Println(string(html))
}

方法 2：CLI 工具

# 安装 mdtohtml
go install github.com/gomarkdown/mdtohtml@latest

# 转换文件
mdtohtml input.md output.html

# 转换文件（输出到标准输出）
mdtohtml input.md

方法 3：自定义解析器和渲染器

package main

import (
    "github.com/gomarkdown/markdown"
    "github.com/gomarkdown/markdown/html"
    "github.com/gomarkdown/markdown/parser"
)

func mdToHTML(md []byte) []byte {
    // 创建带扩展的解析器
    extensions := parser.CommonExtensions | parser.AutoHeadingIDs | parser.NoEmptyLineBeforeBlock
    p := parser.NewWithExtensions(extensions)
    doc := p.Parse(md)

    // 创建带扩展的 HTML 渲染器
    htmlFlags := html.CommonFlags | html.HrefTargetBlank
    opts := html.RendererOptions{Flags: htmlFlags}
    renderer := html.NewRenderer(opts)

    return markdown.Render(doc, renderer)
}

CLI 配置

mdtohtml CLI 工具有极简选项：

mdtohtml input-file [output-file]

对于高级配置，请以编程方式使用 Go 库，并配合解析器和渲染器选项：

解析器扩展	描述
`parser.CommonExtensions`	表格、围栏代码、自动链接、删除线等
`parser.AutoHeadingIDs`	为标题生成 ID
`parser.NoEmptyLineBeforeBlock`	块前无需空行
`parser.MathJax`	对 LaTeX 数学公式的 MathJax 支持

HTML 标志	描述
`html.CommonFlags`	常见 HTML 输出标志
`html.HrefTargetBlank`	为链接添加 `target="_blank"`
`html.CompletePage`	生成完整的 HTML 页面
`html.UseXHTML`	生成 XHTML 输出

安全警告

⚠️ gomarkdown 不会对输出的 HTML 进行清理。 对于不受信任的输入，请使用 Bluemonday：

import (
    "github.com/microcosm-cc/bluemonday"
    "github.com/gomarkdown/markdown"
)

maybeUnsafeHTML := markdown.ToHTML(md, nil, nil)
html := bluemonday.UGCPolicy().SanitizeBytes(maybeUnsafeHTML)

推荐使用的清理器：Bluemonday

支持的 Markdown 风味

风味	支持程度
原始 Markdown	100%
CommonMark	高（带扩展）
GitHub 风格 Markdown	高（表格、围栏代码、删除线）
MathJax/LaTeX 数学公式	通过扩展支持
Mmark	支持

故障排除

问题	解决方案
Windows/Mac 换行符未解析	使用 `parser.NormalizeNewlines(input)`
表格未渲染	启用 `parser.Tables` 扩展
代码块无高亮	与语法高亮器（如 Chroma）集成
数学公式未渲染	启用 `parser.MathJax` 扩展
XSS 漏洞	使用 Bluemonday 清理输出

使用 `jekyll`

先决条件

Ruby 版本 2.7.0 或更高
RubyGems
GCC 和 Make（用于原生扩展）
安装 Jekyll 和 Bundler：gem install jekyll bundler

快速转换方法

方法 1：创建新站点

# 创建一个新的 Jekyll 站点
jekyll new myblog

# 进入站点目录
cd myblog

# 在本地构建并提供服务
bundle exec jekyll serve

# 访问 http://localhost:4000

方法 2：构建静态站点

# 构建站点到 _site 目录
bundle exec jekyll build

# 使用生产环境构建
JEKYLL_ENV=production bundle exec jekyll build

方法 3：实时重载开发

# 使用实时重载提供服务
bundle exec jekyll serve --livereload

# 包含草稿提供服务
bundle exec jekyll serve --drafts

CLI 配置

命令	描述
`jekyll new <path>`	创建新的 Jekyll 站点
`jekyll build`	构建站点到 `_site` 目录
`jekyll serve`	在本地构建并提供服务
`jekyll clean`	移除生成的文件
`jekyll doctor`	检查配置问题

服务选项	描述
`--livereload`	更改时重载浏览器
`--drafts`	包含草稿文章
`--port <port>`	设置服务器端口（默认：4000）
`--host <host>`	设置服务器主机（默认：localhost）
`--baseurl <url>`	设置基础 URL

安全警告

⚠️ Jekyll 安全考量：

避免在生产环境中使用 safe: false
在 _config.yml 中使用 exclude 防止敏感文件被发布
如果接受外部输入，请清理用户生成的内容
保持 Jekyll 和插件更新

# _config.yml 安全设置
exclude:
  - Gemfile
  - Gemfile.lock
  - node_modules
  - vendor

支持的 Markdown 风味

风味	支持程度
Kramdown（默认）	100%
CommonMark	通过插件（jekyll-commonmark）
GitHub 风格 Markdown	通过插件（jekyll-commonmark-ghpages）
RedCarpet	通过插件（已弃用）

在 _config.yml 中配置 markdown 处理器：

markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge

故障排除

问题	解决方案
Ruby 3.0+ 无法提供服务	运行 `bundle add webrick`
Gem 依赖错误	运行 `bundle install`
构建缓慢	使用 `--incremental` 标志
Liquid 语法错误	检查内容中未转义的 `{`
插件未加载	将其添加到 `_config.yml` 的插件列表

使用 `hugo`

先决条件

已安装 Hugo（从 https://gohugo.io/installation/ 下载）
Git（推荐用于主题和模块）
Go（可选，用于 Hugo 模块）

快速转换方法

方法 1：创建新站点

# 创建一个新的 Hugo 站点
hugo new site mysite

# 进入站点目录
cd mysite

# 添加一个主题
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke
echo "theme = 'ananke'" >> hugo.toml

# 创建内容
hugo new content posts/my-first-post.md

# 启动开发服务器
hugo server -D

方法 2：构建静态站点

# 构建站点到 public 目录
hugo

# 构建并压缩
hugo --minify

# 为特定环境构建
hugo --environment production

方法 3：开发服务器

# 启动服务器并包含草稿
hugo server -D

# 启动，带实时重载并绑定到所有接口
hugo server --bind 0.0.0.0 --baseURL http://localhost:1313/

# 使用特定端口启动
hugo server --port 8080

CLI 配置

命令	描述
`hugo new site <name>`	创建新的 Hugo 站点
`hugo new content <path>`	创建新的内容文件
`hugo`	构建站点到 `public` 目录
`hugo server`	启动开发服务器
`hugo mod init`	初始化 Hugo 模块

构建选项	描述
`-D, --buildDrafts`	包含草稿内容
`-E, --buildExpired`	包含已过期内容
`-F, --buildFuture`	包含未来日期内容
`--minify`	压缩输出
`--gc`	构建后运行垃圾回收
`-d, --destination <path>`	输出目录

服务器选项	描述
`--bind <ip>`	要绑定的接口
`-p, --port <port>`	端口号（默认：1313）
`--liveReloadPort <port>`	实时重载端口
`--disableLiveReload`	禁用实时重载
`--navigateToChanged`	导航到更改的内容

安全警告

⚠️ Hugo 安全考量：

在 hugo.toml 中为外部命令配置安全策略
在公共仓库中谨慎使用 --enableGitInfo
验证用户生成内容的短代码参数

# hugo.toml 安全设置
[security]
  enableInlineShortcodes = false
  [security.exec]
    allow = ['^go$', '^npx$', '^postcss$']
  [security.funcs]
    getenv = ['^HUGO_', '^CI$']
  [security.http]
    methods = ['(?i)GET|POST']
    urls = ['.*']

支持的 Markdown 风味

风味	支持程度
Goldmark（默认）	100%（符合 CommonMark）
GitHub 风格 Markdown	完整（表格、删除线、自动链接）
CommonMark	100%
Blackfriday（旧版）	已弃用，不推荐

在 hugo.toml 中配置 markdown：

[markup]
  [markup.goldmark]
    [markup.goldmark.extensions]
      definitionList = true
      footnote = true
      linkify = true
      strikethrough = true
      table = true
      taskList = true
    [markup.goldmark.renderer]
      unsafe = false  # 设置为 true 以允许原始 HTML

故障排除

问题	解决方案
路径上的“页面未找到”	检查配置中的 `baseURL`
主题未加载	验证主题是否在 `themes/` 或 Hugo 模块中
构建缓慢	使用 `--templateMetrics` 识别瓶颈
原始 HTML 未渲染	在 goldmark 配置中设置 `unsafe = true`
图像未加载	检查 `static/` 文件夹结构
模块错误	运行 `hugo mod tidy`

参考

📄 原始文档

完整文档（英文）：

https://skills.sh/github/awesome-copilot/markdown-to-html

💡 提示：点击上方链接查看 skills.sh 原始英文文档，方便对照翻译。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

Markdown to HTML Conversion

🚀 快速安装

Markdown 到 HTML 转换

何时使用此技能

将 Markdown 转换为 HTML

基本转换要点

代码块转换

折叠区域转换

数学表达式转换

表格转换

使用 markedJS/marked

先决条件

快速转换方法

分步工作流程

CLI 配置

使用配置文件

CLI 选项参考

安全警告

支持的 Markdown 风味

故障排除

使用 pandoc

先决条件

快速转换方法

方法 1：CLI 基本转换

方法 2：过滤器模式（交互式）

方法 3：格式转换

CLI 配置

安全警告

支持的 Markdown 风味

故障排除

使用 gomarkdown/markdown

先决条件

快速转换方法

方法 1：简单转换（Go）

方法 2：CLI 工具

方法 3：自定义解析器和渲染器

CLI 配置

安全警告

支持的 Markdown 风味

故障排除

使用 jekyll

先决条件

快速转换方法

方法 1：创建新站点

方法 2：构建静态站点

方法 3：实时重载开发

CLI 配置

安全警告

支持的 Markdown 风味

故障排除

使用 hugo

先决条件

快速转换方法

方法 1：创建新站点

方法 2：构建静态站点

方法 3：开发服务器

CLI 配置

安全警告

支持的 Markdown 风味

故障排除

参考

编写和样式化 Markdown

📄 原始文档

评论(0)

提示：请文明发言 取消回复

相关文章

近期文章

近期评论

使用 `markedJS/marked`

使用 `pandoc`

使用 `gomarkdown/markdown`

使用 `jekyll`

使用 `hugo`

提示：请文明发言取消回复