Skip to content
Syntax highlighting for remark-react through lowlight (MIT)
JavaScript
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 Update from react/React.PropTypes to prop-types/PropTypes Aug 19, 2017
src
test
.babelrc
.eslintignore Set up .eslintignore Apr 8, 2016
.eslintrc
.gitignore Initial commit Apr 8, 2016
.travis.yml chore: Set up travis Apr 3, 2017
LICENSE
README.md Update schema creation Sep 6, 2017
package-lock.json 0.7.0 Oct 2, 2017
package.json 0.7.0 Oct 2, 2017

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.

You can’t perform that action at this time.