more succinct syntax for code block line highlights
This commit is contained in:
parent
5adc2032c0
commit
8690858b6f
|
@ -1442,7 +1442,7 @@ body {
|
||||||
.reveal .hljs table {
|
.reveal .hljs table {
|
||||||
margin: initial; }
|
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; }
|
opacity: 0.25; }
|
||||||
|
|
||||||
.reveal .hljs-ln-code,
|
.reveal .hljs-ln-code,
|
||||||
|
@ -1451,7 +1451,8 @@ body {
|
||||||
border: 0; }
|
border: 0; }
|
||||||
|
|
||||||
.reveal .hljs-ln-numbers {
|
.reveal .hljs-ln-numbers {
|
||||||
padding-right: 10px; }
|
padding-right: 10px;
|
||||||
|
text-align: right; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* ROLLING LINKS
|
* ROLLING LINKS
|
||||||
|
|
|
@ -1577,7 +1577,7 @@ $controlsArrowAngleActive: 36deg;
|
||||||
margin: initial;
|
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;
|
opacity: 0.25;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1589,6 +1589,7 @@ $controlsArrowAngleActive: 36deg;
|
||||||
|
|
||||||
.reveal .hljs-ln-numbers {
|
.reveal .hljs-ln-numbers {
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -234,7 +234,7 @@
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Pretty Code</h2>
|
<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';
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
function Example() {
|
function Example() {
|
||||||
|
|
|
@ -90,15 +90,13 @@ var RevealHighlight = (function() {
|
||||||
|
|
||||||
hljs.highlightBlock( block );
|
hljs.highlightBlock( block );
|
||||||
|
|
||||||
if( block.classList.contains( 'line-numbers' ) ) {
|
if( block.hasAttribute( 'data-line-numbers' ) ) {
|
||||||
hljs.lineNumbersBlock( block );
|
hljs.lineNumbersBlock( block );
|
||||||
|
|
||||||
if( block.hasAttribute( 'data-highlight-lines' ) ) {
|
|
||||||
// hljs.lineNumbersBlock runs async code on the next cycle,
|
// hljs.lineNumbersBlock runs async code on the next cycle,
|
||||||
// so we need to do the same to execute after it's done
|
// so we need to do the same to execute after it's done
|
||||||
setTimeout( RevealHighlight.highlightLines.bind( this, block ), 0 )
|
setTimeout( RevealHighlight.highlightLines.bind( this, block ), 0 )
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -115,12 +113,10 @@ var RevealHighlight = (function() {
|
||||||
*/
|
*/
|
||||||
highlightLines: function( block, linesToHighlight ) {
|
highlightLines: function( block, linesToHighlight ) {
|
||||||
|
|
||||||
linesToHighlight = linesToHighlight || block.getAttribute( 'data-highlight-lines' );
|
linesToHighlight = linesToHighlight || block.getAttribute( 'data-line-numbers' );
|
||||||
|
|
||||||
if( typeof linesToHighlight === 'string' ) {
|
if( typeof linesToHighlight === 'string' ) {
|
||||||
|
|
||||||
block.classList.add( 'highlight-lines' );
|
|
||||||
|
|
||||||
linesToHighlight.split( ',' ).forEach( function( lineNumbers ) {
|
linesToHighlight.split( ',' ).forEach( function( lineNumbers ) {
|
||||||
|
|
||||||
lineNumbers = lineNumbers.split( '-' )
|
lineNumbers = lineNumbers.split( '-' )
|
||||||
|
@ -135,11 +131,6 @@ var RevealHighlight = (function() {
|
||||||
} );
|
} );
|
||||||
|
|
||||||
}
|
}
|
||||||
else {
|
|
||||||
|
|
||||||
block.classList.remove( 'highlight-lines' );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user