I tried splitting out the markdown content and using Shortcode Assets Plugin to include the CSS and markdown.js in the page, but the markdown syntax of remark.js uses three dashes (---) as the slide separator, and this may be conflicting with Grav and YAML front matter. Not sure. But it's not working, it shows the markdown slide content unformatted and not displayed as slides.
Would love to be able to get this working inside my Grav site, without having to host these slide pages externally on a http site.
A boilerplate HTML using remark.js is:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<style>
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
body { font-family: 'Droid Serif'; }
h1, h2, h3 {
font-family: 'Yan one Kaffeesatz';
font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
</style>
</head>
<body>
<textarea id="source">
class: center, middle
# Title
HTML
# Agenda
1. Introduction
2. Deep-dive
3. ...
```
# Introduction
</textarea>
<script src="https://gnab.github.io/remark/downloads/remark-latest.min.js">
</script>
<script>
var slideshow = remark.create();
</script>
</body>
</html>
TXT
