Remark: How to go offline

Created on 3 Feb 2015 · 11Comments · Source: gnab/remark

Hi!
Is there an easy guide on how to download everything to put it on a usb stick and go offline?
Or, how can I go offline? (mathjax included)

question

Source

brunetto

👍1

Most helpful comment

This is fairly easy to do, the following steps should do this..

Download the latest release of remark
Copy the remark.min.js file from the out directory into your presentation directory
Update your html file to point the script src for remark to the local file such as <script src="remark.min.js">
Go to http://www.google.com/fonts and find the three required font families adding them to your collection. You can then click 'USE' on the collection and click the download link.

2015-03-06 09_33_17-google fonts

2015-03-06 09_33_30-google fonts

Copy the required .ttf files to the presentation directory
Update the style element in the presentation html file to import the fonts. Notice the change to @font-face instead of import.

Your presentation HTML file will look something like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
      @font-face{
        font-family: 'Droid Serif';
        src: url('DroidSerif.ttf');
      }
      @font-face{
        font-family: 'Yanone Kaffeesatz';
        src: url('YanoneKaffeesatz-Regular.ttf');
      }
      @font-face{
        font-family: 'Ubuntu Mono';
        src: url('UbuntuMono-Regular.ttf');
      }

      body { font-family: 'Droid Serif'; }
      h1, h2, h3 {
        font-family: 'Yanone Kaffeesatz';
        font-weight: normal;
      }
      .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
    </style>
  </head>
  <body>
    <textarea id="source">

class: center, middle

# Title

---

# Agenda

1. Introduction
2. Deep-dive
3. ...

---

# Introduction

    </textarea>
    <script src="remark.min.js">
    </script>
    <script>
      var slideshow = remark.create();
    </script>
  </body>
</html>

My directory for the presentation now looks like this:

2015-03-06 09_32_19-test

junderhill on 6 Mar 2015

👍7

All 11 comments

This is fairly easy to do, the following steps should do this..

Download the latest release of remark
Copy the remark.min.js file from the out directory into your presentation directory
Update your html file to point the script src for remark to the local file such as <script src="remark.min.js">
Go to http://www.google.com/fonts and find the three required font families adding them to your collection. You can then click 'USE' on the collection and click the download link.

2015-03-06 09_33_17-google fonts

2015-03-06 09_33_30-google fonts

Copy the required .ttf files to the presentation directory
Update the style element in the presentation html file to import the fonts. Notice the change to @font-face instead of import.

Your presentation HTML file will look something like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
      @font-face{
        font-family: 'Droid Serif';
        src: url('DroidSerif.ttf');
      }
      @font-face{
        font-family: 'Yanone Kaffeesatz';
        src: url('YanoneKaffeesatz-Regular.ttf');
      }
      @font-face{
        font-family: 'Ubuntu Mono';
        src: url('UbuntuMono-Regular.ttf');
      }

      body { font-family: 'Droid Serif'; }
      h1, h2, h3 {
        font-family: 'Yanone Kaffeesatz';
        font-weight: normal;
      }
      .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
    </style>
  </head>
  <body>
    <textarea id="source">

class: center, middle

# Title

---

# Agenda

1. Introduction
2. Deep-dive
3. ...

---

# Introduction

    </textarea>
    <script src="remark.min.js">
    </script>
    <script>
      var slideshow = remark.create();
    </script>
  </body>
</html>

My directory for the presentation now looks like this:

2015-03-06 09_32_19-test

junderhill on 6 Mar 2015

👍7

Thanks!! Do I have to download also mathjax isn't it?

brunetto on 6 Mar 2015

Not that I can see, there's not references to it from the remark.js source and a quick test of the above seems to work fine. Where is that library mentioned? I don't recall seeing it anywhere.

junderhill on 6 Mar 2015

I need it to show equations in the presentations...

Here there's the wiki page and this is what I put at the end of the html file

    <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML&delayStartupUntil=configured" type="text/javascript"></script>
    <script type="text/javascript">
    var slideshow = remark.create({
    sourceUrl: './GM11.md',
});
        // Setup MathJax
        MathJax.Hub.Config({
            tex2jax: {
            inlineMath: [ ['$','$'], ["\\(","\\)"] ],
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
            extensions: ["AMSmath.js", "AMSsymbols.js", "autobold.js"]
            }
        });
        MathJax.Hub.Queue(function() {
            $(MathJax.Hub.getAllJax()).map(function(index, elem) {
                return(elem.SourceElement());
            }).parent().addClass('has-jax');
        });

        MathJax.Hub.Configured();
    </script>

Probably I just need to figure out from the Mathjax site how to do this.

brunetto on 6 Mar 2015

Ah ok, I would download the MathJax.js file to the presentation directory, update the script tag src to use the local one leaving the query string parameters.. Something like:

<script src="MathJax.js?config=TeX-AMS_HTML&delayStartupUntil=configured" type="text/javascript"></script>

junderhill on 6 Mar 2015

ok, thanks!!
I'll try asap.

brunetto on 6 Mar 2015

Thanks for the nice piece of software.
Unfortunately, just downloading Mathjax.js does not work for me.

I get strangely enough. It renders correctly, but after a few seconds I get:

[Math Processing Error]

Any ideas?

PS: are long subscripts supposed to be supported?

$$x_{n+1}$$

spitters on 25 Aug 2015

It looks like a need a number of files:

fontdata.js -> jax/output/HTML-CSS/fonts/STIX/STIX/fontdata.js
jax.js -> jax/output/HTML-CSS/jax.js
MathJax.js
MathMenu.js
MathZoom.js
remark-latest.min.js
TeX-AMS_HTML.js

However, it is still unpredictable. I'll report if I have a complete solution. Meanwhile help would be appreciated.

spitters on 25 Aug 2015

There is also:
jax/output/HTML-CSS/fonts/STIX/STIX/fontdata-extra.js

Looks like installing the mathjax debian packages did the trick.

spitters on 25 Aug 2015

Thanks for this information in this issue; my interest in offline presentation is because I don't want to assume that I'll have internet access in the moment I'm starting my presentation (sure, it's actually when I load the presentation, but still too risky).

A small FYI, If you use markdown-to-slides (>= 1.0.3; April 2016) to compile Markdown to HTML, it includes the content of remark.js in the generated HTML as:

markdown-to-slides --include-remark slides.md -o slides.html

It's also worth mentioning https://github.com/TalAter/UpUp, which provides generic _offline caching_ of any website content. I haven't tried it, so I don't know how much work it is to get it working with Remark and whether it is possible to use locally (i.e. not sure if HTTPS server is needed). Just my two cents.

HenrikBengtsson on 20 Jun 2016

If you need italic or bold fonts you also need to add this:

      @font-face{
        font-family: 'Droid Serif';
        src: url('Fonts/DroidSerif-Bold.ttf');
        font-weight: bold;
      }

      @font-face{
        font-family: 'Droid Serif';
        src: url('Fonts/DroidSerif-Italic.ttf');
        font-style: italic;
      }

      @font-face{
        font-family: 'Droid Serif';
        src: url('Fonts/DroidSerif-BoldItalic.ttf');
        font-weight: bold;
        font-style: italic;
      }

My fonts are in the Fonts folder. Of you need also the oblique variant you need to add them too. More info is available at http://stackoverflow.com/a/28571625.