Syntax highlighting for remark-react through lowlight (MIT)
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
src
test
.babelrc
.eslintignore
.eslintrc
.gitignore
.travis.yml
LICENSE
README.md
package-lock.json
package.json

README.md

build status bitHound Score Dependency Status

remark-react-lowlight

Syntax highlighting for remark-react through lowlight

Usage:

...

import remark from 'remark';
import reactRenderer from 'remark-react';
import RemarkLowlight from 'remark-react-lowlight';

import js from 'highlight.js/lib/languages/javascript';

import githubSchema from 'hast-util-sanitize/lib/github.json';

const schema = Object.assign({}, githubSchema, {
  attributes: Object.assign({}, githubSchema.attributes, {
    code: [
      ...(githubSchema.attributes.code || []),
      'className'
    ]
  })
});

...
{remark().use(reactRenderer, {
  sanitize: schema,
  remarkReactComponents: {
    code: RemarkLowlight({
      js
    })
  }
}).processSync(readme).contents}
...

Notes

  • The default santization schema (GitHub's) excludes className, but we want those hljs-* classes for our highlighting! Hence the custom object passed to santization.
  • You'll need stylings for the classes that Highlight.js adds. You can choose from a bunch bunch of pre-made stylesheets.

Contributors

License

MIT.