Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hunghg255/convert-markdown-to-html
Convert Markdown to HTML
https://github.com/hunghg255/convert-markdown-to-html
convert-markdown-to-html documentation html katex markdown markdown-it mermaid twoslash
Last synced: 3 months ago
JSON representation
Convert Markdown to HTML
- Host: GitHub
- URL: https://github.com/hunghg255/convert-markdown-to-html
- Owner: hunghg255
- License: mit
- Created: 2024-02-06T05:12:34.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-03-18T03:14:37.000Z (8 months ago)
- Last Synced: 2024-03-19T03:15:26.713Z (8 months ago)
- Topics: convert-markdown-to-html, documentation, html, katex, markdown, markdown-it, mermaid, twoslash
- Language: HTML
- Homepage: https://hunghg255.github.io/convert-markdown-to-html/
- Size: 874 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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
## Demo
[Demo](https://hunghg255.github.io/convert-markdown-to-html)
## API
```md
--i: input file
--o: output file
--t: title
--g: github link
```
## CLI
- Option 1
```bash
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
```bash
npm i convert-markdown-to-html@latest --save-dev
```
- Config (file package.json)
```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
```ts
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)
```json
{
...
"scripts": {
...
"gen-docs": "convert-markdown-to-html"
},
...
}
```
## Function
```ts
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]>;
) => Promise;
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' }],
],
});
```
### About
Gia Hung – [hung.hg](https://hung.thedev.id)