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 >}}">