扩展 Shortcode - typeit

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

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

1 简单内容

允许使用 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 >}}

呈现的输出效果如下:

2 代码内容

代码内容也是允许的,并且通过使用参数 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 >}}

呈现的输出效果如下:

3 分组内容

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

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

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

1
2
3
4
5
6
7
{{< typeit group=paragraph >}}
**首先**, 这个段落开始
{{< /typeit >}}

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

呈现的输出效果如下:

0%