https://github.com/lucienimmink/RevealLiveCode

Live coding plugin for reveal.js
https://github.com/lucienimmink/RevealLiveCode

Last synced: 14 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