See http://remarkjs.com/
To use it in GS I used the following method:
1. Make a template file (see below for an example)
2. Make a component.
3. Use dynpages plugin to post component on page (so I can use more than one slideshow).
4. Specify template file in page.
In the component I can write markdown. For example:
(I'm not sure how to improve the background of the slide's and import a menu, I would have to study on that)
Example: http://www.wouterb.be/remark-test
One problem though. In the first slide the slide properties are ignored and I will only see text. In other slides after it it will work as espected. Anyone knows what's going on, why it doesn't work as expected in the first slide?
Anyway, I also just wanted to show my findings. Someone might be interested.
Btw. this is not compatible with the markdown plugin activated.
Edit: I'm actually testing with including flowtime.js, which seems easier to edit, because you can just use the ckeditor to edit the slide-content (every slide is a page).
To use it in GS I used the following method:
1. Make a template file (see below for an example)
2. Make a component.
3. Use dynpages plugin to post component on page (so I can use more than one slideshow).
4. Specify template file in page.
In the component I can write markdown. For example:
Code:
# The great building where I live
---
class: center
# Agenda
1. Introduction
2. Deep-dive
3. ...
---
# IntroductionPHP Code:
<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }?>
<!DOCTYPE html>
<html>
<head>
<title><?php get_page_clean_title(); ?> < <?php get_site_name(); ?></title>
<?php get_header(); ?>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
body {
font-family: 'Droid Serif';
font-size: 20px;
}
h1, h2, h3 {
font-family: 'Yanone Kaffeesatz';
font-weight: 400;
margin-bottom: 0;
}
h1 { font-size: 4em; }
h2 { font-size: 2em; }
h3 { font-size: 1.6em; }
.footnote {
position: absolute;
bottom: 3em;
}
li p { line-height: 1.25em; }
.red { color: #fa0000; }
.large { font-size: 2em; }
a, a > code {
color: rgb(249, 38, 114);
text-decoration: none;
}
code {
-moz-border-radius: 5px;
-web-border-radius: 5px;
background: #e7e8e2;
border-radius: 5px;
font-size: 16px;
}
.pull-left {
float: left;
width: 47%;
}
.pull-right {
float: right;
width: 47%;
}
.pull-right ~ p {
clear: both;
}
#slideshow .slide .content code {
font-size: 0.8em;
}
#slideshow .slide .content pre code {
font-size: 0.9em;
padding: 15px;
}
.inverse {
background: #272822;
color: #777872;
text-shadow: 0 0 20px #333;
}
.inverse h1, .inverse h2 {
color: #f3f3f3;
line-height: 0.8em;
}
/* Slide-specific styling */
#slide-inverse .footnote {
bottom: 12px;
left: 20px;
}
#slide-how .slides {
font-size: 0.9em;
position: absolute;
top: 151px;
right: 140px;
}
#slide-how .slides h3 {
margin-top: 0.2em;
}
#slide-how .slides .first, #slide-how .slides .second {
padding: 1px 20px;
height: 90px;
width: 120px;
-moz-box-shadow: 0 0 10px #777;
-webkit-box-shadow: 0 0 10px #777;
box-shadow: 0 0 10px #777;
}
#slide-how .slides .first {
background: #fff;
position: absolute;
top: 20%;
left: 20%;
z-index: 1;
}
#slide-how .slides .second {
position: relative;
background: #fff;
z-index: 0;
}
/* Two-column layout */
.left-column {
color: #777;
width: 20%;
height: 92%;
float: left;
}
.left-column h2:last-of-type, .left-column h3:last-child {
color: #000;
}
.right-column {
width: 75%;
float: right;
padding-top: 2em;
}
</style>
</head>
<body>
<textarea id="source">
<?php get_page_content(); ?>
</textarea>
<script src="http://gnab.github.io/remark/downloads/remark-0.6.0.min.js" type="text/javascript"></script>
<script type="text/javascript"> var slideshow = remark.create(); </script>
<?php get_footer(); ?>
</body>
</html>
Example: http://www.wouterb.be/remark-test
One problem though. In the first slide the slide properties are ignored and I will only see text. In other slides after it it will work as espected. Anyone knows what's going on, why it doesn't work as expected in the first slide?
Anyway, I also just wanted to show my findings. Someone might be interested.
Btw. this is not compatible with the markdown plugin activated.
Edit: I'm actually testing with including flowtime.js, which seems easier to edit, because you can just use the ckeditor to edit the slide-content (every slide is a page).