Refactors Liquid syntax highlighters to add line highlights.

Usage (ranges are space separated):

{% highlight js 1,4-6 %}
One range
Adds `highlight-line-active` to lines 1,4,5,6

{% highlight js 3-4 -1 %}
Two ranges (add/remove), remove is N/A
Adds `highlight-line-add` to lines 3,4

{% highlight js -1 3-4 %}
Two ranges (add/remove), add is N/A
Adds `highlight-line-remove` to lines 3,4

{% highlight js 3-4 5,8-10 %}
Two ranges, both are used
Adds `highlight-line-add` to lines 3-4
Adds `highlight-line-remove` to lines 5,8,9,10
This commit is contained in:
Zach Leatherman
2018-01-26 22:12:46 -06:00
parent e408e2fe50
commit 963b5d46e6
8 changed files with 164 additions and 72 deletions

View File

@ -73,6 +73,23 @@ pre {
margin: .5em 0;
background-color: #f6f6f6;
}
.highlight-line {
padding: 0.125em 1em; /* 2px 16px /16 */
}
.highlight-line-isdir {
color: #b0b0b0;
background-color: #222;
}
.highlight-line-active {
background-color: #444;
background-color: hsla(0, 0%, 27%, .8);
}
.highlight-line-add {
background-color: #45844b;
}
.highlight-line-remove {
background-color: #902f2f;
}
/* Header */
.home {

View File

@ -17,7 +17,7 @@ code[class*="language-"], pre[class*="language-"] {
color: #f8f8f2;
}
pre[class*="language-"] {
padding: 1em;
padding: 1.5em 0;
margin: .5em 0;
overflow: auto;
}