Remark-preset-gfm NPM

remark-preset-gfm

Remark preset for gfm (GitHub Favorite Markdown)

Features

Github break line
Gemoji
Svg head link anchor
Code highlight

Installation

npm install remark-preset-gfm
# or use yarn
yarn add remark-preset-gfm

Usage

const remark = require('remark')
const html = require('remark-html')
const gfm = require('remark-preset-gfm')

const markdownHtml = remark()
  .use(gfm)
  .use(html)
  .processAsync('markdown text')
  .toString()

const htmlOutput = `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <link rel="stylesheet" href="//unpkg.com/github-markdown-css">
  <link rel="stylesheet" href="//unpkg.com/highlight.js/styles/github.css">
  <style>
    .markdown-body {
      max-width: 65%;
      margin: 40px auto 30px;
    }
    @media screen and (max-width: 1200px) {
      .markdown-body {
        max-width: 78%;
      }
    }

    @media screen and (max-width: 700px) {
      .markdown-body {
        max-width: 90%;
        margin: 20px auto 10px;
      }
    }
    @media screen and (max-width: 400px) {
      .markdown-body {
        max-width: 98%;
        margin: 20px auto 10px;
      }
    }
  </style>
</head>
<body>
<div class="markdown-body">
  ${markdownHtml}
</div>
</body>
</html>
`

github-markdown-css - The minimal amount of CSS to replicate the GitHub Markdown style
Highlight.js github style

Contributing

Fork it!
Create your new branch:
git checkout -b feature-new or git checkout -b fix-which-bug
Start your magic work now
Make sure npm test passes
Commit your changes:
git commit -am 'feat: some description (close #123)' or git commit -am 'fix: some description (fix #123)'
Push to the branch: git push
Submit a pull request :)