Convert-markdown-to-html NPM

Features

Support Syntax Highlighting
Support Github Alert
Support Emoji
Support Table of Contents
Support Mermaid
Support Katex
Support Twoslash

Demo

API

--i: input file
--o: output file
--t: title
--g: github link

CLI

Option 1

npx convert-markdown-to-html@latest --i README.md --o docs/index.html --t "Convert Markdown to HTML" --g "https://github.com/hunghg255/convert-markdown-to-html"

Option 2

npm i convert-markdown-to-html@latest --save-dev

Config (file package.json)

{
  ...
  "scripts": {
    ...
    "gen-docs": "convert-markdown-to-html --i README.md --o docs/index.html --t \"Convert Markdown to HTML\" --g \"https://github.com/hunghg255/convert-markdown-to-html\""
  },
  ...
}

Install

Create a file mdocs.config.ts in the root of the project

import { defineConfig } from 'convert-markdown-to-html';

export default defineConfig({
  input: 'index.md',
  output: 'index.html',
  isTwoSlash: true,

  title: 'My Docs',
  description: 'My awesome documentation',

  logo: '',

  socialLinks: [
    {
      icon: 'twitter',
      url: 'https://github.com',
    },
    {
      icon: 'github',
      url: 'https://github.com',
    },
  ],
  footer: {
    message: 'Released under the MIT License',
    copyright: 'Copyright © 2023-present Hunghg255',
  },

  head: [
    [
      'link',
      { rel: 'icon', type: 'image/png', href: 'https://hung.thedev.id/images/patak-banner.jpg' },
    ],
    ['meta', { property: 'og:type', content: 'website' }],
    ['meta', { property: 'og:title', content: ogTitle }],
    ['meta', { property: 'og:image', content: ogImage }],
    ['meta', { property: 'og:url', content: ogUrl }],
    ['meta', { property: 'og:description', content: ogDescription }],
    ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
    ['meta', { name: 'twitter:site', content: '@hunghg255' }],
    ['meta', { name: 'theme-color', content: '#7eaf90' }],
  ],
});

Config (file package.json)

{
  ...
  "scripts": {
    ...
    "gen-docs": "convert-markdown-to-html"
  },
  ...
}

Function

import { markdownToDocs } from 'convert-markdown-to-html';

declare const markdownToDocs: (
  isTwoSlash: boolean;
  title: string;
  description?: string;
  logo?: string;
  socialLinks?: {
      icon?: 'twitter' | 'github';
      url?: string;
  }[];
  footer?: {
      message?: string;
      copyright?: string;
  };
  head?: Array<[string, Record<string, string>]>;
) => Promise<string>;

const markdownContent = `# Hello World`;
const html = markdownToDocs(markdownContent, {
  isTwoSlash: true,

  title: 'My Docs',
  description: 'My awesome documentation',

  logo: '',

  socialLinks: [
    {
      icon: 'twitter',
      url: 'https://github.com',
    },
    {
      icon: 'github',
      url: 'https://github.com',
    },
  ],
  footer: {
    message: 'Released under the MIT License',
    copyright: 'Copyright © 2023-present Hunghg255',
  },

  head: [
    [
      'link',
      { rel: 'icon', type: 'image/png', href: 'https://hung.thedev.id/images/patak-banner.jpg' },
    ],
    ['meta', { property: 'og:type', content: 'website' }],
    ['meta', { property: 'og:title', content: ogTitle }],
    ['meta', { property: 'og:image', content: ogImage }],
    ['meta', { property: 'og:url', content: ogUrl }],
    ['meta', { property: 'og:description', content: ogDescription }],
    ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
    ['meta', { name: 'twitter:site', content: '@hunghg255' }],
    ['meta', { name: 'theme-color', content: '#7eaf90' }],
  ],
});