Reveal.js: Support for external HTML

[Crell]

It's great that Reveal.js supports including partial files using Markdown. However, I don't use Markdown. I prefer to work in straight HTML. It would be very helpful to have the same capability for straight up HTML, especially if it can be done client side.

My first thought is XInclude, which although it's a pure-XML tool should work fine with well-written HTML. I don't know of any browsers that support XInclude tags natively, but it looks like Mozilla has some sample code that could do it:

https://developer.mozilla.org/en-US/docs/XInclude

I haven't tried using it yet, but I'd definitely love to see such a feature.

(Background: My company is starting up training offerings and I'm pushing for us to standardize on Reveal.js for them to make it easier to collaborate on slides via Git, but some people dislike having 3 people's slides all in one file. If we could break them out by "chapter" (first-level section) that would make it easier to collaborate as well as easier to mix-and-match chapters for different presentations.)

Thanks for the great tool!

[tomByrer]

Couldn't you just 'inject the HTML'?

[Crell]

What do you mean "inject the HTML"? If you mean as a string rather than using XInclude, sure, probably, but you still need some kind of syntax to trigger that to happen. XInclude is an existing syntax, which is why I mention it. It's not the only option to use, probably, just the one with which I am most familiar.

[hakimel]

I can see how this would be useful. It should be implemented so that the external .html files load the same way as external Markdown (XHR). This probably belongs in a new plugin, _external-html_? And it could use data attributes like markdown as well:

<section data-html="/my/external.html"></section>

[Crell]

If possible, I'd recommend not even using a custom attribute for it. The XInclude spec/syntax is already very well developed, and its rules and semantics very well known. I know it's dead-simple to do on the server-side in PHP, but I haven't tried doing it in Javascript. (Hence why I looked up an implementation as linked above.)

[rparree]

My few cents on this...

Is XInclude intended for HTML. I thought it lends itself more for XML (and therefore XHTML). Also i believe the DOM will need to be parsed upon loading. I guess with a data-attribute/javascript we could load it when needed. I have used xinclude extensively in the past, but never with html(5)

Also note you can already use something like

<object data="some-file.html"></object>

However there are some issues (like CSS, explicitly having to set width/height)

Also there is the HTML5 iframe seamless attribute. However that is not supported by all browsers yet.

[tomByrer]

Also there is the HTML5 iframe seamless attribute. However that is not supported by all browsers yet.

Too bad; that would be interesting to try out.
Seems Ben Vinegar of Disqus found a JS workaround: http://benvinegar.github.io/seamless-talk/#/15 (repo)

[matbury]

Yeah, at the moment I'm printing out external HTML files with PHP file_get_contents(). It'd be nice to be able to do the whole thing without server-side scripting, e.g. with JavaScript. That way you can keep presentations on a USB and run them more easily than PPT ;)

[ggarnier]

I don't know if this helps, but I just created a project called reveal.rb. It's just a couple of commands that let you create a reveal.js presentation with a .md file for each slide. The idea is to make it easier to manage, version, add and reorder slides on a presentation. Hope it helps:

https://github.com/ggarnier/reveal.rb

[yorch]

You can use HTML inside Markdown, so you would just need to enclose all the content of the md file in an HTML tag (like <div> or <section>):

<section data-markdown="section-1.md"></section>

Where section-1.md is:

<div>
  <h2>Title</h2>
</div>

[Crell]

It looks like Cal Evans has a simple solution here: https://blog.calevans.com/2015/12/09/load-external-html-into-reveal-js-presentations/

I've not tried it yet, but he references this issue. :smile: @hakimel, your thoughts? Is that a good approach? Should it be left as a stand-alone script or is it simple enough that it makes sense to fold in?

[bnjmnt4n]

@calevan’s solution seems fine. Closing this for now since there’s a plugin for it.