TODO: Add Line Number Configuration via HTML Attributes

[taufik-nurrohman]

What I am thinking:

• data-ln-active → Determine line or range of line to be highlighted.
• data-ln-hide → Hide line number only for this block.
• data-ln-start → Determine the start number (default to 1).

[taufik-nurrohman]

Or just create a parser that can convert this kind of attribute value into object:

<code data-ln="active:4-12;hide:0;start:2;">

[taufik-nurrohman]

Possible value for active setting:

• Line number, e.g. active:4
• Line numbers, e.g. active:4,6,8
• Range number, e.g. active:4-8
• Range numbers, e.g. active:4-8,16-30

[taufik-nurrohman]

Nowdays, web browsers are smart enough to read linear-gradient() and calc() function in CSS. I would go with that!

Instead of splitting the code block line-by-line and then rebuild them into a <table> element (that is placed inside a <pre> tag 🤦🏻‍♂️), I would simply add more background images to the current block element using CSS gradients:

<pre><code class ="hljs">function foo() {
  return 'bar';
}

a
a
a
a</code></pre>

<style>
.hljs {
  display: block;
  padding: .5em;
  line-height: 1.2em;
  background-color: #eee;
  background-repeat:
    repeat-x,
    repeat-x;
  background-image:
    linear-gradient(#ddd calc(1.2em * 1), transparent calc(1.2em * 1), transparent),
    linear-gradient(#ddd calc(1.2em * 2), transparent calc(1.2em * 2), transparent);
  background-position:
    0 calc(0.5em + (1.2em * 1)),
    0 calc(0.5em + (1.2em * 5));
}
</style>