diff --git a/README.md b/README.md index 294fac7e..f6eee5ec 100644 --- a/README.md +++ b/README.md @@ -451,7 +451,7 @@ Reveal.initialize({ { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, // Syntax highlight for elements - { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, + { src: 'plugin/highlight/highlight.js', async: true }, // Zoom in and out with Alt+click { src: 'plugin/zoom-js/zoom.js', async: true }, @@ -917,7 +917,7 @@ Reveal.addEventListener( 'fragmenthidden', function( event ) { } ); ``` -### Code syntax highlighting +### Code Syntax Highlighting By default, Reveal is configured with [highlight.js](https://highlightjs.org/) for code syntax highlighting. To enable syntax highlighting, you'll have to load the highlight plugin ([plugin/highlight/highlight.js](plugin/highlight/highlight.js)) and a highlight.js CSS theme (Reveal comes packaged with the Monokai themes: [lib/css/monokai.css](lib/css/monokai.css)). @@ -925,7 +925,7 @@ By default, Reveal is configured with [highlight.js](https://highlightjs.org/) f Reveal.initialize({ // More info https://github.com/hakimel/reveal.js#dependencies dependencies: [ - { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, + { src: 'plugin/highlight/highlight.js', async: true }, ] }); ``` @@ -944,6 +944,33 @@ Below is an example with clojure code that will be syntax highlighted. When the ``` +#### Line Numbers & Highlights + +To enable line numbers, add `data-line-numbers` to your `` tags. If you want to highlight specific lines you can provide a comma separated list of line numbers using the same attribute. For example, in the following example lines 4 and 8-11 are highlighted: + +```html +

+import React, { useState } from 'react';
+ 
+function Example() {
+  const [count, setCount] = useState(0);
+ 
+  return (
+    
+

You clicked {count} times

+ +
+ ); +} +
+``` + +line-numbers + + + ### Slide number If you would like to display the page number of the current slide you can do so using the `slideNumber` and `showSlideNumber` configuration values.