Presentations with remarkjs

[I enjoyed using][1] mdp to write slides, being able to hammer in markdown gave a satisfying sense of flow and I felt like I was able to get the slides out of my head in a straightforward manner. But I knew for my eurobsdcon presentation I was going to have to include photos of equipment and maybe even demo videos.

Shelling out to vlc or feh for pictures and video wouldn't do, it would throw off both me and the audience. That ruled out using mdp for making slides and it also ruled out using sent from suckless

I canvassed around on mastodon and tried out a bunch of other tools, the main factor in ruling out most of the tools was there handling of very long titles. Something I couldn't avoid when the title of my talk was 84 charactars.

remarkjs was the tool I settled on.

remarkjs can take slides either as an external markdown file if you have a way to serve them to the js, or embedded into a html file. I ended up embedded the slides into the markdown as this was the fastest way to get from nothing to having some slides appearing. remarkjs has a boat of documentation, which I thourghouly ignored until after the presentation, in fact in the days after when I was toying with implementing a presentation view I found remarkjs already has one built in!

remarkjs was great for authoring into, the ability to add style to documents was a big bonus for me too. The fact there was style did mean I had to write some css to get videos into the right place in the slide was annoying, but it worked out well.

Integrating diagrams

My mdp slides included diagrams as most slide decks do, I wanted to add diagrams to this slide deck. The mdp diagrams are just ASCII art, showing ASCII art in a web page is fine, that is show I made a sharable version of the page, but I felt I could do better.

goat can render ascii art diagrams in a restricted set into svg diagrams.

example example example

Gives an svg diagram like:


The svg output is very verbode and really not something you would want to embed in the middle of a slide deck.

svg quoted cut off

For this to be managable I wrote a python script to 'render' the document. The script searches the input for lines starting with 'diagram:' and takes the remainder of the line as a file name to render and substitute.

import sys
import subprocess

filename = sys.argv[1]
infile = open(filename, 'r')
outfile = open('out.html', 'w')

cmd = "cat"
cmd = "goat"

for l in infile:
    if l.startswith('diagram:'):
        if len(l.split(' ')) != 2:
            print('bad line {}'.format(l))
        diagram = 'diagrams/{}'.format(l.split(' ')[1].strip())

        result =[cmd, diagram], stdout=subprocess.PIPE, encoding='utf-8')
        if result.returncode == 0:
            count = 0
            for o in result.stdout.split('\n'):
            #    print('    ' + o)
                outfile.write(o + '\n')
            for o in result.stdout:
                print(o, end='')


I really like remarkjs

I was happy enough using remarkjs that I was considering adding a presentation mode. However there are some downsides, firefox really struggled when rendering slides, when I had 40MB mp4 video files firefox would peg all cpus, as the slides were just a page the autoplaying video pulled firefox down all the time.

remarkjs "supports" exporting to pdf via chromes print preview, but all I could get chrome to do was hang. Someone else managed to get an export from safari, overall not the best.

[1]: mdp post