How to add a page that uses remark.js that is a markdown driven slideshow

Archive
1

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:

    <!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
    
    ```
    
    # 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>
2

In the content, there is no problem with ---, for example we have a recipe on using them to render multiple columns. So I would exclude that from the list of possible issues

3

Checking it out

4

remark.js expects the slide source code as unmodified markdown. So I think it’s worth a try to just disable markdown processing for a slides page. In the Admin panel when you edit the page under the Normal - Advanced tab you’ll see Screenshot at Feb 24 15-55-27. Or you can set that in the page frontmatter/header like this:

process:
    markdown: false
5

Ah good idea @bleutzinn, I was going to suggest to add that code into the page Twig, but it also works in the page with markdown disabled., just checked.

6

O great, I didn’t check :slight_smile:

7

Already trying that, have the markdown: false in my page. still not working.

8

BTW Remark.js is pretty cool (IMHO) and would make for a great GRAV plugin.

9

I completely agree…that’s why I’d love to use it.

I am also trying to wrap my slide markdown content with <div class="myWrapper" markdown="1"> and still doesn’t work.

10

@kylemcbride, what does the HTML source code of the page Grav creates look like? Do all stylesheets get loaded? Is the inline Javascript there? Must be something like that I guess.

11

@bleutzinn, I know the css is getting loaded, since it messes up my sidebar styling. As for the Javascript … I don’t think I see it in the generated HTML.

12

Here’s the generated HTML section (partial…):


<script>
$(document).ready(function() {
                                anchors.options = {
                                    visible: 'hover',
                                    placement: 'right',
                                    
                                    
                                };
                                anchors.add('#body h2, #body h3, #body h4, #body h5');
                             });
$(document).ready(function() {
                    $('pre code').each(function(i, block) {
                        hljs.highlightBlock(block);
                    });
                 });
 
</script>
13

I pulled out the javascript from the remark.js boilerplate, and put it in a .js file in the same user/pages folder as the page itself (see below). Then used this in the page:

[assets=js]
slide.js
[/assets]

Did I do something wrong with this?

Content of slide.js:

<script src="https://gnab.github.io/remark/downloads/remark-latest.min.js" type="text/javascript"></script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML&delayStartupUntil=configured" type="text/javascript"></script> 
      
    <script type="text/javascript"> 
      var slideshow = remark.create({navigation: {click: false}, properties: {class: "center, middle"}});

      // Setup MathJax
      MathJax.Hub.Config({
          tex2jax: { 
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre']
          }
      });
      MathJax.Hub.Queue(function() {
          $(MathJax.Hub.getAllJax()).map(function(index, elem) {
              return(elem.SourceElement());
          }).parent().addClass('has-jax');
      });

      MathJax.Hub.Configured();
    </script>
14

That doesn’t look good. The initialisation JS code of Remark.js isn’t there. Since you have CSS Pipelining active it isn’t clear whether the CSS Remark requires are loaded. Switching the pipelining off temporarily will add every CSS file as a separate HTML line.

To load the JS you put in a single file you could follow this Tip.

15

FYI - I’ve just tried to fix my .js file by taking out the external URL sources and leaving only the Javascript code without the tags. And then changed my shortcodes to:

//gnab.github.io/remark/downloads/remark-latest.min.js
//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML&delayStartupUntil=configured
slide.js
[/assets]

Still doesn’t work. :frowning:

16

Well the syntax to be used when using the Assets plugin is like:

{assets:js order:5}
//gnab.github.io/remark/downloads/remark-latest.min.js
//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML&delayStartupUntil=configured
{/assets}

Maybe the example about the Assets plugin in this blog post is of help?

I think you can avoid using a local Javascript file if you place that code inline as in the example.

17

I’m using the Shortcode Assets Plugin, not the Assets plugin. Shall I try switching plugins?

18

It’s worth a try :wink:

19

Yes, progress…using Assets plugin and not loading the file but using js_inline asset type, I have that Javascript now generated in the HTML by Grav. Still not getting the http: source initialized for remark.js when using:

{assets=js}
http://gnab.github.io/remark/downloads/remark-latest.min.js
http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML&delayStartupUntil=configured
{/assets}
20

To clarify, is the {assets} code added to the page content or to a twig?