# @phucbm/gfm

> Turn markdown text into GitHub Flavoured Markdown with light/dark code syntax highlight.

Latest version **0.0.1** (published 2023-10-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @phucbm/gfm
pnpm add @phucbm/gfm
yarn add @phucbm/gfm
bun add @phucbm/gfm
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2023-10-08 |
| First published | 2023-10-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 14.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | phucbm |
| Maintainers | phucbui96 |
| Keywords | phucbm, github, es6, markdown |

## Links

- npm: https://www.npmjs.com/package/@phucbm/gfm
- Repository: https://github.com/phucbm/gfm
- Issues: https://github.com/phucbm/gfm/issues
- npm.io page: https://npm.io/package/@phucbm/gfm

## Dependencies (4)

- [markdown-loader](https://npm.io/package/markdown-loader.md) ^8.0.0
- [hast-util-to-dom](https://npm.io/package/hast-util-to-dom.md) ^4.0.0
- [github-markdown-css](https://npm.io/package/github-markdown-css.md) ^5.2.0
- [@wooorm/starry-night](https://npm.io/package/@wooorm/starry-night.md) ^3.0.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.0.1 (latest) — 2023-10-08

## README

# @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)

---
_Source: https://npm.io/package/@phucbm/gfm · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._