Open zachleat opened 4 years ago
How about Shiki? https://github.com/shikijs/shiki
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
If you want to use async you’ll need to do it inside of a shortcode or filter
Async docs here:
Liquid might support async filters too—honestly I’m not sure yet
Yes. Please add this.
The current highlighter is adding extra <br>
charactor while including from normal njk
file. And no way to remove this.
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):
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?
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
A couple of options: