Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lucienimmink/RevealLiveCode
Live coding plugin for reveal.js
https://github.com/lucienimmink/RevealLiveCode
Last synced: 12 days ago
JSON representation
Live coding plugin for reveal.js
- Host: GitHub
- URL: https://github.com/lucienimmink/RevealLiveCode
- Owner: lucienimmink
- License: mit
- Created: 2022-07-01T14:27:16.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-07-01T21:31:36.000Z (over 2 years ago)
- Last Synced: 2024-08-01T16:44:09.398Z (3 months ago)
- Language: JavaScript
- Size: 5.86 KB
- Stars: 7
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# RevealLiveCode plugin
A plugin for [Reveal.js](https://github.com/hakimel/reveal.js) allowing to do live coding.
## Installation
Copy the files `editor.js` and/or `editor.esm.js` into the plugin folder of your reveal.js presentation, i.e. ```plugin/editor``` and load the plugin as shown below.
```html
import Editor from './plugin/editor/editor.esm.js';
Reveal.initialize({
...,
plugins: [ ..., Editor ]
});```
## Usage
Both the HTML and markdown synthax is supported. Code highlighted using hljs can be clicked and that code becomes editable. The text output of the codeblock is copied (as HTML) into an element with the `data-edit` attribute in the same section.
```html
:root {
--hw-color: orange;
}Light DOM fallback
```## Compilation
If you want to change the source use `plugin.js` and add it to the build process of [Reveal.js](https://github.com/hakimel/reveal.js) by appending it to the `plugins` task:
```js
{ name: 'Editor', input: './plugin/editor/plugin.js', output: './plugin/editor/editor' },
```## Examples
### Example: HTML
```html
:root {
--hw-color: orange;
}Light DOM fallback
```### Example: Markdown
````markdown
```html:root {
--hw-color: orange;
}Light DOM fallback
```:root {
--hw-color: orange;
}Light DOM fallback
````## License
MIT licensed
Copyright (C) 2022 Lucien Immink, iO