highlight plugin updates; support for line numbers and highlighting specific lines
This commit is contained in:
parent
b6e136776a
commit
cef864a7be
@ -1436,6 +1436,23 @@ body {
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
visibility: hidden; }
|
visibility: hidden; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* CODE HIGHLGIHTING
|
||||||
|
*********************************************/
|
||||||
|
.reveal .hljs table {
|
||||||
|
margin: initial; }
|
||||||
|
|
||||||
|
.reveal .hljs.highlight-lines tr:not(.highlight-line) {
|
||||||
|
opacity: 0.25; }
|
||||||
|
|
||||||
|
.reveal .hljs-ln-code,
|
||||||
|
.reveal .hljs-ln-numbers {
|
||||||
|
padding: 0;
|
||||||
|
border: 0; }
|
||||||
|
|
||||||
|
.reveal .hljs-ln-numbers {
|
||||||
|
padding-right: 10px; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* ROLLING LINKS
|
* ROLLING LINKS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
@ -1549,7 +1549,6 @@ $controlsArrowAngleActive: 36deg;
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PLAYBACK COMPONENT
|
* PLAYBACK COMPONENT
|
||||||
*********************************************/
|
*********************************************/
|
||||||
@ -1570,6 +1569,29 @@ $controlsArrowAngleActive: 36deg;
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* CODE HIGHLGIHTING
|
||||||
|
*********************************************/
|
||||||
|
|
||||||
|
.reveal .hljs table {
|
||||||
|
margin: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal .hljs.highlight-lines tr:not(.highlight-line) {
|
||||||
|
opacity: 0.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal .hljs-ln-code,
|
||||||
|
.reveal .hljs-ln-numbers {
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal .hljs-ln-numbers {
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* ROLLING LINKS
|
* ROLLING LINKS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
34
demo.html
34
demo.html
@ -199,16 +199,16 @@
|
|||||||
</section>
|
</section>
|
||||||
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">
|
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">
|
||||||
<h2>Image Backgrounds</h2>
|
<h2>Image Backgrounds</h2>
|
||||||
<pre><code class="hljs"><section data-background="image.png"></code></pre>
|
<pre><code class="hljs html"><section data-background="image.png"></code></pre>
|
||||||
</section>
|
</section>
|
||||||
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
|
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
|
||||||
<h2>Tiled Backgrounds</h2>
|
<h2>Tiled Backgrounds</h2>
|
||||||
<pre><code class="hljs" style="word-wrap: break-word;"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></code></pre>
|
<pre><code class="hljs html" style="word-wrap: break-word;"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></code></pre>
|
||||||
</section>
|
</section>
|
||||||
<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-color="#000000">
|
<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-color="#000000">
|
||||||
<div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
|
<div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
|
||||||
<h2>Video Backgrounds</h2>
|
<h2>Video Backgrounds</h2>
|
||||||
<pre><code class="hljs" style="word-wrap: break-word;"><section data-background-video="video.mp4,video.webm"></code></pre>
|
<pre><code class="hljs html" style="word-wrap: break-word;"><section data-background-video="video.mp4,video.webm"></code></pre>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section data-background="http://i.giphy.com/90F8aUepslB84.gif">
|
<section data-background="http://i.giphy.com/90F8aUepslB84.gif">
|
||||||
@ -221,7 +221,7 @@
|
|||||||
<p>
|
<p>
|
||||||
Different background transitions are available via the backgroundTransition option. This one's called "zoom".
|
Different background transitions are available via the backgroundTransition option. This one's called "zoom".
|
||||||
</p>
|
</p>
|
||||||
<pre><code class="hljs">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
|
<pre><code class="hljs javascript">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
|
<section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
|
||||||
@ -229,25 +229,25 @@
|
|||||||
<p>
|
<p>
|
||||||
You can override background transitions per-slide.
|
You can override background transitions per-slide.
|
||||||
</p>
|
</p>
|
||||||
<pre><code class="hljs" style="word-wrap: break-word;"><section data-background-transition="zoom"></code></pre>
|
<pre><code class="hljs html" style="word-wrap: break-word;"><section data-background-transition="zoom"></code></pre>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Pretty Code</h2>
|
<h2>Pretty Code</h2>
|
||||||
<pre><code class="hljs" data-trim contenteditable>
|
<pre><code class="hljs line-numbers" data-trim data-highlight-lines="4,8-9">
|
||||||
function linkify( selector ) {
|
import React, { useState } from 'react';
|
||||||
if( supports3DTransforms ) {
|
|
||||||
|
|
||||||
var nodes = document.querySelectorAll( selector );
|
function Example() {
|
||||||
|
const [count, setCount] = useState(0);
|
||||||
|
|
||||||
for( var i = 0, len = nodes.length; i < len; i++ ) {
|
return (
|
||||||
var node = nodes[i];
|
<div>
|
||||||
|
<p>You clicked {count} times</p>
|
||||||
if( !node.className ) {
|
<button onClick={() => setCount(count + 1)}>
|
||||||
node.className += ' roll';
|
Click me
|
||||||
}
|
</button>
|
||||||
}
|
</div>
|
||||||
}
|
);
|
||||||
}
|
}
|
||||||
</code></pre>
|
</code></pre>
|
||||||
<p>Code syntax highlighting courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
|
<p>Code syntax highlighting courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
|
||||||
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user