Numbered Code Block Lines in Eleventy with Shiki Twoslash
Bringing in a third-party library for easy, reliable line numbering
Highlight Code Block Lines In Eleventy with Shiki Twoslash
Eleventy Markdown code block line highlighting made simple
Eleventy Markdown code block line highlighting made simple
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.
md
```text {0,2-3}
highlighted. note that that's `text{0,2-3}·` not `text{0,2-3}`!
not highlighted
highlighted
highlighted
not highlighted
```generates something like
html
<pre class="shiki">
<div class="language-id">text</div>
<div class="code-container">
<code>
<div class="line highlight">highlighted. note that that's `md{0,2-3}·` not `md{0,2-3}`!</div>
<div class="line dim">not highlighted</div>
<div class="line highlight">highlighted</div>
<div class="line highlight">highlighted</div>
<div class="line dim">not highlighted</div>
</code>
</div>
</pre>Then style with CSS
css
.code-container .line.highlight {
/* styles */
}to get the look you’re going for
text
