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 11ty/eleventy#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

[dave-kennedy]

I think Highlight.js does a much better job than Prism. Very easy to setup too. Just npm i highlight.js then update your config as follows:

import hljs from 'highlight.js';

export default function (eleventy) {
  eleventy.amendLibrary('md', md => {
    md.options.highlight = (str, lang) => {
      if (lang && hljs.getLanguage(lang)) {
        try {
          return hljs.highlight(str, { language: lang }).value;
        } catch (__) {}
      }

      return ''; // use external default escaping
    };
  });
};

Finally, add a theme, e.g.:

<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/monokai.min.css" rel="stylesheet" />

Browse the themes here: https://highlightjs.org/demo

[Snapstromegon]

Since my last post here, shiki did a 1.0 release and more and in my opinion this is right now the bar to beat as it behaves most like VSCode with theming and highlighting / language support. It also offers a fairly good flexibility and plugin system with good features out of the box and even though I didn't do the major upgrade, because my blog has some incompatible custom things, I think that this is right now the best was forward.

Also Shiki natively supports dual-themeing (so light/dark), is easy to modify/adapt and to include into 11ty. It's also used in other SSGs like Astro.