Extended Shortcode - typeit

The typeit shortcode provides typing animation based on TypeIt library.

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

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:

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:

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: