Theme Documentation - typeit Shortcode

The typeit shortcode provides typing animation based on TypeIt library.

Just insert your content in the typeit shortcode and that’s it.

1 Simple Content

Simple content is allowed in Markdown format and without rich block content such as images and more…

Example typeit input:

1
2
3

{{< typeit >}}
This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
{{< /typeit >}}

The rendered output looks like this:

Alternatively, you can use custom HTML tags.

Example typeit input with h4 tag:

1
2
3

{{< typeit tag=h4 >}}
This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
{{< /typeit >}}

The rendered output looks like this:

2 Code Content

Code content is allowed and will be highlighted by named parameter code for the type of code language.

Example typeit input with code:

1
2
3
4
5
6
7

{{< typeit code=java >}}
public class HelloWorld {
    public static void main(String []args) {
        System.out.println("Hello World");
    }
}
{{< /typeit >}}

The rendered output looks like this:

3 Group Content

All typing animations start at the same time by default. But sometimes you may want to start a set of typeit contents in order.

A set of typeit contents with the same value of named parameter group will start typing animation in sequence.

Example typeit input with group:

1
2
3
4
5
6
7

{{< typeit group=paragraph >}}
**First** this paragraph begins
{{< /typeit >}}

{{< typeit group=paragraph >}}
**Then** this paragraph begins
{{< /typeit >}}

The rendered output looks like this: