My Docs

A script converts markdown to html

#Features

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

#Link 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"

bash

Option 2

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

bash

Config (file package.json)

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\""
  },
  ...
}

json

#Install

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' }],
  ],
});

#Demo

Code Markdown

Code Highlight

console.log(1);
console.log(1);
console.log(1);
console.log(1);
console.log(1);

console.log(1);
console.log(1);
console.log(1);

Code Group

npm

yarn

pnpm

bun

 npm install @nuxtjs/html-validator --save-dev

bash

 yarn add @nuxtjs/html-validator --dev

bash

 pnpm i -D @nuxtjs/html-validator

bash

 bun install @nuxtjs/html-validator --save-dev

bash

const a = 2;

const a: number = 2;

Github Alert

Note

Highlights information that users should take into account, even when skimming.

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

Mention

HUNGHG255

Katex

equation	description
$\nabla \cdot \vec{\mathbf{B}} = 0$	divergence of $\vec{\mathbf{B}}$ is zero
$\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$	curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$
$\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$	wha?

$x^3 + y^3 = z^3$

$\frac{\bcancel{\frac13}}{\bcancel{\frac13}} = 1$

$\begin{aligned} (a+b)^2 &= (a+b)(a+b) \\ &= a^2 + ab + ba + b^2 \\ &= a^2 + 2ab + b^2 \end{aligned}$

$\cfrac{2}{1+\cfrac{2}{1+\cfrac{2}{1}}}$

$P\implies Q$

$a + \lt b\gt + c$

$\sum\nolimits_{k=1}^n a_k$

$\frac ab + {\scriptscriptstyle \frac cd + \frac ef} + \frac gh$

$\sum_{ \substack{ 1\lt i\lt 3 \\ 1\le j\lt 5 }} a_{ij}$

$\underbrace{x + \cdots + x}_{n\rm\ times}$

$\left(\vcenter{\frac{a+b}{\dfrac{c}{d}}}\right)$

$x+\xcancel{5y}=0$

$\def\arraystretch{1.5} \begin{array}{c:c:c} a & b & c \\ \hline d & e & f \\ \hdashline g & h & i \end{array}$

Mermaid

sequenceDiagram
    box Local
    participant Working Directory
    participant Staging Area
    participant Local Repo
    end
    box Remote
    participant Remote Repo
    end
    Working Directory->>Staging Area: git add
    Staging Area->>Local Repo: git commit
    Local Repo->>Remote Repo: git push
    Remote Repo->>Local Repo: git fetch
    Local Repo->>Working Directory: git merge
    Remote Repo->>Working Directory: git pull
    Remote Repo->>Local Repo: git clone
    Local Repo->>Working Directory: git checkout

Twoslash

blog.ts

import const MarkdownIt: MarkdownItConstructorMain parser/renderer class.
Usage
// node.js, "classic" way:
var MarkdownIt = require('markdown-it'),
    md = new MarkdownIt();
var result = md.render('# markdown-it rulezz!');

// node.js, the same, but with sugar:
var md = require('markdown-it')();
var result = md.render('# markdown-it rulezz!');

// browser without AMD, added to "window" on script load
// Note, there are no dash.
var md = window.markdownit();
var result = md.render('# markdown-it rulezz!');
Single line rendering, without paragraph wrap:
var md = require('markdown-it')();
var result = md.renderInline('__markdown-it__ rulezz!');
Example
// commonmark mode
var md = require('markdown-it')('commonmark');

// default mode
var md = require('markdown-it')();

// enable everything
var md = require('markdown-it')({
  html: true,
  linkify: true,
  typographer: true
});
Syntax highlighting
var hljs = require('highlight.js') // https://highlightjs.org/

var md = require('markdown-it')({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str, true).value;
      } catch (__) {}
    }

    return ''; // use external default escaping
  }
});
Or with full wrapper override (if you need assign class to <pre>):
var hljs = require('highlight.js') // https://highlightjs.org/

// Actual default values
var md = require('markdown-it')({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return '<pre class="hljs"><code>' +
               hljs.highlight(lang, str, true).value +
               '</code></pre>';
      } catch (__) {}
    }

    return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
  }
});MarkdownIt from 'markdown-it';

var console: Consoleconsole.Console.log(...data: any[]): voidMDN Referencelog(1);
var console: Consoleconsole.
Console.log(...data: any[]): voidMDN Referencelog(2);

blog.ts

import { function getHighlighterCore(options?: HighlighterCoreOptions): Promise<HighlighterCore>Create a Shiki core highlighter instance, with no languages or themes bundled.
Wasm and each language and theme must be loaded manually.
@seehttp://shiki.style/guide/install#fine-grained-bundlegetHighlighterCore } from '@shikijs/core';

const const highlighter: HighlighterCorehighlighter = await function getHighlighterCore(options?: HighlighterCoreOptions | undefined): Promise<HighlighterCore>Create a Shiki core highlighter instance, with no languages or themes bundled.
Wasm and each language and theme must be loaded manually.
@seehttp://shiki.style/guide/install#fine-grained-bundlegetHighlighterCore({});

import { function transformerTwoslash(options?: VitePressPluginTwoslashOptions): ShikiTransformer
export transformerTwoslashCreate a Shiki transformer for VitePress to enable twoslash integration
Add this to markdown.codeTransformers in .vitepress/config.tstransformerTwoslash as function transformerTwoslashVue(options?: VitePressPluginTwoslashOptions): ShikiTransformerCreate a Shiki transformer for VitePress to enable twoslash integration
Add this to markdown.codeTransformers in .vitepress/config.tstransformerTwoslashVue } from '@shikijs/vitepress-twoslash';

import { function rendererRich(options?: RendererRichOptions): TwoslashRendererAn alternative renderer that providers better prefixed class names,
with syntax highlight for the info text.rendererRich, function transformerTwoslash(options?: TransformerTwoslashIndexOptions): _shikijs_core_dist_chunk_tokens_mjs.AFactory function to create a Shiki transformer for twoslash integrations.transformerTwoslash } from '@shikijs/twoslash';

function transformerTwoslash(options?: TransformerTwoslashIndexOptions | undefined): ShikiTransformerFactory function to create a Shiki transformer for twoslash integrations.transformerTwoslash({
  TransformerTwoslashOptions.renderer?: TwoslashRenderer | undefinedCustom renderers to decide how each info should be renderedrenderer: function rendererRich(options?: RendererRichOptions | undefined): TwoslashRendererAn alternative renderer that providers better prefixed class names,
with syntax highlight for the info text.rendererRich(), // <--
  TransformerTwoslashOptions.explicitTrigger?: boolean | RegExp | undefinedRequires twoslash to be presented in the code block meta to apply this transformer
@defaultfalseexplicitTrigger: true, // <--
});

import {
  function transformerNotationDiff(options?: TransformerNotationDiffOptions): ShikiTransformerUse [!code ++] and [!code --] to mark added and removed lines.transformerNotationDiff,
  // ...
} from '@shikijs/transformers';

const const code: "console.log('hello')"code = `console.log('hello')`;

var Number: NumberConstructorAn object that represents a number of any kind. All JavaScript numbers are 64-bit floating-point numbers.Number.pparseFloat
parseInt
prototypeNumberConstructor.parseInt(string: string, radix?: number | undefined): numberConverts A string to an integer.
@paramstring  A string to convert into a number.@paramradix  A value between 2 and 36 that specifies the base of the number in string.
If this argument is not supplied, strings with a prefix of '0x' are considered hexadecimal.
All other strings are considered decimal.arseInt('123', 10);

const const obj: {
    boo: number;
    bar: () => number;
    baz: string;
}obj = {
  boo: numberboo: 1,
  bar: () => numberbar: () => 2,
  baz: stringbaz: 'string',
};
const obj: {
    boo: number;
    bar: () => number;
    baz: string;
}obj.bbar
baz
booboo: numberoo;

const str: string = 1;Type 'number' is not assignable to type 'string'.
str = 'Hello';Cannot assign to 'str' because it is a constant.

const const a: 1a = 1;Custom log message
const const b: 1b = 1;Custom error message
const const c: 1c = 1;Custom warning message
const const d: 1d = 1;Custom annotation message

Block space

function block() {
  space();
  if (true) {
    table();
  }
}

Word highlight

export function foo() {
  const msg = 'Hello World';
  console.log(msg); // prints Hello World
}

const options = { foo: 'bar' };
options.foo = 'baz';
console.log(options.foo); // this one will not be highlighted

#Mention

HUNGHG255