Zoom in/out facility for remark.

remark is a simple, in-browser, markdown-driven slideshow tool targeted at people who know their way around HTML and CSS. It works well, but a strange issue bothers me that, browser's zoom in/out hotkeys are disabled by the remark (see issues at the remark project's repository).

remark-zoom tries to provide zoom in/out facility for remark.

Load the remark-zoom.js script file after remark-latest.min.js. For example,

<!-- load remark.js main script -->
<script src="https://gnab.github.io/remark/downloads/remark-latest.min.js" type="text/javascript"></script>
<script>
 var slideshow = remark.create();
</script>
<!-- load our remark-zoom.js -->
<script src="remark-zoom.js" type="text/javascript"></script>

The remark-zoom accepts the following keystrokes while viewing slides:

• + (plus): zoom in.

• - (minus): zoom out.

• 0 (zero): reset to normal size.

When these keys are pressed, all texts (except h1 h2 h3) will be zoomed immediately. Images, however, will be zoomed only when mouse over.

remark-zoom demo, hosted at GitHub Pages.

1. Change working directory to the slide directory.

2. Start a local web server, e.g.:

   $ python -m SimpleHTTPServer 8000
   

3. Use any modern web browser to view the slides:

   • Zoom demo: http://localhost:8000/demo.html

   • Remark intro (copied from remarkjs.com): http://localhost:8000/remark-intro.html

Feel free to change the port for HTTP.

Reference: https://github.com/gnab/remark/wiki#external-markdown

I have only tested the remark-zoom for the following browsers. Feel free to fork and create push requests.

OK:

• Chrome (on Mac): 37.0.2062.124

• Chrome (on Windows): 39.0

• Firefox (on Mac): 34.0

• IE (on Windows): 11.0.9600

Zoom for image doesn't work:

• Safari (on Mac): 8.0.2

Licensed under Apache License, Version 2.0.

Copyright © 2015 William Yeh.