Step 1: Include Slidr CSS file in <head> tag:
<link href="slidr/slidr.css" rel="stylesheet" />
Step 2: Include jQuery and Slidr JavaScript file just before <body/> tag and call it:
<script src="slidr/third_party/jquery.js"></script>
<script src="slidr/slidr.js"></script>
<script>
// "background" option sets presentation background color
// "fontsize" option sets general slides font size
$('.slide').slidr({"background" : "#eee", "fontsize" : "1.1em"});
</script>
Step 3: Create HTML markup for slides with container class being slidr_container like:
<div class="slidr_container">
<section class="slide start">
<h1 class="big">My Awesome Presentation</h1>
<p>This is going to be fun!</p>
</section>
<section class="slide">
<h2>My Awesome Presentation</h2>
<ul>
<li>Topic One</li>
<li>Topic Two</li>
<li>Topic Three</li>
</ul>
</section>
<section class="slide">
<h2>The End!</h2>
<p>Big Thanks!</p>
</section>
</div>
Here we have given a class name of slide to each slide but you can also use some other name.
That's it ;-)First include hightlight.js file just before <body/> tag and call it:
<script src="slidr/third_party/highlight/highlight.pack.js"></script>
<script>
// enable syntax highlighting
hljs.initHighlightingOnLoad();
</script>
Now simply wrap your code snippets in between:
<pre><code class="LANG-NAME">...</code></pre>
PHP Code Snippet Example
<pre><code class="php">
class HelloWorld
{
public static function sayHello() {
echo "Hello World!";
}
}
echo HelloWorld::sayHello();
</code></pre>
It will output like:
class HelloWorld
{
public static function sayHello() {
echo "Hello World!";
}
}
echo HelloWorld::sayHello();
If you are using Markdown (See Next Slide) and as you probably already know, you can also add code snippets by indenting them with 8 spaces or 2 tabs:
class HelloWorld
{
public static function sayHello() {
echo "Hello World!";
}
}
echo HelloWorld::sayHello();
Will output as (with language auto-detected):
class HelloWorld
{
public static function sayHello() {
echo "Hello World!";
}
}
echo HelloWorld::sayHello();
First include markdown-js file just before <body/> tag and call it:
<script src="slidr/third_party/markdown/markdown.js"></script>
<script>
$('.markdown').each(function(){
var html = markdown.toHTML($(this).html());
$(this).html(html);
});
</script>
Now simply apply the class markdown to any element and write Markdown within it:
Below markup:
<p class="markdown">
# Some Heading
---
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- List Item One
- List Item Two
- List Item Three
<p/>
Generates following HTML output:
# Some Heading --- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. - List Item One - List Item Two - List Item Three
Note: Do not indent Markdown code or else it will be treated as Code snippet unless you want it!
To use fragments, simply apply the class slide_fragment to an element:
<ul>
<li class="slide_fragment">I am first fragment</li>
<li class="slide_fragment">I am second fragment</li>
<li class="slide_fragment">I am third fragment</li>
</ul>
If you like it, please spread the word ;-)
Developed by Sarfraz Ahmed
You can also find me on Twitter as @sarfraznawaz