Remark: Multiple Slideshows

Created on 8 Oct 2014  路  13Comments  路  Source: gnab/remark

The release notes for 0.5 say you can multiple slideshows. I looked and can't find an example of how to do this. Could you provide an example?

picture eljefe6a

Most helpful comment

Quite right. Here is a better version that automatically appends the --- between files to create a new slide:

      // Place all of your files here
      sourceUrls = [
        '1.md',
        '2.md'
        ]

      var xmlhttp = new XMLHttpRequest();

      var source = ""

      for (var i = 0; i < sourceUrls.length; i++) {
        xmlhttp.open('GET', sourceUrls[i], false);
        xmlhttp.send();

        source += xmlhttp.responseText;

        // Files shouldn't have --- at the head or foot
        // It is added automatically here
        if (i + 1 < sourceUrls.length) {
          source += "\n---\n"
        }
      };

      var slideshow = remark.create({
          source: source
        });
picture eljefe6a on 16 Oct 2014
👍4

All 13 comments

The remark.create() function can take an properties object that may define a container property, which is the DOM element to use as a slideshow container instead of the default; <body />:

var slideshow = remark.create({
  container: document.getElementById('myContainerElement')
});

Optionally, you may also specify a source field, to supply the slideshow Markdown source directly.

Demo: http://jsfiddle.net/ee1kgeLz/

gnab picture gnab on 9 Oct 2014

I think I misunderstood what multiple slideshows means in this context. I meant multiple Markdown files in the same slideshow.

That code would look something like:

      var slideshow = remark.create({
          sourceUrl: ['solutions.md', 'nextone.md']
        });

This doesn't appear to be the same feature.

eljefe6a picture eljefe6a on 9 Oct 2014

If anyone else runs into this limitation, here is a JavaScript workaround to load things manually:

      // Place all of your files here
      sourceUrls = [
        'slides.md', 
        'solutions.md'
        ]

      var xmlhttp = new XMLHttpRequest();

      var source = document.getElementById("source")

      for (var i = 0; i < sourceUrls.length; i++) {
        xmlhttp.open('GET', sourceUrls[i], false);
        xmlhttp.send();

        source.innerHTML += "\n" + xmlhttp.responseText;
      };

      var slideshow = remark.create();

You will need to have this in your HTML:

<textarea id="source"></textarea>

The code will go through all of the URLs in the array and append them to the source.

eljefe6a picture eljefe6a on 16 Oct 2014

You can pass the combined source to remark.create() instead of using the DOM element:

var source = ...

var slideshow = remark.create({
  source: source
});

Your workaround essentially does the same thing the sourceUrl options does for a single file.

gnab picture gnab on 16 Oct 2014

Quite right. Here is a better version that automatically appends the --- between files to create a new slide:

      // Place all of your files here
      sourceUrls = [
        '1.md',
        '2.md'
        ]

      var xmlhttp = new XMLHttpRequest();

      var source = ""

      for (var i = 0; i < sourceUrls.length; i++) {
        xmlhttp.open('GET', sourceUrls[i], false);
        xmlhttp.send();

        source += xmlhttp.responseText;

        // Files shouldn't have --- at the head or foot
        // It is added automatically here
        if (i + 1 < sourceUrls.length) {
          source += "\n---\n"
        }
      };

      var slideshow = remark.create({
          source: source
        });
eljefe6a picture eljefe6a on 16 Oct 2014
👍4

This should probably be generalized using the not-yet-released macro functionality from #72, present on the develop branch, by creating a macro that synchronously downloads Markdown and inserts it into the slideshow during the parse process, e.g.:

![:include](1.md)
gnab picture gnab on 4 Dec 2014

I looked through the macro code and this can't be done until https://github.com/gnab/remark/issues/180 is fixed. This is because a file included from several Markdown files will need to have their own macros run. The bug report from https://github.com/gnab/remark/issues/180 shows it won't run.

eljefe6a picture eljefe6a on 22 Dec 2014

180 is fixed now, so if you wan't to have a go at creating an include macro that should be doable now.

gnab picture gnab on 31 Dec 2014

Tried the 

![:include](1.md)

on the single version of remark, and it did not work. How can I properly use it?

knelasevero picture knelasevero on 8 May 2015

@aldarionsevero remark currently doesn't come with any macros, but you can define your own include macro using the code supplied by @eljefe6a:

remark.macros.include = function () {
  var url = this;
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open('GET', this, false);
  xmlhttp.send();
  return xmlhttp.responseText;
};

var slideshow = remark.create();

Then, in your slideshow, ![:include](1.md) will be replaced with the contents of 1.md. For security reasons, most browsers denies filed to be loaded from the local filesystem like this. So if you're running your slideshow from a local file, this won't work. You have to serve the file via a web server.

gnab picture gnab on 8 May 2015

@aldarionsevero If you're having any issues with this, please open a new issue.

gnab picture gnab on 8 May 2015

Include is including properly only one plain slide inside md. Only the first is included. If there is more slides they are left out. And if there is images inside slides there will be an error.

mhavo picture mhavo on 2 Sep 2016
😕2

The reason for that is in line 76ff. of parser.js

var value = macro.apply(token.obj, token.args);
if (typeof value === 'string') {
   value = self.parse(value, macros);
   appendTo(stack[stack.length - 1], value[0].content[0]);
}

So the complete return value of the macro will be parsed, but only the first content element of the first slide will be added to the current slide element. In many cases this may be appropriate, but when including complete files it should rather be adding these slides to the stack

slides.push(stack[0]);   //End current slide
slides.push(...value);   //Push slides from include
stack = [createSlide()]; //Start next slide

Maybe only do this if more than one slide was returned from the parsed value to not break existing behavior.

_Edited to add:_ I raised #488 to track this specific issue.

mdreier picture mdreier on 1 Dec 2017
Was this page helpful?
0 / 5 - 0 ratings

Related issues

zmonoid picture zmonoid  路  5Comments
punkish picture punkish  路  7Comments
mikepqr picture mikepqr  路  6Comments
utdrmac picture utdrmac  路  6Comments
anaderi picture anaderi  路  5Comments