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

Enable alwaysWrapLineHighlights in the eleventy syntax highlighting plugin options

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:

How to show line numbers #10

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions