扩展 Shortcode - typeit

Lruihao 收录于文档

2022-07-20 约 398 字预计阅读 1 分钟 - 次阅读

/zh-cn/extended-shortcode-typeit/featured-image.png

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

呈现的输出效果如下：