markdown-to-html-cli

<div markdown="1"> <sup>Using <a href="https://wangchujiang.com/#/app" target="_blank">my app</a> is also a way to <a href="https://wangchujiang.com/#/sponsor" target="_blank">support</a> me:</sup> <br> <a target="_blank" href="https://apps.apple.com/app/6757317079" title="Screen Test for macOS"><img alt="Screen Test" height="52" width="52" src="https://wangchujiang.com/appicon/screen-test.png"></a> <a target="_blank" href="https://apps.apple.com/app/Deskmark/6755948110" title="Deskmark for macOS"><img alt="Deskmark" height="52" width="52" src="https://wangchujiang.com/appicon/deskmark.png"></a> <a target="_blank" href="https://apps.apple.com/app/Keyzer/6500434773" title="Keyzer for macOS"><img alt="Keyzer" height="52" width="52" src="https://wangchujiang.com/appicon/keyzer.png"></a> <a target="_blank" href="https://github.com/jaywcjlove/vidwall-hub" title="Vidwall Hub for macOS"><img alt="Vidwall Hub" height="52" width="52" src="https://wangchujiang.com/appicon/vidwall-hub.png"></a> <a target="_blank" href="https://apps.apple.com/app/VidCrop/6752624705" title="VidCrop for macOS"><img alt="VidCrop" height="52" width="52" src="https://wangchujiang.com/appicon/vidcrop.png"></a> <a target="_blank" href="https://apps.apple.com/app/Vidwall/6747587746" title="Vidwall for macOS"><img alt="Vidwall" height="52" width="52" src="https://wangchujiang.com/appicon/vidwall.png"></a> <a target="_blank" href="https://wangchujiang.com/mousio-hint/" title="Mousio Hint for macOS"><img alt="Mousio Hint" height="52" width="52" src="https://wangchujiang.com/appicon/mousio-hint.png"></a> <a target="_blank" href="https://apps.apple.com/app/6746747327" title="Mousio for macOS"><img alt="Mousio" height="52" width="52" src="https://wangchujiang.com/appicon/mousio.png"></a> <a target="_blank" href="https://apps.apple.com/app/6745227444" title="Musicer for macOS"><img alt="Musicer" height="52" width="52" src="https://wangchujiang.com/appicon/musicer.png"></a> <a target="_blank" href="https://apps.apple.com/app/6743841447" title="Audioer for macOS"><img alt="Audioer" height="52" width="52" src="https://wangchujiang.com/appicon/audioer.png"></a> <a target="_blank" href="https://apps.apple.com/app/6744690194" title="FileSentinel for macOS"><img alt="FileSentinel" height="52" width="52" src="https://wangchujiang.com/appicon/file-sentinel.png"></a> <a target="_blank" href="https://apps.apple.com/app/6743495172" title="FocusCursor for macOS"><img alt="FocusCursor" height="52" width="52" src="https://wangchujiang.com/appicon/focus-cursor.png"></a> <a target="_blank" href="https://apps.apple.com/app/6742680573" title="Videoer for macOS"><img alt="Videoer" height="52" width="52" src="https://wangchujiang.com/appicon/videoer.png"></a> <a target="_blank" href="https://apps.apple.com/app/6740425504" title="KeyClicker for macOS"><img alt="KeyClicker" height="52" width="52" src="https://wangchujiang.com/appicon/key-clicker.png"></a> <a target="_blank" href="https://apps.apple.com/app/6739052447" title="DayBar for macOS"><img alt="DayBar" height="52" width="52" src="https://wangchujiang.com/appicon/daybar.png"></a> <a target="_blank" href="https://apps.apple.com/app/6739444407" title="Iconed for macOS"><img alt="Iconed" height="52" width="52" src="https://wangchujiang.com/appicon/iconed.png"></a> <a target="_blank" href="https://apps.apple.com/app/6737160756" title="Mousio for macOS"><img alt="Mousio" height="52" width="52" src="https://wangchujiang.com/appicon/rightmenu-master.png"></a> <a target="_blank" href="https://apps.apple.com/app/6723903021" title="Paste Quick for macOS"><img alt="Quick RSS" height="52" width="52" src="https://wangchujiang.com/appicon/paste-quick.png"></a> <a target="_blank" href="https://apps.apple.com/app/6670696072" title="Quick RSS for macOS/iOS"><img alt="Quick RSS" height="52" width="52" src="https://wangchujiang.com/appicon/quick-rss.png"></a> <a target="_blank" href="https://apps.apple.com/app/6670167443" title="Web Serve for macOS"><img alt="Web Serve" height="52" width="52" src="https://wangchujiang.com/appicon/web-serve.png"></a> <a target="_blank" href="https://apps.apple.com/app/6503953628" title="Copybook Generator for macOS/iOS"><img alt="Copybook Generator" height="52" width="52" src="https://wangchujiang.com/appicon/copybook-generator.png"></a> <a target="_blank" href="https://apps.apple.com/app/6471227008" title="DevTutor for macOS/iOS"><img alt="DevTutor for SwiftUI" height="52" width="52" src="https://wangchujiang.com/appicon/devtutor.png"></a> <a target="_blank" href="https://apps.apple.com/app/6479819388" title="RegexMate for macOS/iOS"><img alt="RegexMate" height="52" width="52" src="https://wangchujiang.com/appicon/regex-mate.png"></a> <a target="_blank" href="https://apps.apple.com/app/6479194014" title="Time Passage for macOS/iOS"><img alt="Time Passage" height="52" width="52" src="https://wangchujiang.com/appicon/time-passage.png"></a> <a target="_blank" href="https://apps.apple.com/app/6478772538" title="IconizeFolder for macOS"><img alt="Iconize Folder" height="52" width="52" src="https://wangchujiang.com/appicon/iconize-folder.png"></a> <a target="_blank" href="https://apps.apple.com/app/6478511402" title="Textsound Saver for macOS/iOS"><img alt="Textsound Saver" height="52" width="52" src="https://wangchujiang.com/appicon/textsound-saver.png"></a> <a target="_blank" href="https://apps.apple.com/app/6476924627" title="Create Custom Symbols for macOS"><img alt="Create Custom Symbols" height="52" width="52" src="https://wangchujiang.com/appicon/create-custom-symbols.png"></a> <a target="_blank" href="https://apps.apple.com/app/6476452351" title="DevHub for macOS"><img alt="DevHub" height="52" width="52" src="https://wangchujiang.com/appicon/devhub.png"></a> <a target="_blank" href="https://apps.apple.com/app/6476400184" title="Resume Revise for macOS"><img alt="Resume Revise" height="52" width="52" src="https://wangchujiang.com/appicon/resume-revise.png"></a> <a target="_blank" href="https://apps.apple.com/app/6472593276" title="Palette Genius for macOS"><img alt="Palette Genius" height="52" width="52" src="https://wangchujiang.com/appicon/palette-genius.png"></a> <a target="_blank" href="https://apps.apple.com/app/6470879005" title="Symbol Scribe for macOS"><img alt="Symbol Scribe" height="52" width="52" src="https://wangchujiang.com/appicon/symbol-scribe.png"></a> </div> <hr> 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/) [![中文文档](https://jaywcjlove.github.io/sb/lang/chinese.svg)](README-zh.md) Converts markdown text to HTML, Provide command line tools and methods. If you are simply converting a small number of Markdown files (or text) into HTML pages, this is very helpful for you. ## Usage Used in 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,<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> ``` Using With Command. ```js { "scripts": { "start": "markdown-to-html --output coverage/index.html" }, "devDependencies": { "markdown-to-html-cli": "latest" } } ``` Used in [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 ``` ## Install ```shell $ 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,<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` - Output static pages to the specified directory. (default: `index.html`) - `source` - The path of the target file "README.md". (default: `README.md`) - `description` - Define a description of your web page. - `config` - Specify the configuration file. (default: `package.json`) - `markdown` - Markdown string - `favicon` - Add a Favicon to your Site. - `github-corners` - Add a Github corner to your project page. - `corners` - Show corners. (default: `true`) - `dark-mode` - Disable light and dark theme styles button. (default: `true`) - `markdown-style` - Markdown wrapper style. - `markdown-style-theme` - Setting markdown-style light/dark theme. (`dark | light`) - `style` - Override default styles. css file path or css string - `title` - Define the content of the "<title>" document title! ### Output Parameters - `output` - Output static pages to the specified directory - `markdown` - Markdown string - `html` - HTML string ## Configure in package.json The configuration can be specified through `--config="config/conf.json"`, It can be in `package.json` by default. ```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,<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`](https://github.com/jaywcjlove/markdown-to-html-cli/blob/308ca37aa5b9ae846a7835092a183d0ed73a8dc4/package.json#L2) -> `'markdown-to-html'.title` - Define the content of the `<title>` document title! - [`description`](https://github.com/jaywcjlove/markdown-to-html-cli/blob/308ca37aa5b9ae846a7835092a183d0ed73a8dc4/package.json#L4) -> `'markdown-to-html'.description` - Define a description of your web page. - [`repository.url`](https://github.com/jaywcjlove/markdown-to-html-cli/blob/308ca37aa5b9ae846a7835092a183d0ed73a8dc4/package.json#L22) -> `'markdown-to-html'.github-corners` - Add a Github corner to your project page. - [`keywords`](https://github.com/jaywcjlove/markdown-to-html-cli/blob/308ca37aa5b9ae846a7835092a183d0ed73a8dc4/package.json#L24-L30) -> `'markdown-to-html'.document.meta` - Define keywords for search engines. ## Command Help ```bash 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. --no-corners Hide Github corner from your project page. --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. --img-base64 Convert images in HTML to base64. --style Override default styles. css file path or css string. --markdown-style-theme Setting markdown-style light/dark theme. --markdown-style Markdown wrapper style --ignore-file Ignore markdown files under certain paths. Default: "(node_modules)" --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: markdown-to-html --title="Hello World!" markdown-to-html --config="config/conf.json" npx markdown-to-html-cli npx markdown-to-html-cli **/*.md --output "dist" npx markdown-to-html-cli **/*.md --ignore-file="(test)" npx markdown-to-html-cli --markdown="Hello World!" npx markdown-to-html-cli --no-dark-mode npx markdown-to-html-cli --dark-mode auto npx markdown-to-html-cli --dark-mode auto --markdown-style-theme dark npx markdown-to-html-cli --no-dark-mode --markdown-style-theme dark npx markdown-to-html-cli --markdown-style-theme dark npx markdown-to-html-cli --github-corners https://github.com/jaywcjlove/markdown-to-html-cli npx markdown-to-html-cli --github-corners https://github.com/jaywcjlove --github-corners-fork npx markdown-to-html-cli --output coverage/index.html npx markdown-to-html-cli --source README.md npx markdown-to-html-cli --source README.md --style=./style.css npx markdown-to-html-cli --source README.md --style='body { color: red; }' ``` ## Markdown Features ### Supports for CSS Style Use HTML comments [``](https://github.com/jaywcjlove/rehype-attr) to let Markdown support style customization. ```markdown ## Title  Markdown Supports **Style** ``` ### Support for [GFM footnotes](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. ``` ### [Task lists](https://docs.github.com/en/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#task-lists) To create a task list, preface list items with a regular space character followed by `[ ]`. To mark a task as complete, use `[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 ```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<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; /** Disable light and dark theme styles button. */ 'dark-mode'?: boolean; /** Setting markdown-style light/dark theme. */ 'markdown-style-theme'?: 'dark' | 'light'; /** Markdown string. */ markdown?: string; /** Markdown wrapper style */ 'markdown-style'?: 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; /** Override default styles */ style?: 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; ``` ## Related - [markdown-to-html](https://github.com/jaywcjlove/markdown-to-html) Converts markdown text to HTML. ## Development ```bash $ npm i $ npm run build $ npm run watch ``` ## Related - [html-to-markdown-cli](https://github.com/jaywcjlove/html-to-markdown-cli) Converts HTML to markdown. ## Contributors As always, thanks to our amazing contributors! <a href="https://github.com/jaywcjlove/markdown-to-html-cli/graphs/contributors"> <img src="https://jaywcjlove.github.io/markdown-to-html-cli/CONTRIBUTORS.svg" /> </a> Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors). ## License MIT © [Kenny Wong](https://wangchujiang.com/)