base64 shortcode for Quarto

A Quarto shortcode to easily base64 encode images and other files

Easily embed base64 encoded files in your Quarto documents.

Why would you want to do this? If you’re using the shinylive Quarto extension, you can use the base64 shortcode to embed binary files in your Shinylive apps.

If you aren’t using Shinylive, pandoc can help you embed images in your documents via --embed-resources (or embed-resources: true in Quarto). But this applies to all images and resources in your document. If you find yourself wanting to embed a single image or resource: the base64-data shortcode can help!

Installing

quarto add gadenbuie/quarto-base64

This will install the extension under the _extensions subdirectory. If you’re using version control, you will want to check in this directory.

Using

base64

To encode a file into a base64 string, use the base64 shortcode.

```{shinylive-python}
#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
## file: app.py
from pathlib import Path

from shiny.express import render, ui

@render.ui
def image():
    return ui.img(src="photo.png")

## file: www/photo.png
## type: binary
{{< base64 photo.png >}}
```

base64-data

To encode a file into a base64 data URI, use the base64-data shortcode.

![]({{< base64-data photo.png >}})

The base64-data shortcode will automatically guess the MIME type of the file using the puremagic Lua module. If it guesses wrong, or can’t determine the MIME type, you can specify the MIME type explicitly.

![]({{< base64-data photo.png "image/png" >}})

Example

{{< base64 photo.png >}}
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
<img src="{{< base64-data photo.png >}}">