@phucbm/gfm

Turn Markdown text into GitHub Flavored Markdown (GFM) with light/dark code syntax highlight.

What is this?

Ever want to just write Markdown for your app, then make it to HTML with the styling from GitHub, along with code syntax highlight? This project was made for you.

• Markdown to HTML using markdown-loader (webpack)
• Light/dark GFM styling from sindresorhus/generate-github-markdown-css
• Code syntax highlight using starry-night

Install

Install with npm:

npm i @phucbm/gfm

# webpack loader for markdown
npm i markdown-loader

# styling for GFM
npm i github-markdown-css

Use

Convert Markdown format using markdown-loader by markedjs

Say our document example.md contains:

# GFM

## Autolink literals

www.example.com, https://example.com, and [email protected].

## Footnote

A note[^1]

[^1]: Big note.

## Strikethrough

~one~ or ~~two~~ tildes.

## Table

| a | b | c | d |
| - | :- | -: | :-: |

## Tasklist

* [ ] to do
* [x] done

To be able to read the .md file format, add markdown-loader to your webpack.config.js

// webpack.config.js
export default {
    module: {
        rules: [
            {
                test: /\.md$/,
                use: [
                    {
                        loader: "html-loader",
                    },
                    {
                        loader: "markdown-loader",
                        options: {
                            // Pass options to marked
                            // See https://marked.js.org/using_advanced#options
                        },
                    },
                ],
            },
        ],
    },
};

…and our module example.js looks as follows:

import markdownText from "./example.md";
import 'github-markdown-css/github-markdown.css';

// the Markdown text will be converted to HTML text using "markdown-loader"
console.log(markdownText);

const content = document.querySelector('#content');

// insert the HTML text to the DOM
content.insertAdjacentHTML('beforeend', markdownText);

See how it looks like.

Code highlight

Your Markdown code block must have a language identifier like in the example.md, then run highlightCodeSyntax() only when the HTML has loaded.

import {highlightCodeSyntax} from "../src/code-syntax-highlight";

// insert HTML

// code highlight (only run once the HTML as loaded)
highlightCodeSyntax().then();

Info Check the folder example for demo files.

API

highlightCodeSyntax(codeBlocks)

Loop through all <code> in the DOM and replace with highlighted code syntax.

Parameters

• codeBlocks - HTMLElement, optional.

Return

{Promise<HTMLElement[]>}

Development

Clone this repo, then:

# install
npm i

# run dev server
npm run dev

License

MIT © Phuc Bui