Look at using a heftier but more robust syntax highlighter

[zachleat]

A couple of options:

• https://github.com/atom/highlights
• One for Gatsby using VSCode: https://github.com/andrewbranch/gatsby-remark-vscode

[codechips]

How about Shiki? https://github.com/shikijs/shiki

[codechips]

BTW, I tried to implement it in my own Eleventy setup, but Shiki is async and Eleventy config does not support async functions. Any ideas on how to tackle this?

Also, don't know if people have seen this one. I've switched to it https://github.com/b-kelly/eleventy-plugin-highlightjs

[zachleat]

If you want to use async you’ll need to do it inside of a shortcode or filter

Async docs here:

• https://www.11ty.dev/docs/shortcodes/
• https://www.11ty.dev/docs/languages/nunjucks/#asynchronous-nunjucks-filters
• https://www.11ty.dev/docs/languages/javascript/

Liquid might support async filters too—honestly I’m not sure yet

[zachleat]

See also https://github.com/11ty/eleventy/issues/614

[surjithctly]

Yes. Please add this.

The current highlighter is adding extra <br> charactor while including from normal njk file. And no way to remove this.

[Snapstromegon]

I've spend yesterday evening playing around with shiki in elventy and I must say, that I think shiki is just awesome.

It's really barebones and its aproach is completely different compared to prismjs and it still has some rough edges, but with about 50 lines of JS (11ty config) + 50 lines of CSS I was able to reproduce the following features of torchlight.dev (which was mentioned as a potential replacement in #74):

• focus (blurring everything else except on hover)
• highlight
• line numbers
• add/remove/changed markers
• correct combination of the features
• line numbers and add/remove markers working together
• custom classes per line

I just made it work with annotations for each line, but it should be easy to adapt for the range one. Currently it's just a test, but I want to expand on this one.

Here is an example screenshot with some proof of concept styling:

@codechips I also solved your problem with the async getHighligher() function! Just use the "eleventy.before" event which can execute and await an async function.

const markdownIt = require("markdown-it");
const shiki = require("shiki");

module.exports = (eleventyConfig) => {
  // Move highlighter to this scope, so it's available everywhere
  let highlighter;

  // Async setup of shiki highlighter
  eleventyConfig.on("eleventy.before", async () => {
    highlighter = await shiki.getHighlighter({ theme: "dark-plus" });
  });

  // build markdownIt options
  let options = {
    html: true,
    highlight: (code, lang) => highlighter.codeToHtml(code, {lang}),
  };

  // switch to custom markdownIt
  eleventyConfig.setLibrary("md", markdownIt(options));
};

For v2.x.x it's even shorter:

const markdownIt = require("markdown-it");
const shiki = require("shiki");

module.exports = (eleventyConfig) => {
  eleventyConfig.on("eleventy.before", async () => {
    const highlighter = await shiki.getHighlighter({ theme: "dark-plus" });
    eleventyConfig.amendLibrary("md", (mdLib) =>
      mdLib.set({
        highlight: (code, lang) => highlighter.codeToHtml(code, { lang }),
      })
    );
  });

  // This is a hack to let eleventy know that we touch that library
  eleventyConfig.amendLibrary("md", () => {});
};

@zachleat Could you please check if the "hack" above is a bug and/or okay to use?

[tarasis]

I'd definitely love to see something else used than PrismJS, Shiki definitely looks interesting and I wish I'd come across it the other week. @Snapstromegon your sample output looks promising.

I've released a WIP plugin using the Chroma library written in Go. It supports line numbers, highlighting range of lines, tab width, and custom color for highlighted lines. (I think I'll add the focus mode as an experiment, also note I am inlining the code styling atm)

But it's slow (finding about 7-8 times slower the PrismJS & HighlightJS on the same demo files) because each code block is a call out to a Go executable. . I want to look and see if there is a JavaScript→Go bridge