Reveal.js: Data separator and data vertical don't work with external markdown

Created on 29 May 2014 · 15Comments · Source: hakimel/reveal.js

I tried the following and it worked:

<section data-markdown data-separator="^\n----\n$" data-vertical="^\n---\n$">
  <script type="text/template">
    ###Title

    ---

    ####Title 2
    * 1
    * 2
  </script>
</section>

capture d cran 2014-05-29 15 41 35

But if I use an external markdown file:

<section data-markdown="slides/test.md" data-separator="^\n----\n$" data-vertical="^\n---\n$"></section>

Everything is stacked in one page, the vertical slides are not created ...
capture d cran 2014-05-29 15 40 43

Any idea ? Is it a bug or a config problem ?

markdown

Source

ocombe

Most helpful comment

This is a problem with the newline sign. Windows use \r\n and not \n. A quik fix for me was to add the following code in line 129 in the plugin file markdown.js

markdown = markdown.replace(/(\r\n|\r)/g, '\n');

The code then looks like this:

function slidify( markdown, options ) {

  options = getSlidifyOptions( options );

  markdown = markdown.replace(/(\r\n|\r)/g, '\n');

  var separatorRegex = new RegExp( options.separator + ( options.verticalSeparator ? '|' + options.verticalSeparator : '' ), 'mg' ),
  horizontalSeparatorRegex = new RegExp( options.separator );

...

Hope that helps to find a clean solution :wink:

rhhamburg on 17 Jun 2014

👍4

All 15 comments

Same problem here.

seanorama on 13 Jun 2014

This is a problem with the newline sign. Windows use \r\n and not \n. A quik fix for me was to add the following code in line 129 in the plugin file markdown.js

markdown = markdown.replace(/(\r\n|\r)/g, '\n');

The code then looks like this:

function slidify( markdown, options ) {

  options = getSlidifyOptions( options );

  markdown = markdown.replace(/(\r\n|\r)/g, '\n');

  var separatorRegex = new RegExp( options.separator + ( options.verticalSeparator ? '|' + options.verticalSeparator : '' ), 'mg' ),
  horizontalSeparatorRegex = new RegExp( options.separator );

...

Hope that helps to find a clean solution :wink:

rhhamburg on 17 Jun 2014

👍4

Folks, it looks to me as though the separators are actually processed _after_ the external markdown has been converted to HTML.

Here's the sequence in markdown.js where the external markdown is processed (see https://github.com/hakimel/reveal.js/blob/master/plugin/markdown/markdown.js#L386-L388):

        processSlides: processSlides,
        convertSlides: convertSlides,
        slidify: slidify

convertSlides calls the marked function to convert data-markdown to HTML.

_Then_ slidify is called, which uses data-separator. The upshot of this is that if you want to separate your slides with ---, then you have to set the data-separator to <hr>.

For sure this should be in the docs, unless it amounts to a difference between the way markdown is processed inline vs. external -- then the bug should be fixed.

jgn on 9 Dec 2014

try the following, work for me:

data-separator="^n---n$" data-vertical="^n--n$"

https://code.google.com/p/doconce/source/browse/doc/demos/slides/reveal.js/plugin/markdown/example.html?r=163e10bdd86a8a0bf673389f5228697392793ed3&spec=svn163e10bdd86a8a0bf673389f5228697392793ed3

tlyim on 14 Dec 2014

@acatyim For external markdown, that you serve through a web server?

jgn on 14 Dec 2014

external markdown, that you serve through a web server"

Yes, see Reveal-md_ext.md and index.html below:

Reveal-md_ext.md:

### Operating cycle/Cash conversion cycle (CCC)

Companies use cash to purchase or manufacture inventories held for
resale. Inventories are usually purchased on credit from suppliers

Note:
This is my note.

- It can contain markdown
- like this list

- - -

### Cash conversion cycle

| A   | Suppliers (agree to) deliver      | Operations (*increasing inventory* by $X)     |
|-----|-----------------------------------|-----------------------------------------------|
|     | inventory                         | → Create accounting vehicle (*increasing*     |
|     | suppliers                         |                                               |
|     |                                   |                                               |
| B   | Customers (agree to) acquire      | Operations (*decreasing inventory* by $Y)     |
|     | that inventory                    | → Create accounting vehicle (booking          |

- - -


### Solution

The ratios present a contradictory picture of the company’s liquidity.
The current ratio increases from 1.6 to 2.1, showing strong and

The company’s DOH has deteriorated from 30 days to 55 days, i.e. the
company is holding increasingly greater amounts of inventory relative to problem.

- -

### **No more ratios, please!**

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>reveal.js - The HTML Presentation Framework</title>
  <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
  <meta name="author" content="Hakim El Hattab">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" href="css/reveal.min.css">
  <link rel="stylesheet" href="css/theme/default.css" id="theme">
  <!-- link rel="stylesheet" href="css/print/pdf.css" id="print" -->

  <!-- For syntax highlighting -->
  <link rel="stylesheet" href="lib/css/zenburn.css">

  <!-- If the query includes 'print-pdf', include the PDF print sheet -->
  <script>
    if (window.location.search.match(/print-pdf/gi)) {
      var link = document.createElement('link');

      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = 'css/print/pdf.css';
      document.getElementsByTagName('head')[0].appendChild(link);
    }
  </script>

  <!--[if lt IE 9]>
    <script src="lib/js/html5shiv.js"></script>
  <![endif]-->
</head>
<body>
    <div class="reveal">
    <div class="slides">
  <!-- Slides  content to be added here -->


<section data-markdown="Reveal-md_ext.md" data-separator="^\n- - -\n$" data-vertical="^\n- -\n$" data-notes="^Note:"></section>

<!-- section data-markdown="Reveal-md_ext.md" data-separator="^\n\n\n" data-vertical="^\n\n" data-notes="^Note:"></section   -->


  <script src="lib/js/head.min.js"></script>
  <script src="js/reveal.min.js"></script>
  <script>
    // Full list of configuration options available here:
    // https://github.com/hakimel/reveal.js#configuration
    Reveal.initialize({
      controls: true,
      progress: true,
      history: true,
      center: true,

      theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
      transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none

      // Parallax scrolling
      // parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
      // parallaxBackgroundSize: '2100px 900px',

      // Optional libraries used to extend on reveal.js
      dependencies: [{
        src: 'lib/js/classList.js',
        condition: function () {
          return !document.body.classList;
        }
      }, {
        src: 'plugin/markdown/marked.js',
        condition: function () {
          return !!document.querySelector('[data-markdown]');
        }
      }, {
        src: 'plugin/markdown/markdown.js',
        condition: function () {
          return !!document.querySelector('[data-markdown]');
        }
      }, {
        src: 'plugin/highlight/highlight.js',
        async: true,
        callback: function () {
          hljs.initHighlightingOnLoad();
        }
      }, {
        src: 'plugin/zoom-js/zoom.js',
        async: true,
        condition: function () {
          return !!document.body.classList;
        }
      }, {
        src: 'plugin/notes/notes.js',
        async: true,
        condition: function () {
          return !!document.body.classList;
        },
      }, 

{ src: 'socket.io/socket.io.js', async: true },
{ src: 'plugin/notes-server/client.js', async: true }

      ]
    });
  </script>
  </div>
  </div>
</body>
</html>

tlyim on 14 Dec 2014

Alright, here's the issue.

You really have to use Grunt. I suspect that people who are having this problem aren't using Grunt. With Grunt, it works. Without Grunt (I was using the Rack-based Ruby "serve" gem - https://github.com/jlong/serve), one has to make the slide divider the "rendered" separator (which happens to be <hr>).

Not sure how Grunt has the magic to do this right, but I guess I'll look into it.

jgn on 14 Dec 2014

indeed, I used Grunt

tlyim on 15 Dec 2014

Haven't fully debugged, but I think this is a configuration issue. My own presentation to works just fine without using Grunt, yet @ocombe's test case does not work. Still digging...

callahad on 14 Mar 2015

Oh, @ocombe's test actually works just great for me after renaming data-vertical to data-separator-vertical (per changes from https://github.com/hakimel/reveal.js/commit/015468c3a2d1d4092f33920ac555a0e288e6213f, released in 3.0 on Jan 9, 2015).

I believe @rhhamburg correctly diagnosed the issue: if I switch my slides.md file between Unix and Windows line endings, it works (Unix) and fails (Windows).

Updating the regex to include an optional \r fixes it for me regardless of line endings: data-separator="^\r?\n----\r?\n$" data-separator-vertical="^\r?\n---\r?\n$"

Similarly, the following regex works with both line endings: data-separator="^----$" data-separator-vertical="^---$"

callahad on 14 Mar 2015

🎉1

@hakimel I suggest updating the DEFAULT_SLIDE_SEPARATOR in markdown.js line 29 with ^\r?\n---\r?\n$ (or just ^---$) and closing this as a configuration issue.

FWIW, in my own decks I use ^\s{0,3}-\s*-\s*-[-\s]*$ and ^\s{0,3}\*\s*\*\s*\*[\*\s]*$, which let me use a line of three or more hyphens or asterisks to indicate horizontal or vertical separations, respectively, which matches up nicely with Markdown's horizontal rule syntax.

callahad on 14 Mar 2015

@callahad Thanks for debugging this. I've updated the default slide separator regex as you suggested.

Closing.

hakimel on 16 Mar 2015

Did this bug creep back into the latest version. I cannot get a vertical slide to work - in either the external or md file.

For external
<section data-markdown="example.md" data-separator="^\n----\n" data-vertical="^\n---\n">
NOTE: I've also tried "^\rn---\rn" and ^\rn---\rn$" and "^n---n$"

And in this file...