Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/phucbm/gfm
Turn markdown text into GitHub Flavoured Markdown with light/dark code syntax highlight.
https://github.com/phucbm/gfm
gfm html markdown mdast
Last synced: 25 days ago
JSON representation
Turn markdown text into GitHub Flavoured Markdown with light/dark code syntax highlight.
- Host: GitHub
- URL: https://github.com/phucbm/gfm
- Owner: phucbm
- License: mit
- Created: 2023-10-07T09:06:52.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-18T03:48:45.000Z (about 1 year ago)
- Last Synced: 2024-09-23T13:07:31.211Z (about 2 months ago)
- Topics: gfm, html, markdown, mdast
- Language: JavaScript
- Homepage: https://phucbm.github.io/gfm/
- Size: 2.05 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @phucbm/gfm
[](https://github.com/phucbm/gfm/actions/workflows/pages/pages-build-deployment)
[](https://github.com/phucbm/gfm/releases/latest)
[](https://www.npmjs.com/package/@phucbm/gfm)
[](https://github.com/phucbm/gfm/blob/main/LICENSE)
> 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:
View example.md
```markdown
# 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`](https://www.npmjs.com/package/markdown-loader) to
your `webpack.config.js`
```javascript
// webpack.config.js
export default {
module: {
rules: [
// Markdown
{
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);
```
...with the `index.html` as below
View index.html
```html
@phucbm/gfm
body {box-sizing:border-box; margin:0;}
.container {
min-width:300px;
max-width:980px;
margin-left:auto;
margin-right:auto;
padding:45px;
}
@media (max-width:767px) {
.container {
padding:15px;
}
}
```
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 "@phucbm/gfm";
// 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 `` in the DOM and replace with highlighted code syntax.
###### Parameters
- `codeBlocks` - HTMLElement, optional.
###### Return
`{Promise}`
## Development
Clone this repo, then:
```shell
# install
npm i
# run dev server
npm run dev
```
## License
MIT © [Phuc Bui](https://github.com/phucbm)