jan/revproxy-presentation
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

more succinct syntax for code block line highlights

Browse source
This commit is contained in:
Hakim El Hattab 2019-03-11 15:48:03 +01:00
parent 5adc2032c0
commit 8690858b6f
4 changed files with 11 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
css/reveal.css
View file

@ -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

3
css/reveal.scss
View file

@ -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;
} }

2
demo.html
View file

@ -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() {

19
plugin/highlight/highlight.js
View file

@ -90,14 +90,12 @@ 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' );
}
} }
} }