6.10 Extensions

Quarto Extensions

6.10.1 Color Text

Create a filter to apply blue text color to fenced div.

  • Created a minimal local color-text filter:
    • Added _quiz/_extensions/color-text/color-text.lua
    • It supports the .blue class for both blocks and inline spans:
      • HTML: adds style="color: blue;"
      • PDF: wraps with LaTeX xcolor; automatically injects \usepackage{xcolor}
  • Updated the qmd file YAML to reference this local filter:
    • filters:
      • _extensions/color-text/color-text.lua
  • You can use fenced divs and inline spans with .blue.

Use example

  1. In the yaml header of your qmd file, add the following line to reference the local filter:

    ---
title: "Quiz: Linear Regression and Hypothesis Testing (p2)"
from: markdown+tex_math_single_backslash
params:
  # solution: false
  solution: true
filters:
  - _extensions/color-text/color-text.lua
format:
  pdf:
    include-in-header: ../latex/preamble.tex
    fontsize: 12pt
---

  2. Use the .blue class in your markdown content:

    ::: {.content-visible when-meta="params.solution"}
::: {.blue}
**Solutions**
(a) The 95% confidence interval for $\beta_1$ is given by
  $$
  \hat{\beta}_1 \pm t_{0.975, n-2} \cdot SE(\hat{\beta}_1)
  $$
  Degrees of freedom: $df = n-2 = 50-2 = 48$
(b)
:::
:::

6.10.2 Emoji

In the yaml, add the emoji extension to the from option in document metadata.

---
title: "My Document"
from: markdown+emoji
---

For markdown formats that support text representations of emojis 😁 (e.g. :grinning:), the text version will be written. For other formats the literal emoji character will be written. Currently, the gfm and hugo (with enableEmoji = true in the site config) formats both support text representation of emojis.

Note: This does NOT work for quarto pdf. Use the twemoji approach instead. See below.

twemoji

Four steps to add more emojis in the future:

  1. Open twemoji_manifest.json and append new code points to the emoji object

    • Example: "1f44d": ["👍", ":thumbsup:"]

    How to find the code points of an emoji:

    node -e 'const s=process.argv[1]; const codes=[...s].map(ch=>ch.codePointAt(0).toString(16)); console.log(codes.join("-"))' '⚠️'
# Prints: 26a0-fe0f  → Twemoji file: assets/72x72/26a0-fe0f.png (often 26a0.png also exists)

  2. Run the fetcher again:

    Within the project directory:

    $./emoji/fetch_twemoji.sh

    From anywhere:

    $'/Users/menghan/Documents/language/norsk/norskprøver/B2/exam notes/emoji/fetch_twemoji.sh'
Exists: 1f4a1.png
Exists: 1f4c8.png
Exists: 1f4dd.png
Exists: 1f539.png
Exists: 1f600.png
Exists: 1f604.png
Exists: 1f680.png
Exists: 26a0.png
Downloading: 2705.png
Done. Files saved in ~/Documents/language/norsk/norskprøver/B2/exam notes/emoji. Map to filter names as needed (already matching).

    The script downloads only missing PNGs. If you add more codes to twemoji_manifest.json, just run it again.

    To refresh files, delete specific PNGs (or all) in emoji and rerun.

  3. Add to unicode_map in emoji.lua to point to the same filename.

    • Example: ["⚠️"] = "26a0.png",

    This ensures when you use the emoji directly, it maps to the correct image file.

  4. Optionally add a shortcode mapping in emoji.lua’s emoji_map to point to the same filename.

    • Example: [":warning:"] = "26a0.png",

    This allows you to use the shortcode :warning: in addition to the direct emoji.

🎯 Usage Examples

You can now use emojis in your QMD files in two ways:

  • Direct Unicode: Great job! 👍 This is amazing! 🎉
  • Shortcodes: Great job! :thumbsup: This is amazing! :tada:

ref: