Highlight Code Block Lines In Eleventy with Shiki Twoslash

Eleventy Markdown code block line highlighting made simple
Physiognomy: key to explaining lines of the forehead
Physiognomy: key to explaining lines of the forehead. Public Domain Mark. Source: Wellcome Collection.

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
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
```
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
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
css
.code-container .line.highlight {
  /* styles */
}
css
.code-container .line.highlight {
  /* styles */
}

to get the look you’re going for

text
highlighted
not highlighted
highlighted
highlighted
not highlighted
text
highlighted
not highlighted
highlighted
highlighted
not highlighted

Articles You Might Enjoy

Or Go To All Articles