Add support for line numbers

[andeersg]

I have tried for a while to use the line numbers plugin provided by Prism in Eleventy. But it's to heavily dependent on the browser so it's not possible.

Next I tried to create a plugin that could be used in plugin options for this one. But that also was unsuccessful because of the limited Prism hooks that are used by node.js.

So then I looked at original line numbers plugin and came up with this solution to add support in Eleventy.

The function LineNumbers tries to do the same as the original Prism plugin, it creates a <span> with a span per line as children.

Then I tweaked markdownSyntaxHighlight.js to use it and append the spans to the code.

This works really good with the CSS from Prism:

.line-numbers {
  .line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.8em;
    width: 3em;
    letter-spacing: -1px;
    border-right: 1px solid #999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
  }
  .line-numbers-rows > span::before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
}
}
pre[class*="language-"].line-numbers {
  position: relative;
  padding-left: 3.8em;
  counter-reset: linenumber;
}
pre[class*="language-"].line-numbers > code {
  position: relative;
  white-space: inherit;
}

Example:

I'm not sure if this is the best approach, and I'm not sure what the best way to make it optional is. But I figured it was easier to create this PR to show my solution. It would fix #10.

[henrik]

I'm not sure what the best way to make it optional is

FWIW, when I used Octopress, the syntax was e.g.

``` js linenos:false

to skip line numbers.