README
remark-highlights
This remark plugin allows you to highlight code snippets in markdown files using Atom highlights.
🎉 It supports all the language grammar files that are made for Atom!
Install
npm install remark-highlights
Usage
const remark = require("remark");
const highlights = require("remark-highlights");
const html = require("remark-html");
remark()
.use(highlights, {
// Additional languages, useful if your language is not supported by default
additionalLangs: ["language-rust"]
// ...more option in docs below
})
.use(html)
.process(/*your content*/);
Options
(default: additionalLangs: Array<string>[]
)
If you want to use a language that is not handled by default,
you have to install a package yourself
E.g: to use Rust, you install language-rust
package:
npm install language-rust
Then provide the name of the package to this option.
(default: scopePrefix: stringsyntax--
)
Allows you to change the prefix of language scope CSS class.
(default: codeWrapfalse
)
Allows you to add an additional wrapper around the <pre>
tag with some attributes.
You can send an object like {className: "myclass"}
.
Passing true
will use {className: "highlight"}
.
(default: showFileNamefalse
)
Allows you to append filename before the <pre>
tag.
(default: showFileIconfalse
)
Allows you to append icon class before the <pre>
tag.
This will require an Atom theme that support icons.
(default: preClass"editor editor-colors"
(highlights default))
Object to specify a class for the <pre>
tag surrounding the code.
Set to false
to remove the class completely.
(default: wrapAllfalse
)
Allows to wrap the all result (including filename, icon and code).
Adjust syntax theme (CSS styles/colors)
This highlighter is using Atom highlights. So to get a nice CSS theme, you can just choose an Atom theme
Note: Atom themes are less files so a compilation is required.
➡️ The easiest way to quickly get an CSS is to rely on atom-syntax-theme-to-highlights-css.
npx atom-syntax-theme-to-highlights-css --clipboard <repository>
Example
npx atom-syntax-theme-to-highlights-css --clipboard https://github.com/simurai/duotone-dark-sea-syntax