docs for code highlight line numbering
This commit is contained in:
		
							parent
							
								
									485870946f
								
							
						
					
					
						commit
						da4ec074f1
					
				
					 1 changed files with 30 additions and 3 deletions
				
			
		
							
								
								
									
										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…
	
	Add table
		Add a link
		
	
		Reference in a new issue