README

and tutorials

2024-09-23

Customized Fragments

highlight and highlight-current

highlight

Despite the default green, red, and blue, there are three colors available for this template:

  • forest green,
  • indian red, and
  • steel blue.

Code:

- <span class="fragment highlight-forestgreen" fragment-index=1>forest green</span>,
- <span class="fragment highlight-indianred" fragment-index=2>indian red</span>, and
- <span class="fragment highlight-steelblue" fragment-index=3>steel blue</span>.

Noted that, class fragment- with highlight-forestgreen, highlight-indianred, highlight-steelblue also highlight the fragment of current index with font-weight bold.

highlight-current

Similar to the use of highlight, but the effects will disappear if next fragment index is triggered.

Code:

- <span class="fragment highlight-current-forestgreen" fragment-index=1>forest green</span>,
- <span class="fragment highlight-current-indianred" fragment-index=2>indian red</span>, and
- <span class="fragment highlight-current-steelblue" fragment-index=3>steel blue</span>.

Output:

  • forest green,
  • indian red, and
  • steel blue.

highlight-bold and highlight-current-bold

When using highlight-bold and highlight-current-bold the original color is inherited. Both of them highlights the text with bold and slight shading.

Code:

- <span class="fragment highlight-current-bold" fragment-index=1>bold (current)</span>,
- <span class="fragment highlight-bold" fragment-index=2>bold (persistent)indian red</span>, and
- <span class="fragment highlight-current-bold" fragment-index=1>bold (current)</span>
  • bold (current),
  • bold (persistent), and
  • bold (current)

blur

Blur the text in the beginning, and then unveil it.

Code:

- <span class="fragment blur" fragment-index=1>Blurred text.</span>
  • Blurred text.

Inline tags and images

rtag, ltag and nftag

Code:

- Hello World [a no-floating tag]{.nftag fragment-index=1 .fragment}
- Hello World [a align-right tag]{.rtag fragment-index=2 .fragment}
- Hello World [a align-left tag]{.ltag fragment-index=3 .fragment}
  • Hello World a no-floating tag
  • Hello World a align-right tag
  • Hello World a align-left tag

Inline image

Code:

- Hello, this (![](non-existing.png){.inlineimg}) is an inline image.
  • Hello, this () is an inline image.