Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: Export to single HTML #788

Closed
paulodiovani opened this issue Jan 29, 2014 · 18 comments

Comments

@paulodiovani
Copy link

commented Jan 29, 2014

Write presentations in Markdown is a great time-saving, but since they can only run from the Grunt server, it makes impossible to write it on an usb flash drive to present somewhere else or save on github gh-pages.

I think that an optio to export a single HTML file presentation would be wellcome, converting Markdown, adding scripts and styles. Even imagem can be attached with base64 notation.

@stylerw

This comment has been minimized.

Copy link

commented Feb 2, 2014

I'd second this, or even go so far as to recommend that a flat HTML version be created with each run. (indexflat.html).

@webmaven

This comment has been minimized.

Copy link

commented Feb 4, 2014

👍

@hakimel

This comment has been minimized.

Copy link
Owner

commented Feb 18, 2014

Anyone interested in trying to write a Grunt task for this?

@rohithpr

This comment has been minimized.

Copy link
Contributor

commented Feb 4, 2016

+1

@Leftium

This comment has been minimized.

Copy link

commented Jul 28, 2016

I tried a few different inlining tools; I think this one might work: html-inline.

However, there is a problem with resources that are referenced inside JavaScript options, for example:

Parallax backgrounds are no big loss, but lack of dependencies means I can't use markdown slides.

I tried loading the markdown plugins as regular script files so the inliner would find them (and commented out the dependencies). The file works fine before inlining, but not after. The inlined version gets this error: inlined.html:1868 Uncaught SyntaxError: Invalid or unexpected token where inlined.html:1868 is this line from function getMarkdownFromSlide():

    text = text.replace( new RegExp( SCRIPT_END_PLACEHOLDER, 'g' ), '</script>' );

Any ideas why? What would be different between loading markdown.js as a script file and inlining it?

update: the error was because the script being inlined had a string with the text </script> in it...

I'm so close to creating single-file reveal.js presentations that are simple to share!

@Leftium

This comment has been minimized.

Copy link

commented Jul 28, 2016

I did it! Here is reveal.js/plugin/markdown/example.html as a single, inlined html file: example-modded-inlined.html. The example.md file is not inlined, but everything else is~

Here are the steps to inline your own presentations into a single file:

  1. Modify the html file so the markdown plugin JS files are loaded via <script> tags. Like my example-modded.html.
  2. Process this html file with html-inline.
  3. Replace all occurrences of </script>' with <\/script>' so the HTML is not parsed incorrectly. There should only be two places. (Alternatively, modify markdown.js before inlining.)
@webmaven

This comment has been minimized.

Copy link

commented Sep 17, 2016

Awesome, @Leftium!

@hkdobrev

This comment has been minimized.

Copy link

commented Sep 26, 2016

@Leftium I see you haven't inlined the dependencies in the Reveal.js configuration. Have you found a way to address this?

@Leftium

This comment has been minimized.

Copy link

commented Sep 27, 2016

@hkdobrev I'm not sure if this will work for all the dependencies, but I just replaced the Reveal.js dependency configuration with actual script tags. The order required is:

  1. marked.js
  2. markdown.js
  3. reveal.js

I don't use that many dependencies, but I haven't noticed feature degradation at all. Touch swipe gestures, zoom, etc all seem to work.

@hkdobrev

This comment has been minimized.

Copy link

commented Sep 27, 2016

I can now confirm this approach seems to be working.

For reference here's an example of using reveal.js with inliner:

https://github.com/hkdobrev/service-providers-slides

In the master branch you will see the source of the presentation. Reveal.js and the inliner are npm dependencies. Once you run npm install you can run npm run-script dist to prepare the dist.html with everything inlined. You will find the published version in the gh-pages branch in a single index.html file.

P.S. If you are using the inliner library keep track of this issue remy/inliner#120 which prevents Markdown templates from being used unless you specifically do not inline sources. If that issue is addressed, you could minify CSS and JS with the inliner library. For now I'm using the --nocompress option.

@ostcar

This comment has been minimized.

Copy link

commented Apr 2, 2017

@jhofker You tipp worked perfectly. It would be nice, if the inliner command would be added to the Grundfile of if this tip would be mentioned in the readme.

@niklaas

This comment has been minimized.

Copy link

commented Apr 24, 2017

You know that rstudio/revealjs does exactly that, don't you? The only thing is that it normally uses Rmarkdown as input, and not HTML. However, you can also use raw HTML in these files (giving you back flexibility). Anyway, maybe digging into their way of packing everything in one file will help here.

@bnjmnt4n

This comment has been minimized.

Copy link
Collaborator

commented May 3, 2017

Thanks for all the useful tools and tips! I'm closing this issue for now, but you can add some of the tools to the Plugins page to share it with others!

@bnjmnt4n bnjmnt4n closed this May 3, 2017

@bnjmnt4n bnjmnt4n added the plugin label May 3, 2017

@NicolasWebDev

This comment has been minimized.

Copy link

commented May 8, 2017

To make @Leftium solution work, I had to load reveal.js before the other two markdown scripts.

<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script src="plugin/markdown/marked.js"></script>
<script src="plugin/markdown/markdown.js"></script>

With that, everything worked like a charm.

@s1n

This comment has been minimized.

Copy link

commented Sep 12, 2017

I tried this and when I relocated the file, it failed to process data-markdown nested sections. Does this only work if I use HTML directly?

@Leftium

This comment has been minimized.

Copy link

commented Sep 16, 2017

Is @s1n trying to inline external markdown files? I write my content directly in the HTML file, and it works fine. Like this:

<section data-markdown data-separator="^\n---\n$"
         data-separator-vertical="^\n--\n$"
         data-element-attributes="\|s*?([^|]+?)\|">
  <script type="text/template">

# Markdown

  </script>
</section>

Also see @hkdobrev's example using Markdown.


If you're trying to inline an external Markdown file, that won't work unless the inliner is smart enough to recognize Reveal.js's special syntax referring to the external file. I opened an issue for inliner.

If you need to work with external Markdown files, a work-around may be to use Pandoc:

pandoc -t revealjs -s -o myslides.html myslides.md
@s1n

This comment has been minimized.

Copy link

commented Sep 21, 2017

I think the thing that finally worked for me was adding the --nocompress option that I wasn't using previously. When you have that, it smashes the markdown and it no longer looks as it did before.

+1 for inliner!

@hkdobrev

This comment has been minimized.

Copy link

commented Sep 21, 2017

@s1n Correct, --nocompress is crucial when using Markdown 😉 Cheers!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.