Browse Source

more succinct syntax for code block line highlights

Hakim El Hattab 5 years ago
parent
commit
8690858b6f
4 changed files with 11 additions and 18 deletions
  1. 3 2
      css/reveal.css
  2. 2 1
      css/reveal.scss
  3. 1 1
      demo.html
  4. 5 14
      plugin/highlight/highlight.js

+ 3 - 2
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

+ 2 - 1
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;
 }
 
 

+ 1 - 1
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() {

+ 5 - 14
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' );
-
-			}
 
 		}
 	}