How to show line numbers about eleventy-plugin-syntaxhighlight

[joshbuchea]

I'm working on an eleventy based starter and I was able to get line numbers working with these two steps:

1. Enable alwaysWrapLineHighlights in the eleventy syntax highlighting plugin options
2. Add CSS

Step 1

// .eleventy.js
// ...
eleventyConfig.addPlugin(pluginSyntaxHighlight, {
  alwaysWrapLineHighlights: true,
});

Step 2

/* styles.css */
pre {
  counter-reset: lineNumber;
}
code .highlight-line:before {
  -webkit-user-select: none;
  border-right: 1px solid #404040;
  color: #858585;
  content: counter(lineNumber);
  counter-increment: lineNumber;
  display: inline-block;
  font-variant-numeric: tabular-nums;
  margin-right: 1.2em;
  padding-right: 1.2em;
  text-align: right;
  width: 2.4em;
}

Screenshot

Your mileage may vary, remove any styles you don't need. Hope this helps someone! ✌️

[arielsalminen]

Wondering the same thing. Is there some way to utilize https://prismjs.com/plugins/line-numbers/ currently?

[falldowngoboone]

@joshbuchea, FYI, I'm seeing issues with this approach. I've documented them here: falldowngoboone/falldowngoboone-com#116.

[hauntedhost]

I'd love to use line numbers as well, any word on this? Let me know if I can help in any way.

[aaronstezycki]

Just to add a little extra sugar on top of @joshbuchea contribution for cases when you need horizontal scrolling. (Although this might break when you force line wrapping).

code .highlight-line:before {
  position: sticky; /*added*/
  left: 0; /*added*/
  background: var(--code-bg); /*added*/

  user-select: none;
  border-right: 1px solid hsla(0, 0%, 0%, 0.2);
  color: hsla(0, 100%, 100%, 0.6);
  content: counter(lineNumber);
  counter-increment: lineNumber;
  display: inline-block;
  font-variant-numeric: tabular-nums;
  margin-right: 1.2rem;
  text-align: center;
  width: 3em;
}

[danilopolani]

After a bit of testing this, I can assume it's not a stable solution. For example, in PHP code you will have a lot of troubles:

1. The <?php at the beginning is not wrapped inside highlight-line and you have to "whitelist" it along with code .highlight-line:before, that's fine.
2. The PHPDocs are... just weird. The whole comment is wrapped inside .token.comment, the opening tag (/**) and closing tag (*/) are not wrapped inside .highlight-line but the other lines are, generating an undesired result:

Adding .token.comment to code .highlight-line:before does not solve: the style is messed up, but above all the closing tag is not even counted:

---

I saw there's a PR from 2020 to implement line numbers without the messy JS code provided by PrismJS, I hope it can be considered: #24

[murtuzaalisurti]

the solution of @joshbuchea works for the most part but it's not reliable and stable. There are issues with the plugin in rendering span as mentioned by @falldowngoboone.

[switowski]

I'm working on an eleventy based starter and I was able to get line numbers working with these two steps:

1. Enable alwaysWrapLineHighlights in the eleventy syntax highlighting plugin options
2. Add CSS

Step 1

// .eleventy.js
// ...
eleventyConfig.addPlugin(pluginSyntaxHighlight, {
  alwaysWrapLineHighlights: true,
});

Step 2

/* styles.css */
pre {
  counter-reset: lineNumber;
}
code .highlight-line:before {
  -webkit-user-select: none;
  border-right: 1px solid #404040;
  color: #858585;
  content: counter(lineNumber);
  counter-increment: lineNumber;
  display: inline-block;
  font-variant-numeric: tabular-nums;
  margin-right: 1.2em;
  padding-right: 1.2em;
  text-align: right;
  width: 2.4em;
}

Screenshot

Your mileage may vary, remove any styles you don't need. Hope this helps someone! ✌️

Maybe this will help someone, as I've spend quite a bit of time trying to figure out how to enable showing line numbers only for specific code blocks, not site-wide (so without "step 1" that sets the alwaysWrapLineHighlights to true).

I went through different solutions including enabling markdown-it-attrs (which didn't work, because python {.myclass} wrapped in a code fence - three backticks - doesn't work and myclass is removed by this plugin) and markdown-it-container (where I wanted to wrap the whole <pre><code> in a div with a custom class, but that also didn't work, as inside <pre><code> I didn't have a separate class for each line of code because I didn't enable the alwaysWrapLineHighlights option).

Turns out this issue can be fixed with a small hack - suffix the language in the code block with "/" (but don't pass any number, unless you want to highlight some code). This enables highlighting lines and highlighting lines in turn enables the line wrapping. And don't forget to add the CSS from step 2 to make this work.

This markdown:

Renders like this: