Multiple Slideshows #150

eljefe6a · 2014-10-08T16:22:52Z

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?

gnab · 2014-10-09T20:49:08Z

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/

eljefe6a · 2014-10-09T21:16:38Z

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 · 2014-10-16T19:54:25Z

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.

gnab · 2014-10-16T20:06:34Z

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.

eljefe6a · 2014-10-16T20:23:37Z

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
        });

gnab · 2014-12-04T07:37:29Z

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)

eljefe6a · 2014-12-22T17:14:05Z

I looked through the macro code and this can't be done until #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 #180 shows it won't run.

gnab · 2014-12-31T11:45:44Z

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

knelasevero · 2015-05-08T19:45:42Z

Tried the

![:include](1.md)

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

gnab · 2015-05-08T21:29:39Z

@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 · 2015-05-08T21:32:26Z

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

mhavo · 2016-09-02T07:20:41Z

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.

mdreier · 2017-12-01T17:20:00Z

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.

eljefe6a mentioned this issue Nov 28, 2014

How does remark.js handle includes i.e. {{md ../path/to/concent.md}}? #166

Closed

gnab mentioned this issue Dec 31, 2014

Including External Files #138

Closed

gnab closed this as completed May 8, 2015

mhavo mentioned this issue Sep 2, 2016

Include macro: Synchronous XMLHttpRequest on the main thread is deprecated #360

Closed

mdreier mentioned this issue Dec 1, 2017

Macros returning multiple slides #488

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Multiple Slideshows #150

Multiple Slideshows #150

eljefe6a commented Oct 8, 2014

gnab commented Oct 9, 2014

eljefe6a commented Oct 9, 2014

eljefe6a commented Oct 16, 2014

gnab commented Oct 16, 2014

eljefe6a commented Oct 16, 2014

gnab commented Dec 4, 2014

eljefe6a commented Dec 22, 2014

gnab commented Dec 31, 2014

knelasevero commented May 8, 2015

gnab commented May 8, 2015

gnab commented May 8, 2015

mhavo commented Sep 2, 2016

mdreier commented Dec 1, 2017 •

edited

Multiple Slideshows #150

Multiple Slideshows #150

Comments

eljefe6a commented Oct 8, 2014

gnab commented Oct 9, 2014

eljefe6a commented Oct 9, 2014

eljefe6a commented Oct 16, 2014

gnab commented Oct 16, 2014

eljefe6a commented Oct 16, 2014

gnab commented Dec 4, 2014

eljefe6a commented Dec 22, 2014

gnab commented Dec 31, 2014

knelasevero commented May 8, 2015

gnab commented May 8, 2015

gnab commented May 8, 2015

mhavo commented Sep 2, 2016

mdreier commented Dec 1, 2017 • edited

mdreier commented Dec 1, 2017 •

edited