https://github.com/fnaufel/xaringan-smartify
A javascript hack to turn ugly quotes and dashes (' " -- ---) into their pretty versions (‘ ’ “ ” – —) in xaringan HTML slides
https://github.com/fnaufel/xaringan-smartify
javascript markdown presentation remarkjs rmarkdown rstats rstudio slides typography xaringan
Last synced: about 2 months ago
JSON representation
A javascript hack to turn ugly quotes and dashes (' " -- ---) into their pretty versions (‘ ’ “ ” – —) in xaringan HTML slides
- Host: GitHub
- URL: https://github.com/fnaufel/xaringan-smartify
- Owner: fnaufel
- License: cc0-1.0
- Created: 2020-04-10T16:07:00.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-07-06T21:16:27.000Z (almost 4 years ago)
- Last Synced: 2025-01-25T10:27:22.318Z (4 months ago)
- Topics: javascript, markdown, presentation, remarkjs, rmarkdown, rstats, rstudio, slides, typography, xaringan
- Language: HTML
- Homepage:
- Size: 21.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# xaringan-smartify
*A javascript hack to turn ugly quotes and dashes (`' " -- ---`) into their pretty versions (‘ ’ “ ” – —) in [**xaringan**](https://github.com/yihui/xaringan) HTML slides*
## What
[**Xaringan**](https://github.com/yihui/xaringan) is a great R package by [Yihui Xie](https://yihui.org/). Using **xaringan**, you can create your slides in R Markdown and convert them into an HTML presentation.
For more details about **xaringan**, see this [book chapter](https://bookdown.org/yihui/rmarkdown/xaringan.html).
## Why
Other tools designed by Yihui (**bookdown**, **blogdown** etc.) translate from R Markdown to other formats using [**pandoc**](https://pandoc.org/), which takes care of converting ugly quotes and dashes (`' " -- ---`) into their pretty counterparts (‘ ’ “ ” – —).
However, when **xaringan** converts your slides to HTML, it relies on [**remarkjs**](http://remarkjs.com/) instead of **pandoc**, and **remarkjs** leaves the ugly punctuation unchanged.
**xaringan-smartify** is my javascript hack to process the HTML generated by **remarkjs** and beautify the punctuation. It is careful enough to never change what should stay unchanged: source code in code chunks, their output, math text, etc.
## How
I assume you're familiar with the use of **xaringan**.
To use **xaringan-smartify** without downloading anything, you must:
1. Add the following to the yaml metadata of your `.Rmd` file, indented under the `xaringan::moon_reader:` line:
```yaml
includes:
in_header: "in_header.html"
after_body: "after_body.html"
```
2. Create or modify your `in_header.html` file so it contains the lines:
```html
```
3. Create or modify your `after_body.html` file so it contains the line:
```html
smartify();
```
### Alternative: download `smartify.min.js`
If you want to, you can download the [smartify.min.js file from this repository](https://cdn.jsdelivr.net/gh/fnaufel/xaringan-smartify/smartify.min.js) and save it locally. If you do that, you must change the last line of `in_header.html` to contain the path name of the downloaded file in your computer.
### Example
In the [example directory](https://github.com/fnaufel/xaringan-smartify/tree/master/example), you will find a complete **xaringan** presentation (source R Markdown and generated HTML) that uses **xaringan-smartify**.
## Caveats
* **JQuery:** **xaringan-smartify** uses [JQuery](https://jquery.com/). A browser showing your presentation will have to download approximately 70kB of Javascript code to run **xaringan-smartify**. This is usually negligible, especially as modern browsers will keep recently used Javascript files in a cache.
If you want to avoid using this extra bandwidth when presenting your slides, you can download the [JQuery file](https://code.jquery.com/jquery-3.4.1.slim.min.js) and use it locally. In this case, don't forget to edit the `in_header.html` file to make it point to the downloaded file.
* **Display math:** **xaringan-smartify** is careful not to change anything inside math environments --- i.e., text between `$` (inline math) and text between `$$` (display math). However, there will be problems if, when writing *display* math, you leave the opening or the closing `$$` by itself in a line.
This is not a bug with **xaringan-smartify**. In fact, Yihui Xie recommends [here](https://github.com/yihui/xaringan/issues/82#issuecomment-343957854) that display math should be all one line, from the initial `$$` to the final `$$`, or the output may be incorrect.
* **Incorrect smart quotes:** sometimes, **xaringan-smartify** will insert the wrong type of quotes. You will find a couple of errors in the [sample presentation here](https://github.com/fnaufel/xaringan-smartify/tree/master/example).
This happens because **xaringan-smartify** uses regular expressions to decide on the conversions, and regular expressions are not powerful enough to process nested structures (such as quotes). The alternative would be to try to use a parser for a context-free language, but I think that would be overkill, as the examples where **xaringan-smartify** fails are few and atypical.
If you find an important error in the converted text, [please get in touch](https://github.com/fnaufel/xaringan-smartify/issues/new/choose) and I will do my best to fix it.
## Acknowledgments
* I want to thank Yihui Xie for promptly responding to my [Stack Overflow question](https://stackoverflow.com/questions/60922328/why-are-smart-quotes-and-em-dashes-not-appearing-in-xaringan-slides) about ugly quotes, and of course, for all the great packages he has given us.
* The regular expressions that **xaringan-smartify** uses have been shamelessly copied from the expressions in a [2010 blog post](http://www.leancrew.com/all-this/2010/11/smart-quotes-in-javascript/) by [Dr. Drang](https://github.com/drdrang), licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License.