BTW, the Assets plugin blog post you cited above, has the same problem I’m having. Notice the middle of the blog page, the map is not rendered, but you see the {asset…} code. I have similar results in my Grav site. Could be an upgrade/version issue with the plugin?? (I just upgraded by base Grav this morning).
I wasn’t aware of the fact that there are two, at first sight, very similar plugins. The Assets Plugin has not been updated in over a year so I guess you’re better off with the newer Shortcode Assets Plugin.
You also need to make sure the markdown slide content is wrapped in a textarea element. For that you’ll need to create a template. For instance remark.html.twig and place that in your theme’s template folder:
{% extends 'partials/base.html.twig' %}
{% block content %}
<textarea id="source">
{{ page.content }}
</textarea>
{% endblock %}
Then have each slide page use that template by putting template: remark in the page frontmatter/header.
Thanks for the reply. The issue originated with the fact that the Shortcodes Assets Plugin was not loaded the external Javascript. Both plugins are only loading inline types, so it must be something with the versions of base and plugins that something broke.
I got very close, created a new twig template, made sure the css and javascript are being loaded from there, confirmed the generated HTML had these loaded, and I now get a page that looks like it should be presenting a slide, but it’s a blank page.
I’m giving up for now. But I agree, this would be a great plugin to get working.
If you can zip it all up I’ll be happy to look at it. Or maybe even write a plugin. Don’t no how soon though…
Thanks! The entire site is here: instat_docs.zip
message me for the password please. kyle.mcbride at instat dot com - Thx.
For some reason I couldn’t get things working with the Shortcode Assets Plugin. Only the inline CSS got included in the HTML output. All other added resources did not.
So I took another approach without plugins, but with just two Twig templates and a normal page. As a test presentation I used the Liminal theme and included slides.
The first template is a “bare” template without any structure, navigation etc. It should be saved in the theme’s templates/partials folder.
bare.html.twig:
<!DOCTYPE html>
<html lang="{{ grav.language.getLanguage ?: 'en' }}">
<head>
{% block head %}
<meta charset="utf-8" />
<title>{% if header.title %},{{ header.title|e('html') }} | {% endif %},{{ site.title|e('html') }}</title>
{% include 'partials/metadata.html.twig' %}
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="icon" type="image/png" href="{{ url('theme://images/favicon.png') }}" />
<link rel="canonical" href="{{ page.url(true, t rue) }}" />
{% block stylesheets %},{% endblock %}
{{ assets.css() }}
{% block javascripts %}
{% do assets.addJs('jquery', 101) %}
{% endblock %}
{{ assets.js() }}
{% endblock head %}
</head>
<body>
{% block content %},{% endblock %}
{% block bottom %},{% endblock %}
</body>
</html>
The second template is the template every Remark.js presentation page, which contains the markdown of the slides, should use. I named this template remarkjs.html.twig. It must be stored in the theme template folder.
Note that the Liminal theme styles are included as inline CSS in this template. (This may be not the best solution but it works.)
remarkjs.html.twig:
{% extends 'partials/bare.html.twig' %}
{% block head %}
{# Begin Inline styles for the Remark presentation slides #}
<style>
body { font-family: 'Georgia';letter-spacing:0.025em;}
h1, h2, h3 {
font-family: 'Georgia';
font-weight: normal;
}
.remark-slide-content h1 { font-size: 2.4em; color:#606060;font-weight: bold;letter-spacing:0.05em;margin-top:0em}
.remark-slide-content h2 { font-size: 1.55em;color:#606060;font-weight: bold;letter-spacing:0.05em;margin-top:0em}
.remark-slide-content h3 { font-size: 1.4em;color:#606060;font-weight: bold;letter-spacing:0.05em;margin-top:0em}
.remark-slide-content p,ol,ul { font-size: 1.2em; }
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
.remark-fading { z-index: 9; }
/* Thanks to http://www.partage-it.com/animez-vos-presentations-remark-js/ (in French) */
.remark-slide-container {transition: opacity 0.5s ease-out;opacity: 0;}
.remark-visible {transition: opacity 0.5s ease-out;opacity: 1;}
/* Two-column layout */
.left-column {
width: 50%;
float: left;
}
.right-column {
width: 49%;
float: right;
padding-top: 0em;
margin-top: 0em;
text-align: left;
}
.footnote {
position:absolute;
bottom: 1em;
left: 14em;
font-size: 0.7em;
}
/* Some special classes */
.title {font-size: 3.3em; color:#606060;font-weight:bold;letter-spacing:0.05em}
.subtitle {font-size: 1.4em}
.author {font-size: 1.4em; color:#606060;font-weight:bold;letter-spacing:0.02em}
.coauthor {font-size: 1.0em; color:#606060;font-weight:bold;letter-spacing:0.02em}
.institution {font-size: 1.0em;}
.date {font-size: 1.0em;font-style: italic}
.cite {font-size: 0.8em; color:#33AA99;font-style: italic}
.strike {color:salmon;text-decoration:line-through}
/*Set color scheme for links.*/
a {text-decoration: none; color: #666666;text-align:center; width: 24%}
/*Setting link properties is particular, do not change order below*/
a:visited {color:#666666}
a:hover {color:#33AA99}
a:active, a#active {color:#FF9700;}
</style>
{# End Inline styles for the Remark presentation slides #}
{% endblock %}
{% block content %}
<textarea id="source">
{{ page.content }}
</textarea>
{% endblock %}
{% block bottom %}
<script src="https://gnab.github.io/remark/downloads/remark-latest.min.js"></script>
<script>
var slideshow = remark.create();
</script>
{% endblock %}
Finally the page itself. For some reason the markdown that make up the Liminal slides confuses this Forum editor (Muut). Besides there is little point in copying that rather lengthy piece of markdown here. It’s part of the Liminal theme zip file. Simply add it as the page content.
More important is the page frontmatter or header. It should tell Grav to use the right template and prevent processing of the markdown:
title: 'Remark test page'
template: remarkjs
process:
markdown: false
I hope this is a good start to use it with your own styles and presentation content.
@bleutzinn - This is fantastic. I see to get it working we had to strip down all the site’s navigation and go with a bare page. That’s fine and in fact probably best, since we will want the slides to appear full width with nothing else from the site. Thank you very much.
Just a quick follow up - it seems to be working but when I click on the link to open the slides page, I always have to refresh to get the slides to render. The first click loads the page but the slides don’t appear. Each time I refresh that page, it then appears. Any idea why?
To clarify, I just tried in Chrome and works fine. It’s Safari where I have the problem that I have to refresh the page to get the slides to render.
It works now, I cleaned up the inline css styles. This is working beautifully.
Wonderful !
Although a “Remark.js Plugin” would make the use of Remark.js in Grav a lot more visible, I think this solution clearly demonstrates the power and flexibility of Grav. In other words with Grav you don’t need a plugin for everything.