SouS (Source Slides) is a jQuery plugin. It give you HTML showcase for step by step demonstration of source code editing. This product was made by inspiration of LaTeX Beamer. You can see similar processing with hidable and unhidable elements.
- jQuery
- highlight.js - the best at current moment library for highlighting source code. It's not necessary but it's rather good idea to use it to make you source slides look nicer.
- Twitter Bootstrap - it's simpler to choose cooked CSS for making your HTML-pages not so ugly as it possible. But it's not neccessary though.
- CoffeeScript - if you want to commit changes into this repository you need to write it on this horrible language.
You can use libraries for code highlighting and styling that you prefer or any other libraries that gives you needed features.
Clone project to your files and change file index.html.
You should write your code into <pre id="source"><code>...</code></pre>.
When your code will be ready just surrond some of parts of it with next construction:
<span class="srcdemoX-Y">...</span>, where X is number of beginning slide
and Y is number of ending slide. You can skip X or Y
that will be conform to 0 and infinity respectively.
Also you can put your notes into <div id="leftcol">...</div>. This notes will appear in slides
that conform to classes of your apeearing spans.