Bringing in a third-party library for easy, reliable line numbering
Highlight Code Block Lines In Eleventy with Shiki Twoslash
Markdown Code Block Styling, Part 2
This article is part of a series on styling markdown code blocks.
The first, Numbered Code Block Lines in Eleventy with Shiki Twoslash, covers line numbers.
This second covers line highlighting.
The third will cover styling added lines, deleted lines, and focused lines, in combination with numbered and/or highlighted lines.
The code block markup generated by Eleventy by default doesn’t lend itself to line highlighting. Neither does the markup generated by Eleventy’s first-party syntax highlighting plugin. The article Numbered Code Block Lines in Eleventy with Shiki Twoslash goes into details.
Happily, remark-shiki-twoslash, switching to which made code block line numbering possible (see Numbered Code Block Lines in Eleventy with Shiki Twoslash), supports line highlighting! For Eleventy v2 there’s the remark-shiki-twoslash
plugin eleventy-plugin-shiki-twoslash
. For Eleventy v3 you can use remark-shiki-twoslash
with a small wrapper in your .eleventy.js
file; see shikijs/twoslash#193 for details.
Shiki Twoslash, not to be confused with Shiki Twoslash
As of this writing, there are two Shiki Twoslashes, one under the shikijs org and one under the twoslashes org. remark-shiki-twoslash
uses shikijs/twoslash.
Not just for Eleventy
There are remark-shiki-twoslash
plugins for Markdown-It, Docusaurus, Eleventy, Gatsby, Hexo, and VuePress. Learn more at https://github.com/shikijs/twoslash.
Heads up
- For this to work, you must specify a valid language on the opening fence.
- At least with
eleventy-plugin-shiki-twoslash
, there must be at least one character after the closing}
(see shikijs/twoslash#194) - Shiki’s line highlighting is zero-indexed. To highlight line x, specify
x - 1
.
In Shiki Twoslash, you specify lines to highlight in curly brackets {}
on the opening fence. Multiple values are supported, as are ranges. The specified lines get the class highlight
; all others get the class dim
.
generates something like
Then style with CSS
to get the look you’re going for
Articles You Might Enjoy
-
Numbered Code Block Lines in Eleventy with Shiki Twoslash
-
-