more succinct syntax for code block line highlights
This commit is contained in:
		| @@ -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 | ||||
|   | ||||
| @@ -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() { | ||||
|   | ||||
| @@ -90,15 +90,13 @@ 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 ) | ||||
| 			} | ||||
| 			} | ||||
|  | ||||
| 		}, | ||||
|  | ||||
| @@ -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' ); | ||||
|  | ||||
| 			} | ||||
|  | ||||
| 		} | ||||
| 	} | ||||
|   | ||||
		Reference in New Issue
	
	Block a user