2.76 KB
Newer Older
Kristin Riebe's avatar
Kristin Riebe committed
Style sheet and images for AIP-like presentations using [remark.js]( and [markdown-to-slides](  
Kristin Riebe's avatar
Kristin Riebe committed

3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
## Install
You will need to install [markdown-to-slides]( for easily wrapping the necessary html-stuff around your markdown-text. 

npm install markdown-to-slides -g

It will automatically include `remark.js` via an online link; for offline-presentations make sure to include the javascript directly in your html-file or replace the link by a link to your local copy of remark.js.

## Example, instructions
See []( / [presentation.html](presentation.html) for an example and a few guidelines, and also consult [remark.js]( and [markdown-to-slides]( for detailed instructions.  

Basically, all you need to do is write your markdown file, separate slides using a line with 3 dashes `---`, run 

markdown-to-slides --style aipslides.css -o presentation.html

and open `presentation.html` with a browser.

## Export to pdf
Creating a html-presentation with remark.js is nice and cool, but if you want a pdf-export, that's not so straightforward. Opening the html-presentation with a browser and using the browser's "Print to pdf" option should work, but it seems that each browser type and version has its own hassles, usually with big white margins or links not being interactive anymore. Here are some things I tried. Good luck!

* Chromium-Browser: Version 49.0.2623.108 Ubuntu 14.04 (64-bit)
    - In the menu, select "Print ..."
    - Choose "Save as PDF"
    - Save
    Results in white margin, even if margins are set to minimum or custom
    Printing using the system dialog and adjusting page settings (Orientation: "Landscape", Paper size: 7.50 inch x 10.00 inch) also gives no different result. The white margin remains.

* Fixing white margin issue in Chromium:
    - Go to "More Tools" -> "Developer Tools" (or right click: "Inspect")
    - Adjust the page such, that the body (class="remark-container") is exactly `907 x 681` pixels wide and high. For some reason only then printing as above won't produce a margin.
    - It may produce an empty page at the end, but one can easily remove that with some other tool.
    - Take care that all pictures are still placed properly, sometimes they appear shifted in the pdf-output. 

39 40 41 42 43 44 45 46
* Google Chrome 49.0.2623.112.m, Windows 7 64 bit:
    - Also enable developer tools, choose `907` pixel width (computed)
    - Print-diaglogue, pdf-print: choose format "Slide 7.50x10.00", no margins
    - Save pdf

Created by Kristin Riebe, AIP, September 2015.  
Updated, polished and versioned with GitLab in April/May 2016.  
Kristin Riebe's avatar
Kristin Riebe committed