markdown-to-html-cli

April 21, 2026 · View on GitHub

使用我的应用也是一种支持我的方式：
Scap: Screenshot & Markup Edit Screen Test Deskmark Keyzer Vidwall Hub VidCrop Vidwall Mousio Hint Mousio Musicer Audioer FileSentinel FocusCursor Videoer KeyClicker DayBar Iconed Menuist Quick RSS Quick RSS Web Serve Copybook Generator DevTutor for SwiftUI RegexMate Time Passage Iconize Folder Textsound Saver Create Custom Symbols DevHub Resume Revise Palette Genius Symbol Scribe

markdown-to-html-cli

Buy me a coffee Downloads npm version Build and Test Coverage Status English Document

将 Markdown 文本转换为 HTML，提供命令行工具和方法。如果您是简单的将少量 markdown 文件（或文本）转换成 HTML 页面，这将对你很有帮助。

Usage

在 Github Actions 中使用。

- run: npm i markdown-to-html-cli -g
- run: markdown-to-html --output coverage/index.html
- run: markdown-to-html --source src/README.md --output coverage/index.html
# or
- name: Converts Markdown to HTML
  uses: jaywcjlove/markdown-to-html-cli@main
  with:
    source: README-zh.md
    output: coverage/action.html
    github-corners: https://github.com/jaywcjlove/markdown-to-html-cli
    favicon: data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌐</text></svg>

使用命令

{
  "scripts": {
    "start": "markdown-to-html --output coverage/index.html"
  },
  "devDependencies": {
    "markdown-to-html-cli": "latest"
  }
}

在 Nodejs 中使用。

import { create } from 'markdown-to-html-cli';

const html = create({
  markdown: 'Hello World! **Bold**\n# Title',
  document: {
    style: ['body { background: red; }'],
  }
});
// => HTML String

安装

$ npm i markdown-to-html-cli

Github Actions

- name: Converts Markdown to HTML
  uses: jaywcjlove/markdown-to-html-cli@main
  with:
    source: README-zh.md
    output: coverage/action.html
    github-corners: https://github.com/jaywcjlove/markdown-to-html-cli
    favicon: data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌐</text></svg>

Input Parameters

  • output - 将静态页面输出到指定目录. (default: index.html)
  • source - 目标文件 README.md 的路径。 (default: README.md)
  • description - 定义你的网页的描述。
  • config - 指定配置文件。 (default: package.json)
  • markdown - Markdown 字符串。
  • favicon - 将 Favicon 添加到您的站点。
  • github-corners - 将 Github 角添加到您的项目页面。
  • corners - 展示 Github 角。 (default: true)
  • dark-mode - 禁用浅色和深色主题样式按钮。 (default: true)
  • markdown-style - Markdown 包裹样式修改.
  • markdown-style-theme - 设置 Markdown 风格的浅色/深色主题。
  • style - 覆盖默认样式。 css 文件路径或 css 字符串
  • title - 定义 <title> 文档标题的内容！

Output Parameters

  • output - 将静态页面输出到指定目录路径
  • markdown - Markdown 字符串
  • html - HTML 字符串

在 package.json 中配置

可以通过 --config="config/conf.json" 指定配置，默认可以在 package.json。

{
  "markdown-to-html": {
    "document": {
      "title": "markdown-to-html-cli",
      "description": "Command line tool generates markdown as html.",
      "style": "body { color: red; }",
      "meta": [
        { "description": "Command line tool generates markdown as html." },
        { "keywords": "store,localStorage,lightweight,JavaScript" }
      ]
    },
    "favicon": "data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌐</text></svg>",
    "github-corners": "https://github.com/jaywcjlove/markdown-to-html-cli",
    "reurls": {
      "README-zh.md": "index.zh.html",
      "README.md": "index.html"
    }
  }
}
  • name -> 'markdown-to-html'.title - 定义 <title> 文档标题内容！
  • description -> 'markdown-to-html'.description - 定义您的网页的描述。
  • repository.url -> 'markdown-to-html'.github-corners - 在你的项目页面添加一个 Github Corners。
  • keywords -> 'markdown-to-html'.document.meta - 定义搜索引擎的关键字。

命令帮助

Usage: markdown-to-html [options] [--help|h]

Options:

  --author                Define the author of a page.
  --config, -o            Specify the configuration file. Default: "<process.cwd()>/package.json".
  --description           Define a description of your web page.
  --favicon               Add a Favicon to your Site.
  --github-corners        Add a Github corner to your project page.
  --github-corners-fork   Github corners style.
  --keywords              Define keywords for search engines.
  --no-dark-mode          Disable light and dark theme styles button.
  --markdown              Markdown string.
  --style                 Override default styles. css file path or css string.
  --markdown-style-theme  Setting markdown-style light/dark theme.
  --output, -o            Output static pages to the specified directory. Default: "index.html"
  --source, -s            The path of the target file "README.md". Default: "README.md"
  --title                 The `<title>` tag is required in HTML documents!
  --version, -v           Show version number
  --help, -h              Displays help information.

Example:

  npm markdown-to-html-cli
  npm markdown-to-html     --title="Hello World!"
  npm markdown-to-html     --config="config/conf.json"
  npm markdown-to-html-cli --markdown="Hello World!"
  npm markdown-to-html-cli --no-dark-mode
  npm markdown-to-html-cli --markdown-style-theme dark
  npm markdown-to-html-cli --github-corners https://github.com/jaywcjlove/markdown-to-html-cli
  npm markdown-to-html-cli --github-corners https://github.com/jaywcjlove --github-corners-fork
  npm markdown-to-html-cli --output coverage/index.html
  npm markdown-to-html-cli --source README.md
  npm markdown-to-html-cli --source README.md --style=./style.css
  npm markdown-to-html-cli --source README.md --style='body { color: red; }'

Markdown Features

支持 CSS 样式定义

使用 HTML 注释 <!--rehype:xxx--> 让 Markdown 支持样式自定义。

## Title
<!--rehype:style=display: flex; height: 230px; align-items: center; justify-content: center; font-size: 38px;-->

Markdown Supports **Style**<!--rehype:style=color: red;-->

支持 GFM 注脚

Here is a simple footnote[^1]. With some additional text after it.

[^1]: My reference.

任务清单

要创建任务列表，请在列表项前添加一个常规空格字符，后跟 [ ]。要将任务标记为完成，请使用 [x]。

- [x] #739
- [ ] https://github.com/octo-org/octo-repo/issues/740
- [ ] Add delight to the experience when all tasks are complete :tada:

If a task list item description begins with a parenthesis, you'll need to escape it with \:

- [ ] \(Optional) Open a followup issue

API

import { ParsedArgs } from 'minimist';
import { Options } from 'rehype-document';
export interface CreateOptions extends MDToHTMLOptions { }
export declare function create(options?: CreateOptions): string;
export interface RunArgvs extends Omit<ParsedArgs, '_'> {
  version?: string;
  source?: string;
  output?: string;
  /** Add a Github corner to your project page. */
  'github-corners'?: string;
  /** Github corners style. */
  'github-corners-fork'?: boolean;
  /** Markdown string. */
  markdown?: string;
  /** The `<title>` tag is required in HTML documents! */
  title?: string;
  /** Specify the configuration file. Default: `<process.cwd()>/package.json` */
  config?: string;
  /** Define a description of your web page */
  description?: string;
  /** Define keywords for search engines */
  keywords?: string;
  /** Add a Favicon to your Site */
  favicon?: string;
  /** Define the author of a page */
  author?: string;
}
export interface MDToHTMLOptions extends RunArgvs {
  /** [rehype-document](https://github.com/rehypejs/rehype-document#options) options */
  document?: Options;
  /** Rewrite Element. [rehype-rewrite](https://github.com/jaywcjlove/rehype-rewrite#rewritenode-index-parent-void) */
  rewrite?: RehypeRewriteOptions['rewrite'];
  /** rewrite URLs of href and src attributes. */
  reurls?: Record<string, string>;
}
export declare function run(opts?: Omit<RunArgvs, "_">): any;
export declare const cliHelp: string;
export declare const exampleHelp: string;

Development

$ npm i
$ npm run build
$ npm run watch

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

MIT © Kenny Wong