Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

README.md

Live Code

Live code is a jQuery plug-in to allow you to added editable code regions to your site.

Setup

All you need to do to setup the library is have a copy of jQuery and the plugin code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.livecode.min.js"></script>

HTML

You will need to do a few things in your html to get the plugin to pick up your live coding area.

First you will want to setup a "code" area and give it a data-live-code="SELECTOR" attribute.

<pre><code data-live-code="#example">CONTENT</code></pre>

Then you will want to set a div on your page with an id of example

<div id="example"></div>

CSS and JS

You live code any html tag, so to edit CSS and JS you will just need to change the targets to style and script elements respectively.

<style type="text/css" id="exampleCSS"></style>
<pre><code data-live-code="#exampleCSS">STYLES HERE</code></pre>

<script id="exampleJS"></script>
<pre><code data-live-code="#exampleJS">SCRIPT HERE</code></pre>

Activate

Once you have all of you html setup, you will need activate the plugin.

Put the following code near the bottom of the page or wrapped in a $(document).ready() call.

$.livecode();

The livecode script will take over from there.

Callback

You can invoke a callback when an area is updated (blur by default).

The callback function will get the DOMElement of the area that was edited.

$.livecode({
	callback: awesomeCallbackFunction
});

Highlight.js

This library works very well with highlight.js for syntax highlighting your code areas!

Just include the highlight.js and highlight theme and add in a callback.

$.livecode({
	callback: hljs.highlightBlock
});

Demo

See demo.html in this repo for a very simplified demo.


Developed by Dave Widmer

About

A jQuery plug-in to add live coding (HTML, CSS, JS) to your site

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.