diff options
author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2019-03-11 15:48:03 +0100 |
---|---|---|
committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2019-03-11 15:48:03 +0100 |
commit | 8690858b6f314fe56942dc2cdd9cc6984f43b830 (patch) | |
tree | e2cac3fbc494516f3f5899df2fa06af7a281c60c | |
parent | 5adc2032c0d9d49a8b784d4a4f271999ad7e63a9 (diff) | |
download | perl-software-in-gnu-guix-8690858b6f314fe56942dc2cdd9cc6984f43b830.tar perl-software-in-gnu-guix-8690858b6f314fe56942dc2cdd9cc6984f43b830.tar.gz |
more succinct syntax for code block line highlights
-rw-r--r-- | css/reveal.css | 5 | ||||
-rw-r--r-- | css/reveal.scss | 3 | ||||
-rw-r--r-- | demo.html | 2 | ||||
-rw-r--r-- | plugin/highlight/highlight.js | 19 |
4 files changed, 11 insertions, 18 deletions
diff --git a/css/reveal.css b/css/reveal.css index 12a1d43..c6ab0b1 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -1442,7 +1442,7 @@ body { .reveal .hljs table { margin: initial; } -.reveal .hljs.highlight-lines tr:not(.highlight-line) { +.reveal .hljs[data-line-numbers]:not([data-line-numbers=""]) tr:not(.highlight-line) { opacity: 0.25; } .reveal .hljs-ln-code, @@ -1451,7 +1451,8 @@ body { border: 0; } .reveal .hljs-ln-numbers { - padding-right: 10px; } + padding-right: 10px; + text-align: right; } /********************************************* * ROLLING LINKS diff --git a/css/reveal.scss b/css/reveal.scss index 2592f4a..9b0ddd6 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -1577,7 +1577,7 @@ $controlsArrowAngleActive: 36deg; margin: initial; } -.reveal .hljs.highlight-lines tr:not(.highlight-line) { +.reveal .hljs[data-line-numbers]:not([data-line-numbers=""]) tr:not(.highlight-line) { opacity: 0.25; } @@ -1589,6 +1589,7 @@ $controlsArrowAngleActive: 36deg; .reveal .hljs-ln-numbers { padding-right: 10px; + text-align: right; } @@ -234,7 +234,7 @@ <section> <h2>Pretty Code</h2> - <pre><code class="hljs line-numbers" data-trim data-highlight-lines="4,8-9"> + <pre><code class="hljs" data-trim data-line-numbers="4,8-9"> import React, { useState } from 'react'; function Example() { diff --git a/plugin/highlight/highlight.js b/plugin/highlight/highlight.js index 0c0ce5d..49ef64b 100644 --- a/plugin/highlight/highlight.js +++ b/plugin/highlight/highlight.js @@ -90,14 +90,12 @@ var RevealHighlight = (function() { hljs.highlightBlock( block ); - if( block.classList.contains( 'line-numbers' ) ) { + if( block.hasAttribute( 'data-line-numbers' ) ) { hljs.lineNumbersBlock( block ); - if( block.hasAttribute( 'data-highlight-lines' ) ) { - // hljs.lineNumbersBlock runs async code on the next cycle, - // so we need to do the same to execute after it's done - setTimeout( RevealHighlight.highlightLines.bind( this, block ), 0 ) - } + // hljs.lineNumbersBlock runs async code on the next cycle, + // so we need to do the same to execute after it's done + setTimeout( RevealHighlight.highlightLines.bind( this, block ), 0 ) } }, @@ -115,12 +113,10 @@ var RevealHighlight = (function() { */ highlightLines: function( block, linesToHighlight ) { - linesToHighlight = linesToHighlight || block.getAttribute( 'data-highlight-lines' ); + linesToHighlight = linesToHighlight || block.getAttribute( 'data-line-numbers' ); if( typeof linesToHighlight === 'string' ) { - block.classList.add( 'highlight-lines' ); - linesToHighlight.split( ',' ).forEach( function( lineNumbers ) { lineNumbers = lineNumbers.split( '-' ) @@ -135,11 +131,6 @@ var RevealHighlight = (function() { } ); } - else { - - block.classList.remove( 'highlight-lines' ); - - } } } |