![](/posts/highlight-code-block-lines-in-eleventy-with-shiki-twoslash/w4txihCK9--240.jpeg)
Bringing in a third-party library for easy, reliable line numbering
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
eleventy-plugin-shiki-twoslash
, there must be at least one character after the closing }
(see shikijs/twoslash#194)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 highlightedhighlightedhighlightednot highlighted```
md
```text {0,2-3}highlighted. note that that's `text{0,2-3}·` not `text{0,2-3}`!not highlightedhighlightedhighlightednot 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>
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 */}
css
.code-container .line.highlight {/* styles */}
to get the look you’re going for
text
highlightednot highlightedhighlightedhighlightednot highlighted
text
highlightednot highlightedhighlightedhighlightednot highlighted
Numbered Code Block Lines in Eleventy with Shiki Twoslash
Bringing in a third-party library for easy, reliable line numbering
Watch for specific added nodes with MutationObserver
MutationObserver makes it easy to watch for the addition of specific nodes, if you know where to drill.