Not only is this a CLI tool, but it is also an importable package for converting standard Markdown and even HackMD-supported Markdown into HTML.
- Example of input markdown: ./example/index.md
- Example of output html: https://ksw2000.github.io/hackmd-to-html-cli/
- Example of output html in dark mode: https://ksw2000.github.io/hackmd-to-html-cli/index.dark.html
- Example of converting in web: https://ksw2000.github.io/hackmd-to-html-cli/webjs.html
# CLI
npm install -g hackmd-to-html-cli
# Package
npm install hackmd-to-html-cli$ hmd2html --help
hmd2html --help
Usage: index [options]
Options:
-v, --version output the current version
-i, --input <files_or_urls...> the path/url of input markdown files
-d, --dest <dir> the path of output directory (filename is generated automatically) (default: ./output)
-o, --output <files...> the path of output file (ignored if the flag -d is set) (default: "")
-l, --layout <html_file> specify the layout file (default: "")
-b, --hardBreak use hard break instead of soft break
-k, --dark use the dark mode layout (activate only if the -l option is not set)
-h, --help display help for commandConvert
# convert files
$ hmd2html -i file1.md file2.md file3.md
# allow wildcard input
$ hmd2html -i dir/*.md
# allow url input
$ hmd2html -i https://github.com/ksw2000/hackmd-to-html-cli/blob/main/example/index.md
# set output folder
$ hmd2html -i file1.md -d ./my_output
# set the filename of output
$ hmd2html -i file1.md -o file1.html
$ hmd2html -i file1.md file2.md -o file1.html file2.html
# use default darkmode layout
$ hmd2html -i file1.md -k
# use custom layout
$ hmd2html -i hello.md -l ./myLayout.htmlWe provide the two default layouts. Please see layouts here: https://github.com/ksw2000/hackmd-to-html-cli/blob/main/layouts/
{{main}}renders main content of markdown.{{lang}}renders lang property if there are yaml metadata aboutlangin markdown file. e.g.lang="zh-TW"{{dir}}renders dir property if there are yaml metadata aboutdirin markdown file. e.g.dir="ltr"{{meta}}renders meta tag if there are yaml metadata abouttitle,description,robotsorimage. e.g.<meta name="robots" content="noindex">
Example:
<!DOCTYPE html>
<html {{lang}} {{dir}}>
<head>
{{metas}}
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<body>
{{main}}
</body>
</html>There are some features rendered by other dependencies. Thus, in our default layout, we include those dependencies.
const { Converter } = require('hackmd-to-html-cli')
const converter = new Converter();
const res = converter.render("# hello");
console.log(res.main);import { Converter } from "hackmd-to-html-cli"
const converter = new Converter();
const res = converter.render("# hello");
console.log(res.main);const converter = new window.hmd2html.Converter();
const res = converter.render("# hello");
console.log(res.main);hmd2html: our tool (the latest)
HackMD Default Converter: The default markdown to html converter provided by HackMD, i.e., download HTML file on HackMD.
HackMD fully supports syntax: features
| Features | hmd2html | HackMD Default Converter |
|---|---|---|
| ToC | ✅ | ✅ |
| Emoji | ✅ | ✅ |
| ToDo list | ✅ | ✅ |
| Code block | ✅ | ✅ |
| - Show line number or not | ✅ | ❌ |
| - Specify the start line number | ✅ | ❌ |
| - Continue line number | ✅ | ❌ |
| Blockquote | ✅ | ✅ |
| - specify your name | ✅ | ✅ |
| - specify time | ✅ | ✅ |
| - color | ✅ | ✅ |
| Render CSV as table | ✅ | ✅ |
| MathJax | ✅ | ✅ |
| Sequence diagrams | ✅ | ❌ |
| Flow charts | ✅ | ❌ |
| Graphviz | ✅ | ❌ |
| Mermaid | ✅ | ❌ |
| Abc | ✅ | ❌ |
| PlantUML | ✅ | ✅ |
| Vega-Lite | ✅ | ❌ |
| Fretboard | ✅ | ❌ |
| Alert Area | ✅ | ✅ |
| Detail | ✅ | ✅ |
| Spoiler container | ✅ | ✅ |
| Headers h1-h6 | ✅ | ✅ |
Horizontal line --- *** |
✅ | ✅ |
Bold **b** __b__ |
✅ | ✅ |
Italic *i* _i_ |
✅ | ✅ |
Deleted text ~~del~~ |
✅ | ✅ |
Superscript ^sup^ |
✅ | ✅ |
Subscript ~sub~ |
✅ | ✅ |
Inserted text ++ins++ |
✅ | ✅ |
Marked text ==mark== |
✅ | ✅ |
| Ruby case | ✅ | ✅ |
| Typographic replacements |
✅ | ✅ |
| Blockquotes | ✅ | ✅ |
| List | ✅ | ✅ |
| Tables | ✅ | ✅ |
| Links | ✅ | ✅ |
| Link with title | ✅ | ✅ |
| Autoconverted link | ✅ | ✅ |
| Image | ✅ | ✅ |
| - normal | ✅ | ✅ |
| - with title | ✅ | ✅ |
| - given size | ✅ | ✅ |
| Footnotes | ✅ | ✅ |
| Definition list | ✅ | ✅ |
| Abbreviations | ✅ | ✅ |
| Features | hmd2html | HackMD Default Converter |
|---|---|---|
| Youtube | ✅ | ✅ |
| Vimeo | ✅ | ❌ |
| Gist | ✅ | ✅ |
| SlideShare | ❌ | ❌ |
| Speakerdeck | ✅ | ✅ |
| ✅ | ✅ | |
| Figma | ✅ | ✅ |
| Features | hmd2html | Implementation |
|---|---|---|
| title | ✅ | <title></title><meta name="twitter:title"><meta property="og:title"> |
| description | ✅ | <meta name="description"><meta name="twitter:description"><meta property="og:description"> |
| robots | ✅ | <meta name="robots"> |
| lang | ✅ | <html lang=""> |
| dir | ✅ | <html dir=""> |
| image | ✅ | <meta property="og:image"><meta name="twitter:image:src"> |
| others | ✅ | Hide the metadata by html comment |
HackMD sets the lang tag and dir tag at the beginning of <body>. hmd2html sets the the lang tag and dir tag at <html> when using default layout.
npm run lintto check the format of source code.npm run exampleruns example for this package, which generates result from./exampleand places them in./output.npm testruns unit test files whose filenames end with.spec.ts
Contributions to hackmd-to-html-cli are welcome and highly appreciated. Please run lint npm run lint and test npm run test before pull requesting.