first version of multi-step code highlights

xl-sr · Apr 5, 2019 · 7eb2cec · 7eb2cec
1 parent c636b88
commit 7eb2cec
Show file tree

Hide file tree

Showing 5 changed files with 166 additions and 19 deletions.
diff --git a/css/reveal.css b/css/reveal.css
@@ -1456,6 +1456,16 @@ body {
 .reveal .hljs[data-line-numbers]:not([data-line-numbers=""]) tr:not(.highlight-line) {
   opacity: 0.4; }
 
+.reveal .hljs .highlight-line .hljs-ln-numbers {
+  font-weight: 600; }
+
+.reveal .hljs:not(:first-child).fragment {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  box-sizing: border-box; }
+
 /*********************************************
  * ROLLING LINKS
  *********************************************/

diff --git a/css/reveal.scss b/css/reveal.scss
@@ -1594,6 +1594,18 @@ $controlsArrowAngleActive: 36deg;
 	opacity: 0.4;
 }
 
+.reveal .hljs .highlight-line .hljs-ln-numbers  {
+	font-weight: 600;
+}
+
+.reveal .hljs:not(:first-child).fragment {
+	position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    box-sizing: border-box;
+}
+
 
 /*********************************************
  * ROLLING LINKS

diff --git a/demo.html b/demo.html
@@ -241,7 +241,7 @@ <h2>Iframe Backgrounds</h2>
 
 				<section>
 					<h2>Pretty Code</h2>
-					<pre><code class="hljs" data-trim data-line-numbers="4,8-11">
+					<pre><code class="hljs" data-trim data-line-numbers="4|9|4,8-11">
 import React, { useState } from 'react';
 
 function Example() {
@@ -412,7 +412,7 @@ <h1>THE END</h1>
 				dependencies: [
 					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
-					{ src: 'plugin/highlight/highlight.js', async: true },
+					{ src: 'plugin/highlight/highlight.js' },
 					{ src: 'plugin/search/search.js', async: true },
 					{ src: 'plugin/zoom-js/zoom.js', async: true },
 					{ src: 'plugin/notes/notes.js', async: true }

diff --git a/index.html b/index.html
@@ -40,8 +40,8 @@
 				dependencies: [
 					{ src: 'plugin/markdown/marked.js' },
 					{ src: 'plugin/markdown/markdown.js' },
-					{ src: 'plugin/notes/notes.js', async: true },
-					{ src: 'plugin/highlight/highlight.js', async: true }
+					{ src: 'plugin/highlight/highlight.js' },
+					{ src: 'plugin/notes/notes.js', async: true }
 				]
 			});
 		</script>

diff --git a/plugin/highlight/highlight.js b/plugin/highlight/highlight.js