remark-react-lowlight

Syntax highlighting for remark-react through lowlight

Usage:

``javascript
...

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


* Juho Vepsäläinen - Creator and former owner of this project.
* Ryota - Fixed props` for the lowlight component.
* Henrik Lundgren - Fixed option property test, allowed skipping inline code tags.
* Shingo Sato - Patch duplicate pre tag.

License

MIT.