Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jaywcjlove/markdown-to-html-cli

Command line tool that converts markdown to HTML.
https://github.com/jaywcjlove/markdown-to-html-cli

action actions cli github-actions html markdown markdown-to-html markdown-to-html-cli nodejs

Last synced: about 21 hours ago
JSON representation

Command line tool that converts markdown to HTML.

Awesome Lists containing this project

README

        

markdown-to-html-cli
===

[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)
[![Downloads](https://img.shields.io/npm/dm/markdown-to-html-cli.svg?style=flat)](https://www.npmjs.com/package/markdown-to-html-cli)
[![npm version](https://img.shields.io/npm/v/markdown-to-html-cli.svg)](https://www.npmjs.com/package/markdown-to-html-cli)
[![Build and Test](https://github.com/jaywcjlove/markdown-to-html-cli/actions/workflows/ci.yml/badge.svg)](https://github.com/jaywcjlove/markdown-to-html-cli/actions/workflows/ci.yml)
[![Coverage Status](https://jaywcjlove.github.io/markdown-to-html-cli/badges.svg)](https://jaywcjlove.github.io/markdown-to-html-cli/lcov-report/)
[![English Document](https://jaywcjlove.github.io/sb/lang/english.svg)](README.md)

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

## Usage

在 Github [Actions](https://github.com/actions) 中使用。

```yml
- 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,🌐
```

使用命令

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

在 [Nodejs](https://nodejs.org) 中使用。

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

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

## 安装

```bash
$ npm i markdown-to-html-cli
```

## Github [Actions](https://github.com/actions)

```yml
- 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,🌐
```

### 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` - 定义 `` 文档标题的内容!

### Output Parameters

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

## 在 package.json 中配置

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

```js
{
"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,🌐",
"github-corners": "https://github.com/jaywcjlove/markdown-to-html-cli",
"reurls": {
"README-zh.md": "index.zh.html",
"README.md": "index.html"
}
}
}
```

- [`name`](https://github.com/jaywcjlove/markdown-to-html-cli/blob/308ca37aa5b9ae846a7835092a183d0ed73a8dc4/package.json#L2) -> `'markdown-to-html'.title` - 定义 `` 文档标题内容!
- [`description`](https://github.com/jaywcjlove/markdown-to-html-cli/blob/308ca37aa5b9ae846a7835092a183d0ed73a8dc4/package.json#L4) -> `'markdown-to-html'.description` - 定义您的网页的描述。
- [`repository.url`](https://github.com/jaywcjlove/markdown-to-html-cli/blob/308ca37aa5b9ae846a7835092a183d0ed73a8dc4/package.json#L22) -> `'markdown-to-html'.github-corners` - 在你的项目页面添加一个 Github Corners。
- [`keywords`](https://github.com/jaywcjlove/markdown-to-html-cli/blob/308ca37aa5b9ae846a7835092a183d0ed73a8dc4/package.json#L24-L30) -> `'markdown-to-html'.document.meta` - 定义搜索引擎的关键字。

## 命令帮助

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

Options:

--author Define the author of a page.
--config, -o Specify the configuration file. Default: "/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 `` 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 注释 [``](https://github.com/jaywcjlove/rehype-attr) 让 Markdown 支持样式自定义。

```markdown
## Title

Markdown Supports **Style**
```

### 支持 [GFM 注脚](https://github.blog/changelog/2021-09-30-footnotes-now-supported-in-markdown-fields/)

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

[^1]: My reference.
```

### [任务清单](https://docs.github.com/en/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#task-lists)

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

```markdown
- [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 `\`:

```markdown
- [ ] \(Optional) Open a followup issue
```

## API

```js
import 'markdown-to-html-cli/github-fork-ribbon.css';
import 'markdown-to-html-cli/github.css';
```

```ts
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 {
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 `` tag is required in HTML documents! */
title?: string;
/** Specify the configuration file. Default: `/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;
}
export declare function run(opts?: Omit): any;
export declare const cliHelp: string;
export declare const exampleHelp: string;
```

## Development

```bash
$ npm i
$ npm run build
$ npm run watch
```

## Contributors

As always, thanks to our amazing contributors!



Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).

## License

MIT © [Kenny Wong](https://wangchujiang.com/)