扩展 Shortcode - Typeit

typeit shortcode 基于 TypeIt 提供了打字动画。

只需将你需要打字动画的内容插入 typeit shortcode 中即可。

typeit shortcode 有以下具名参数：

• tag [可选]

  内容容器的 HTML 标签。

• code [可选]

  指定代码内容语言类型，可以实习语法高亮。

• code-link [可选]

  是否解析代码内容中的 Markdown 链接，默认：false。

• group [可选]

  内容分组，相同分组的内容将按顺序开始打字动画。

• speed [可选]

  每一步的打字速度 (单位是毫秒)，默认：100。

• cursorSpeed [可选]

  光标闪烁速度 (单位是毫秒)，默认：1000。

• cursorChar [可选]

  光标使用的字符 (支持 HTML 格式)，默认：|。

• duration [可选]

  打字动画完成后光标持续时间 (单位是毫秒，-1 表示无限)，默认：-1。

• loop [可选]

  内容是否会在打字动画完成后继续循环。

简单内容

允许使用 Markdown 格式的简单内容，并且 不包含 富文本的块内容，例如图像等等……

一个 typeit 示例：

1
2
3

{{< typeit >}}
这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*……
{{< /typeit >}}

呈现的输出效果如下：

另外，你也可以自定义 HTML 标签.

一个带有 h4 标签的 typeit 示例：

1
2
3

{{< typeit tag=h4 >}}
这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*……
{{< /typeit >}}

呈现的输出效果如下：

代码内容

代码内容也是允许的，并且通过使用参数 code 指定语言类型可以实现语法高亮。

一个带有 code 参数的 typeit 示例：

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 >}}

呈现的输出效果如下：

分组内容

默认情况下，所有打字动画都是同时开始的。 但是有时你可能需要按顺序开始一组 typeit 内容的打字动画。

一组具有相同 group 参数值的 typeit 内容将按顺序开始打字动画。

一个带有 group 参数的 typeit 示例：

1
2
3
4
5
6
7

{{< typeit group=paragraph >}}
**首先**, 这个段落开始
{{< /typeit >}}

{{< typeit group=paragraph >}}
**然后**, 这个段落开始
{{< /typeit >}}

呈现的输出效果如下：

循环内容

默认情况下，打字动画完成后将停止。

如果你需要内容在打字动画完成后继续循环，可以使用 loop 参数。

一个带有 loop 参数的 typeit 示例：

1
2
3

{{< typeit loop=true >}}
这个段落将会循环……
{{< /typeit >}}

呈现的输出效果如下：