example.qmd

---
title: "Highlight-text Quarto Extension"
format:
  html:
    output-file: index
  typst:
    output-file: highlight-typst
    papersize: a4
    margin:
      x: 2.5cm
      y: 2.5cm
  pdf:
    output-file: highlight-latex
    papersize: a4
    margin:
      x: 2.5cm
      y: 2.5cm
  docx:
    output-file: highlight-docx
  revealjs:
    output-file: highlight-revealjs
  beamer:
    output-file: highlight-beamer
    aspectratio: 169
  pptx:
    output-file: highlight-pptx
format-links: true
embed-resources: true
execute:
  echo: true
filters:
  - highlight-text
brand:
  color:
    palette:
      blue: "#0000ff"
      red: "#b22222"
    primary: "#ffffff"
---

This is a Quarto extension that allows to highlight text in a document for various format: HTML, LaTeX, Typst, and Docx.

## Installing

```bash
quarto add mcanouil/quarto-highlight-text
```

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

## Using

To use the extension, add the following to your document's front matter:

```yaml
filters:
  - highlight-text
```

Then you can use the span syntax markup to highlight text in your document.

```markdown
[Red]{colour="#b22222" bg-colour="#abc123"} # UK
[Red]{fg="#b22222" bg="#abc123"}
[Blue]{color="#0000FF" bg-color="#ABC123"} # US
```

## Font Colour

```markdown
[Red text]{colour="#b22222"}
```

[Red text]{colour="#b22222"}

```markdown
[Blue text]{color="#0000FF"}
```

[Blue text]{color="#0000FF"}

## Background Colour

```markdown
[Red background]{bg-colour="#b22222"}
```

[Red background]{bg-colour="#b22222"}

```markdown
[Blue background]{bg-color="#0000FF"}
```

[Blue background]{bg-color="#0000FF"}

## Font and Background Colour

```markdown
[White text, Red background]{
  fg="#FFFFFF" bg="#b22222"
}
```

[White text, Red background]{fg="#FFFFFF" bg="#b22222"}

```markdown
[White text, Blue background]{
  colour="#FFFFFF" bg-colour="#0000FF"
}
```

[White text, Blue background]{colour="#FFFFFF" bg-colour="#0000FF"}

## More Examples

```markdown
[text [with a link](https://quarto.org/)]{
  color="#FFFFFF" bg-color="#00FFFF"
}
```

[text [with a link](https://quarto.org/)]{
  color="#FFFFFF" bg-color="#00FFFF"
}

## `_brand.yml`

```markdown
[White text, Red background]{
  colour="brand-color.primary" bg-colour="brand-color.red"
}
```

[White text, Red background]{colour="brand-color.primary" bg-colour="brand-color.red"}

```markdown
[White text, Blue background]{
  color="brand-color.primary" bg-color="brand-color.blue"
}
```

[White text, Blue background]{color="brand-color.primary" bg-color="brand-color.blue"}