Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mthh/reveal.js-plugin-codemirror

A reveal.js plugin allowing a smooth integration of CodeMirror to use its highlighting functions
https://github.com/mthh/reveal.js-plugin-codemirror

codemirror reveal-js slides syntax-highlighting

Last synced: about 1 month ago
JSON representation

A reveal.js plugin allowing a smooth integration of CodeMirror to use its highlighting functions

Host: GitHub
URL: https://github.com/mthh/reveal.js-plugin-codemirror
Owner: mthh
License: mit
Created: 2020-01-03T14:28:09.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2020-01-03T22:59:16.000Z (about 5 years ago)
Last Synced: 2024-10-16T02:22:21.004Z (3 months ago)
Topics: codemirror, reveal-js, slides, syntax-highlighting
Language: JavaScript
Homepage: https://mthh.github.io/reveal.js-plugin-codemirror/
Size: 5.54 MB
Stars: 1
Watchers: 3
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

## reveal.js-plugin-codemirror

*Enjoy a nice syntax highlighting for languages not supported by highlight.js on your reveal.js slides !*

**Demo slides:** https://mthh.github.io/reveal.js-plugin-codemirror/

### Installation

Simply place the content of the `codemirror`-directory within the reveal.js `plugin` directory.

This plugin is just a wrapper to call `CodeMirror.runMode` and doesn't contain any code from `CodeMirror`.

Two options are provided in order to fetch the appropriate `CodeMirror` modules, using a CDN (*JsDelivr*) or providing the path to theses modules (it allows to host theses files locally, or to use another CDN).

### Usage
- Just use this plugin instead of the `highlight.js` plugin :

```js
Reveal.initialize({
codemirrorHighlight: {
// The default language,
// for fenced code block (or `code` elements) without language identifier
// (default: 'javascript')
default_lang: 'javascript',
// 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 },
...
],
...
});
```

- It's now possible to use fenced code block within the markdown of the presentation and to get the code highlighted by CodeMirror.

``````html

## Slide with markdown content and code in the default language

```
function ItWorks() {
return 'It works !'
}
```

## Slide with markdown content and code in another language

```turtle
ex:AliceInWonderland a ex:Book ;
ex:title "Alice in Wonderland"@en ;
ex:author "Lewis Carroll" ;
ex:datePublished "1865-11-26"^^xsd:date .
```

``````

- It also works for `html` slides with code inside `pre > code` elements :

```html

Slide with html content and code in another language

ex:AliceInWonderland a ex:Book ; ex:title "Alice in Wonderland"@en ; ex:author "Lewis Carroll" ; ex:datePublished "1865-11-26"^^xsd:date .

```

### License

MIT licensed