Reveal-liveCoding
Reveal-liveCoding copied to clipboard
iamvdo
Live coding in Reveal.js
LiveCoding in Reveal.js
A plugin for live coding CSS, HTML, SVG in Reveal.js.
You can try it here (slide 16): The Future of CSS (masks)
##Install
Just add the plugin as a dependency of Reveal:
Reveal.initialize({
dependencies: [
// others dependencies
// ...
// liveCoding plugin
{ src: 'plugin/live-coding/live-coding.js', async: true, condition: function() { return !!document.body.classList; }}
]
});
##Use
Reveal.js uses <pre> and <code> tags for code.
Follow these steps on the <code> tag you want to use for live coding:
- add a
contenteditableattribute (to make it editable) - add a
.liveCodingclass. - add a
.css(if CSS) or.xml(if HTML, SVG...) class (see below). - add a
data-livecoding-idattribute: the value is theidyou want to target.
Here is a full example:
<pre><code class="liveCoding css" data-livecoding-id="myElement" contenteditable>
.title{
color: red;
}
</code></pre>
<div id="myElement">
<p class="title">Hello</p>
</div>
###Language
In Reveal, by default, code is highlighted with highlight.js (by detecting the language) and a class is added (eg.
css, xml) on <code>. This class is used by LiveCoding to update the code properly. BUT, if you disable highlight.js,
or use another highlighter, please use the HTML5 recommended syntax:
- add a
.language-*class on the<code>tag. (eg.language-css,.language-markup, ...)
##How LiveCoding works
###CSS
The value of the data-livecoding-id attribute is an identifier that is the scope of the live-coding CSS. Thus, it is
possible to target all descendants of this identifier.
Associated styles are added in a <style> tag, at the end of the <body>.
###Markup (HTML, SVG...)
The value of the data-livecoding-id attribute is an identifier that is the parent of the live-coding code. The content
of this identifier is replaced by the code you write.
##Notes
- If you want to use PrefixFree, just load it before this plugin as a dependency. The code will be automatically prefixed while live coding.
iamvdo