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/
# 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
-s, --src <files_or_dirs...> specify the input markdown files or directories
-d, --dest <path> specify the output directory (default: ./output)
-l, --layout <html_file> specify the layout file (default: "")
-b, --hardBreak use hard break instead of soft break
-h, --help display help for commandConvert
# files
$ hmd2html -s file1.md file2.md file3.md
# directories
$ hmd2html -s ./dir1 ./dir2
# files or directories
$ hmd2html -s file1.md ./dir1
# Set output folder
$ hmd2html -s file1.md -d ./out
# Use custom layout
$ hmd2html -s hello.md -l ./myLayout.html// for TypeScript
// import { Converter } from 'hackmd-to-html-cli'
const { Converter } = require('hackmd-to-html-cli')
const template = `{{main}}`
const hardBreak = true
const converter = new Converter(template, hardBreak)
const md = `
# title
hello world
`
console.log(converter.convert(md))output
<h1 id="title" tabindex="-1">title</h1>
<p>hello world</p>Some features
// get default layout
converter.defaultLayout()
// get metadata after converting
converter.getMetadata()See default layout here: https://github.com/ksw2000/hackmd-to-html-cli/blob/main/layout.html
{{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="lt 8000 r"{{meta}}renders meta tag if there are yaml metadata abouttitle,description,robotsorimage. e.g.<meta name="robots" content="noindex">
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.test.ts
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.
- Provide more templates & styles