## Reveal.js-plugin-codemirror demo <br><br> **A reveal.js plugin allowing a smooth integration of CodeMirror, only to use its _highlighting_ functions** https://github.com/mthh/reveal.js-plugin-codemirror
### Reveal.js-plugin-codemirror demo (1) #### Code in default language (here 'turtle' syntax for RDF): ``` @prefix foaf: <http://xmlns.com/foaf/0.1/> . [ foaf:name "Alice" ] foaf:knows [ foaf:name "Bob" ; foaf:knows [ foaf:name "Eve" ] ; foaf:mbox <bob@example.com> ] . ``` <span class="small"><em> Source: https://www.w3.org/TR/turtle/#unlabeled-bnodes </em></span>
### Reveal.js-plugin-codemirror demo (2) **_You can define the default syntax at plugin initialisation_** **_it avoids to add a language identifier on each code block_** ```javascript Reveal.initialize({ codemirrorHighlight: { // The default language, // for fenced code block (or `code` elements) without language identifier // (default: 'javascript') default_lang: 'turtle', // A specific CodeMirror theme to use (default: 'default') theme: 'zenburn', // The version number of CodeMirror to use // if using the CDN strategy // (default: 5, not used if `path` option is provided) version: '5.50.2', // A path to reach CodeMirror `lib`, `addon`, `theme`, etc. folders // to fetch the appropriate modules needed // (default: undefined, mandatory to avoid using the default CDN) path: '/codemirror/', }, dependencies: [ { src: 'plugin/codemirror/revealjs-plugin-codemirror.js', async: true }, ... ], ... }); ```
### Reveal.js-plugin-codemirror demo (3) #### Code in another language: ```javascript function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillStyle = 'rgb(200, 0, 0)'; ctx.fillRect(10, 10, 50, 50); ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'; ctx.fillRect(30, 30, 50, 50); } } ``` <span class="small"><em> Source: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage </em></span>
### Reveal.js-plugin-codemirror demo (4) #### *Yet another language !* ```xml <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> ``` <span class="small"><em> Source: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage </em></span>