docs for code highlight line numbering
							parent
							
								
									485870946f
								
							
						
					
					
						commit
						da4ec074f1
					
				
							
								
								
									
										33
									
								
								README.md
								
								
								
								
							
							
						
						
									
										33
									
								
								README.md
								
								
								
								
							|  | @ -451,7 +451,7 @@ Reveal.initialize({ | ||||||
| 		{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, | 		{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, | ||||||
| 
 | 
 | ||||||
| 		// Syntax highlight for <code> elements | 		// Syntax highlight for <code> 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 | 		// Zoom in and out with Alt+click | ||||||
| 		{ src: 'plugin/zoom-js/zoom.js', async: true }, | 		{ 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)). | 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({ | Reveal.initialize({ | ||||||
| 	// More info https://github.com/hakimel/reveal.js#dependencies | 	// More info https://github.com/hakimel/reveal.js#dependencies | ||||||
| 	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 | ||||||
| </section> | </section> | ||||||
| ``` | ``` | ||||||
| 
 | 
 | ||||||
|  | #### Line Numbers & Highlights | ||||||
|  | 
 | ||||||
|  | To enable line numbers, add `data-line-numbers` to your `<code>` 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 | ||||||
|  | <pre><code class="hljs" data-line-numbers="4,8-11"> | ||||||
|  | import React, { useState } from 'react'; | ||||||
|  |   | ||||||
|  | function Example() { | ||||||
|  |   const [count, setCount] = useState(0); | ||||||
|  |   | ||||||
|  |   return ( | ||||||
|  |     <div> | ||||||
|  |       <p>You clicked {count} times</p> | ||||||
|  |       <button onClick={() => setCount(count + 1)}> | ||||||
|  |         Click me | ||||||
|  |       </button> | ||||||
|  |     </div> | ||||||
|  |   ); | ||||||
|  | } | ||||||
|  | </code></pre> | ||||||
|  | ``` | ||||||
|  | 
 | ||||||
|  | <img width="300" alt="line-numbers" src="https://user-images.githubusercontent.com/629429/55332077-eb3c4780-5494-11e9-8854-ba33cd0fa740.png"> | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
| ### Slide number | ### 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. | If you would like to display the page number of the current slide you can do so using the `slideNumber` and `showSlideNumber` configuration values. | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue
	
	 Hakim El Hattab
						Hakim El Hattab