Presentations with remarkjs
I enjoyed using
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:
svg
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 = subprocess.run([cmd, diagram], stdout=subprocess.PIPE, encoding='utf-8')
if result.returncode == 0:
count = 0
outfile.write('.center[\n')
for o in result.stdout.split('\n'):
# print(' ' + o)
outfile.write(o + '\n')
outfile.write(']\n')
else:
for o in result.stdout:
print(o, end='')
outfile.write(l)
else:
outfile.write(l)
infile.close()
outfile.close()
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.