aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorHakim El Hattab <hakim.elhattab@gmail.com>2019-03-11 15:48:03 +0100
committerHakim El Hattab <hakim.elhattab@gmail.com>2019-03-11 15:48:03 +0100
commit8690858b6f314fe56942dc2cdd9cc6984f43b830 (patch)
treee2cac3fbc494516f3f5899df2fa06af7a281c60c
parent5adc2032c0d9d49a8b784d4a4f271999ad7e63a9 (diff)
downloadfreenode-live-2017-presentation-8690858b6f314fe56942dc2cdd9cc6984f43b830.tar
freenode-live-2017-presentation-8690858b6f314fe56942dc2cdd9cc6984f43b830.tar.gz
more succinct syntax for code block line highlights
-rw-r--r--css/reveal.css5
-rw-r--r--css/reveal.scss3
-rw-r--r--demo.html2
-rw-r--r--plugin/highlight/highlight.js19
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;
}
diff --git a/demo.html b/demo.html
index ac273d5..6b26880 100644
--- a/demo.html
+++ b/demo.html
@@ -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' );
-
- }
}
}