Turn Markdown text into GitHub Flavored Markdown (GFM) with light/dark code syntax highlight.
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 with npm:
npm i @phucbm/gfm
# webpack loader for markdown
npm i markdown-loader
# styling for GFM
npm i github-markdown-cssConvert Markdown format using markdown-loader by markedjs
Say our document example.md contains:
View example.md
# 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] doneTo be able to read the .md file format, add markdown-loader to
your webpack.config.js
// 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:
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@phucbm/gfm</title>
<style>
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;
}
}
</style>
</head>
<body class="markdown-body">
<div class="container">
<div id="content"></div>
</div>
</body>
</html>See how it looks like.
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 "@phucbm/gfm";
// insert HTML
// code highlight (only run once the HTML as loaded)
highlightCodeSyntax().then();Info Check the folder
examplefor demo files.
Loop through all <code> in the DOM and replace with highlighted code syntax.
codeBlocks- HTMLElement, optional.
{Promise<HTMLElement[]>}
Clone this repo, then:
# install
npm i
# run dev server
npm run devMIT © Phuc Bui