Support self-contained images in xaringan slides (close #3)

[srvanderplas]

To contribute to this repo, please make sure to:

• [x ] Sign the CLA http://www.clahub.com/agreements/yihui/xaringan (if you haven't signed it before).
• [x ] Add a news item to NEWS.md and your name to DESCRIPTION (by alphabetical order) unless you have already been listed there.
• [x ] Provide a URL to a live example (and even better, a couple of screenshots) if you are contributing a new theme.

Thank you!

---

Demo: MWE with emoji icon

MWE in xaringan 0.15.1

MWE with self-contained image functionality

diff of HTML files (text file)

Rmd file for MWE

[srvanderplas]

Is there anything else I should do for this?

[yihui]

Nope. Sorry I haven't had a chance to review it yet...

[pat-s]

Hi @srvanderplas! Could you rebase your PR?

Also please format the code in utils.R and test-utils.R to a width of 80.

Could you add an example to your first post showing the changed behavior? That would help a lot.
Afterwards I can have a detailed look at the code :)

[srvanderplas]

'tis done. Let me know if you need anything else.

…

On Wed, Mar 4, 2020 at 1:19 AM Patrick Schratz ***@***.***> wrote: ***@***.**** commented on this pull request. Hi @srvanderplas <https://github.com/srvanderplas>! Could you rebase your PR? Also please format the code in utils.R and test-utils.R to a width of 80. Could you add an example to your first post showing the changed behavior? That would help a lot. Afterwards I can have a detailed look at the code :) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#207?email_source=notifications&email_token=AAQHKFMQ4U6X7YOMKCA3IMTRFX6HZA5CNFSM4HGNKUVKYY3PNVWWK3TUL52HS4DFWFIHK3DMKJSXC5LFON2FEZLWNFSXPKTDN5WW2ZLOORPWSZGOCX3ZW7I#pullrequestreview-368548733>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAQHKFNSNGMPHV3SZBWYFWDRFX6HZANCNFSM4HGNKUVA> .

[mschilli87]

There seem to be quite some unrelated changes in this PR now.

[pat-s]

There seem to be quite some unrelated changes in this PR now.

Right, something went wrong during the merge/rebase.

@srvanderplas Could you please clean up and just keep the changes related to this PR? Atm there are many changes to files like NEWS.md or the GH issue template.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 2 committers have signed the CLA.

✅ yihui
❌ srvanderplas
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[yihui]

I've heavily tweaked this PR, and it should be ready to merge now. But I have just submitted a new version of xaringan to CRAN yesterday, so please do not merge this one until that version appears on CRAN (this PR will go to the next version).

Don't tell Jared that he can order his new computer now.

[yihui]

I'm writing down the basic idea of the implementation here just in case anyone (including my future self) needs to understand it.

Extract and (base64) encode images, and store the encoded data outside the Markdown text as a JS object. After remark.js has rendered the slides, insert the encoded images back to the slides.

1. Markdown images (could be <img/> or background-image: url()

![](foo.png) ![](bar.jpg)

2. Hide them first

![](data:image/png;base64,#foo.png) ![](data:image/png;base64,#bar.jpg)

Put the base64 data outside the Markdown text:

<script>
{
  "foo.png": "data:image/png;base64,*",
  "bar.jpg": "data:image/jpeg;base64,*"
}
</script>

3. Renders slides and post-process them

<textarea>
<img src="data:image/png;base64,#foo.png" /> <img src="data:image/png;base64,#bar.jpg" />
</textarea>

<script>remark.create();</script>
<script>{ base64 data }</script>

4. The src attributes have the correct base64 data now

<img src="data:image/png;base64,*" />
<img src="data:image/jpeg;base64,*" />