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.

The typeit shortcode has the following named parameters:

• tag [optional]

  HTML tag of the content container.

• code [optional]

  Specify the language type of the code content that will be highlighted.

• code-link [optional]

  Whether to parse Markdown links in code content, default: false.

• group [optional]

  Grouping of content, the content of the same group will start typing animation in order.

• speed [optional]

  Typing speed between each step (measured in milliseconds), default: 100.

• cursorSpeed [optional]

  Blinking speed of the cursor (measured in milliseconds), default: 1000.

• cursorChar [optional]

  Character used for the cursor (HTML format is supported), default: |.

• duration [optional]

  Cursor duration after typing finishing (measured in milliseconds, -1 means unlimited), default: -1.

• loop [optional]

  Whether your content will continuously loop after completing.

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:

Loop Content

By default, the typing animation will stop after completion.

Example typeit input with loop:

1
2
3

{{< typeit loop=true >}}
This content will continue to loop after the typing animation is complete.
{{< /typeit >}}

The rendered output looks like this: