npm package: @phucbm/gfm
Description: Turn markdown text into GitHub Flavoured Markdown with light/dark code syntax highlight.
Author: phucbm
Latest version: 0.0.1

# @phucbm/gfm

[![pages-build-deployment](https://github.com/phucbm/gfm/actions/workflows/pages/pages-build-deployment/badge.svg?branch=gh-pages)](https://github.com/phucbm/gfm/actions/workflows/pages/pages-build-deployment)

> Turn Markdown text into [GitHub Flavored Markdown](https://github.github.com/gfm/) (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`](https://www.npmjs.com/package/markdown-loader) (webpack)
- Light/dark GFM styling
  from [sindresorhus/generate-github-markdown-css](https://github.com/sindresorhus/generate-github-markdown-css)
- Code syntax highlight using [`starry-night`](https://github.com/wooorm/starry-night)

## Install

Install with [npm](https://docs.npmjs.com/cli/install):

```shell
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`](https://marked.js.org/)

Say our document `example.md` contains:

```markdown
# GFM

## Autolink literals

www.example.com, https://example.com, and contact@example.com.

## 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`](https://www.npmjs.com/package/markdown-loader) to
your `webpack.config.js`

```javascript
// 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:

```js
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](https://phucbm.github.io/gfm/).

### 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.

```javascript
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:

```shell
# install
npm i

# run dev server
npm run dev
```

## License

MIT © [Phuc Bui](https://github.com/phucbm)