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!

Atom packages: #language

npm install remark-highlights

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*/);

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.

Allows you to change the prefix of language scope CSS class.

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"}.

Allows you to append filename before the <pre> tag.

Allows you to append icon class before the <pre> tag. This will require an Atom theme that support icons.

Object to specify a class for the <pre> tag surrounding the code. Set to false to remove the class completely.

Allows to wrap the all result (including filename, icon and code).

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