Convert Markdown to HTML.

Converts markdown text to HTML.

Installation

This package v2+ is ESM only: Node 12+ is needed to use it and it must be import instead of require.

$ npm i @wcj/markdown-to-html

Usage

import markdown, { getCodeString } from '@wcj/markdown-to-html';

markdown('# Markdown String')
// => <h1>Markdown String</h1>

Or manually download and link markdown-to-html in your HTML, It can also be downloaded via UNPKG:

CDN: UNPKG | jsDelivr | Githack | Statically

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">
<link rel="stylesheet" href="https://unpkg.com/@wcj/markdown-to-html/dist/marked.css">

<script src="https://unpkg.com/@wcj/markdown-to-html/dist/markdown.min.js"></script>
<script type="text/javascript">
  ;(() => {
    const str = '# Markdown to HTML\n\nConverts markdown text to HTML.\n\n';
    const div = document.createElement('div');
    div.className = 'markdown-body';
    div.innerHTML = markdown.default(str)
    document.body.appendChild(div)
  })()
</script>

Add Markdown Style

① Import the css file.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">
<link rel="stylesheet" href="https://unpkg.com/@wcj/markdown-to-html/dist/marked.css">

② Or use <markdown-style> components.

<script src="https://unpkg.com/@wcj/markdown-style"></script>
<markdown-style>
  <!-- markdown html is here -->
  <h1>Markdown HTML</h1>
</markdown-style>

API

import { PluggableList } from 'unified';
import { Options as RemarkRehypeOptions } from 'remark-rehype';
import { RehypeRewriteOptions, getCodeString } from 'rehype-rewrite';
export { getCodeString };
export interface Options {
  /** [remark-rehype](https://github.com/remarkjs/remark-rehype) options */
  remarkRehypeOptions?: RemarkRehypeOptions;
  /** List of [remark plugins](https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins) to use. See the next section for examples on how to pass options */
  remarkPlugins?: PluggableList;
  /** List of [rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins) to use. See the next section for examples on how to pass options */
  rehypePlugins?: PluggableList;
  /** Used to filter default plugins */
  filterPlugins?: (type: 'remark' | 'rehype', plugins?: PluggableList) => PluggableList;
  /** Resulting Node tree. */
  hastNode?: boolean;
  /** Rewrite Element. [rehype-rewrite](https://github.com/jaywcjlove/rehype-rewrite#rewritenode-index-parent-void) */
  rewrite?: RehypeRewriteOptions['rewrite'];
  /** See KaTeX [options](https://katex.org/docs/options.html). */
  katexOptions?: KatexOptions;
}
export default function markdown(markdownStr?: string, options?: Options): string | import("hast").Root;

Markdown Features

Supports for CSS Style

Use HTML comments <!--rehype:xxx--> to let Markdown support style customization.

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

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

Support for GFM footnotes

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

[^1]: My reference.

Support for KaTeX

Support markdown syntax to render math. You can combine it with KaTeX in markdown, add `KaTeX:string` and ```markdown classes in markdown.

\`KaTeX:c = \\pm\\sqrt{a^2 + b^2}\`

\`\`\`KaTeX
c = \\pm\\sqrt{a^2 + b^2}

L = \\frac{1}{2} \\rho v^2 S C_L
\`\`\`

Related

• markdown-to-html-cli Converts markdown text to HTML, Provide command line tools and methods.

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

Licensed under the MIT License.