From 8690858b6f314fe56942dc2cdd9cc6984f43b830 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 11 Mar 2019 15:48:03 +0100 Subject: more succinct syntax for code block line highlights --- css/reveal.css | 5 +++-- css/reveal.scss | 3 ++- demo.html | 2 +- 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; } diff --git a/demo.html b/demo.html index ac273d5..6b26880 100644 --- a/demo.html +++ b/demo.html @@ -234,7 +234,7 @@

Pretty Code

-

+					

 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' );
-
-			}
 
 		}
 	}
-- 
cgit v1.2.3