Remark: reload slides

Created on 12 May 2016  ·  5Comments  ·  Source: gnab/remark

is it possible to reload slides after those has been rendered in order to get last changes from .md file?

Most helpful comment

What I do is include livereload.js. Works great.

Beware this requires nodejs and npm, any version should do.

Add a file named package.json next to your remark html file with this contents:

{
  "devDependencies": {
    "livereload": "^0.4.1"
  },
  "scripts": {
    "watch": "livereload ."
  }
}

Run npm install in your shell.

Add this snippet to your Remark html file:

<script>
    document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')
</script>

Now whenever you work on your presentation simply run npm run watch and open your Remark HTML file in your browser as always. Now anytime you make a change your slides will automatically reload in the browser.

Edit: I've put up a little repo to get you started with this easily: https://github.com/pascalw/remark-js-livereload-boilerplate

All 5 comments

You can either use your IDE to do it, like I use VIM to refresh, or create a make file so you can quickly do a CTRL-C and then just type make to reload.

What do you use to create the markdown?

The entire contents of my makefile is

all:
    php -S  localhost:8189 index.php

I just left that in my folder and run make when I want to test or view.

hmm.. I'm not sure how server restart can help refresh specific slide automatically. I still have to hit CMD-R in browser which causes reload of all presentation assets which is a bit slow... It seems possible to do using 3rd party engines like https://github.com/sporto/hugo-remark (which involves hugo to make reload automatic, although it is a bit outdated)

What I do is include livereload.js. Works great.

Beware this requires nodejs and npm, any version should do.

Add a file named package.json next to your remark html file with this contents:

{
  "devDependencies": {
    "livereload": "^0.4.1"
  },
  "scripts": {
    "watch": "livereload ."
  }
}

Run npm install in your shell.

Add this snippet to your Remark html file:

<script>
    document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')
</script>

Now whenever you work on your presentation simply run npm run watch and open your Remark HTML file in your browser as always. Now anytime you make a change your slides will automatically reload in the browser.

Edit: I've put up a little repo to get you started with this easily: https://github.com/pascalw/remark-js-livereload-boilerplate

Seems solved, so I'm closing the issue.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

fladd picture fladd  ·  7Comments

stephentu picture stephentu  ·  5Comments

mikepqr picture mikepqr  ·  6Comments

zmonoid picture zmonoid  ·  5Comments

pinkomeo picture pinkomeo  ·  4Comments