Code block: Add line numbers

[falldowngoboone]

Part of #122.

Looks like there's an issue with the Eleventy syntax highlighting plugin. I can add numbers by wrapping every line in a highlight:

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

Then I can use the resulting spans to add numbers via CSS counters:

// _vendor-prism-fdgb.scss

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;
}

However, the issue is some brs are being wrapped in a new span, causing the line highlighting to get all fouled up. I've seen this issue so far in scss blocks with a break between selectors:

input:invalid,
[aria-invalid=true] {
  border-color: hsl(351, 100%, 27%);
}

html blocks that break to multiple lines:

<input id="password" type="password" name="password" 
        aria-describedby="password-error" />

jsx blocks with nested JavaScript in brackets:

export default function List({ items = [] }) {
  return (
    <ul class="styled-list">
      {Boolean(items.length) &&
        items.map((item) => <li class="styled-item" {...item} />)}
    </ul>
  );
}

I've noticed changing jsx to js fixes that issue. Not sure about the rest. I would love to have line numbers, but I'm not sure that's currently possible with the Eleventy plugin.

[falldowngoboone]

Given the fact that I want to add other features that will require JavaScript, I'm backing out of the Eleventy Syntax Highlighting plugin.