README

and tutorials

2024-09-23

Outline

• Customized Fragments
  • highlight and highlight-current
  • highlight
  • highlight-current
  • highlight-bold and highlight-current-bold
  • blur
• Inline tags and images

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.