--- weight: 4 title: "Thème Documentation - Extended Shortcodes" date: 2020-03-03T16:29:59+08:00 lastmod: 2020-03-03T16:29:59+08:00 draft: false author: "Dillon" authorLink: "https://dillonzq.com" description: "Le thème LoveIt fournit plusieurs shortcodes en plus de ceux intégrés dans Hugo." tags: ["shortcodes"] categories: ["documentation"] featuredImage: "/images/theme-documentation-extended-shortcodes/featured-image.jpg" featuredImagePreview: "/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg" lightgallery: true --- Le thème **LoveIt** fournit plusieurs shortcodes en plus de ceux intégrés dans Hugo. {{< admonition warning >}} Sorry, this article has not been completely translated into **French**. Welcome to take the time to propose a translation by [making a PR](https://github.com/dillonzq/LoveIt/pulls) to the theme! {{< /admonition >}} ## style `style` is a shortcode to insert custom style in your post. The `style` shortcode has two positional parameters. The **first** one is the custom style content. And the **second** one is the HTML tag around the content you want to change style, and whose default value is `p`. Example `style` input: ```markdown {{}} This is a right-aligned paragraph. {{}} ``` The rendered output looks like this: {{< style "text-align: right;" >}} This is a right-aligned paragraph. {{< /style >}} ## link {{< version 0.2.0 >}} `link` shortcode is an alternative to [Markdown link syntax](../basic-markdown-syntax/#links). `link` shortcode can provide some other features and can be used in code blocks. The `link` shortcode has the following named parameters: * **href** *[required]* (**first** positional parameter) Destination of the link. * **content** *[optional]* (**second** positional parameter) Content of the link, default value is the value of **href** parameter. *Markdown or HTML format is supported.* * **title** *[optional]* (**third** positional parameter) `title` attribute of the HTML `a` tag, which will be shown when hovering on the link. * **class** *[optional]* `class` attribute of the HTML `a` tag. * **rel** *[optional]* Additional `rel` attributes of the HTML `a` tag. Example `link` input: ```markdown {{}} Or {{}} {{}} Or {{}} {{}} Or {{}} ``` The rendered output looks like this: * {{< link "https://assemble.io" >}} * {{< link "mailto:contact@revolunet.com" >}} * {{< link "https://assemble.io" Assemble >}} Example `link` input with a title: ```markdown {{}} Or {{}} ``` The rendered output looks like this (hover over the link, there should be a tooltip): {{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}} ## image {{< version 0.2.0 changed >}} `image` shortcode is an alternative to [`figure` shortcode](../theme-documentation-built-in-shortcodes/#figure). `image` shortcode can take full advantage of the dependent libraries of [lazysizes](https://github.com/aFarkas/lazysizes) and [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js). The `image` shortcode has the following named parameters: * **src** *[required]* (**first** positional parameter) URL of the image to be displayed. * **alt** *[optional]* (**second** positional parameter) Alternate text for the image if the image cannot be displayed, default value is the value of **src** parameter. *Markdown or HTML format is supported.* * **caption** *[optional]* (**third** positional parameter) Image caption. *Markdown or HTML format is supported.* * **title** *[optional]* Image title that will be shown when hovering on the image. * **class** *[optional]* `class` attribute of the HTML `figure` tag. * **src_s** *[optional]* URL of the image thumbnail, used for lightgallery, default value is the value of **src** parameter. * **src_l** *[optional]* URL of the HD image, used for lightgallery, default value is the value of **src** parameter. * **height** *[optional]* `height` attribute of the image. * **width** *[optional]* `width` attribute of the image. * **linked** *[optional]* Whether the image needs to be hyperlinked, default value is `true`. * **rel** *[optional]* Additional `rel` attributes of the HTML `a` tag, if **linked** parameter is set to `true`. * **large** *[optional]* Whether the image is large used for loading animation, if **linked** parameter is set to `false`. Example `image` input: ```markdown {{}} ``` The rendered output looks like this: {{< image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" >}} ## admonition The `admonition` shortcode supports **12** types of banners to help you put notice in your page. *Markdown or HTML format in the content is supported.* {{< admonition >}} A **note** banner {{< /admonition >}} {{< admonition abstract >}} An **abstract** banner {{< /admonition >}} {{< admonition info >}} A **info** banner {{< /admonition >}} {{< admonition tip >}} A **tip** banner {{< /admonition >}} {{< admonition success >}} A **success** banner {{< /admonition >}} {{< admonition question >}} A **question** banner {{< /admonition >}} {{< admonition warning >}} A **warning** banner {{< /admonition >}} {{< admonition failure >}} A **failure** banner {{< /admonition >}} {{< admonition danger >}} A **danger** banner {{< /admonition >}} {{< admonition bug >}} A **bug** banner {{< /admonition >}} {{< admonition example >}} An **example** banner {{< /admonition >}} {{< admonition quote >}} A **quote** banner {{< /admonition >}} The `admonition` shortcode has the following named parameters: * **type** *[optional]* (**first** positional parameter) Type of the `admonition` banner, default value is `note`. * **title** *[optional]* (**second** positional parameter) Title of the `admonition` banner, default value is the value of **type** parameter. * **details** *[optional]* (**third** positional parameter) Whether the content will be expandable/collapsible, default value is `false`. Example `admonition` input: ```markdown {{}} A **tip** banner {{}} Or {{}} A **tip** banner {{}} ``` The rendered output looks like this: {{< admonition tip "This is a tip" true >}} A **tip** banner {{< /admonition >}} ## mermaid [mermaid](https://mermaidjs.github.io/) is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown. Just insert your mermaid code in the `mermaid` shortcode and that’s it. ### Flowchart {#flowchart} Example **flowchart** `mermaid` input: ```markdown {{}} graph LR; A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two] {{}} ``` The rendered output looks like this: {{< mermaid >}} graph LR; A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two] {{< /mermaid >}} ### Sequence Diagram {#sequence-diagram} Example **sequence diagram** `mermaid` input: ```markdown {{}} sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->John: Fight against hypochondria end Note right of John: Rational thoughts
prevail... John-->Alice: Great! John->Bob: How about you? Bob-->John: Jolly good! {{}} ``` The rendered output looks like this: {{< mermaid >}} sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->John: Fight against hypochondria end Note right of John: Rational thoughts
prevail... John-->Alice: Great! John->Bob: How about you? Bob-->John: Jolly good! {{< /mermaid >}} ### GANTT {#gantt} Example **GANTT** `mermaid` input: ```markdown {{}} gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d {{}} ``` The rendered output looks like this: {{< mermaid >}} gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d {{< /mermaid >}} ### Class Diagram {#class-diagram} Example **class diagram** `mermaid` input: ```markdown {{}} classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label {{}} ``` The rendered output looks like this: {{< mermaid >}} classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label {{< /mermaid >}} ### State Diagram {#state-diagram} Example **state diagram** `mermaid` input: ```markdown {{}} stateDiagram [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*] {{}} ``` The rendered output looks like this: {{< mermaid >}} stateDiagram [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*] {{< /mermaid >}} ### Git Graph {#git-graph} Example **git graph** `mermaid` input: ```markdown {{}} gitGraph: options { "nodeSpacing": 100, "nodeRadius": 10 } end commit branch newbranch checkout newbranch commit commit checkout master commit commit merge newbranch {{}} ``` The rendered output looks like this: {{< mermaid >}} gitGraph: options { "nodeSpacing": 100, "nodeRadius": 10 } end commit branch newbranch checkout newbranch commit commit checkout master commit commit merge newbranch {{< /mermaid >}} ### Pie {#pie} Example **pie** `mermaid` input: ```markdown {{}} pie "Dogs" : 386 "Cats" : 85 "Rats" : 15 {{}} ``` The rendered output looks like this: {{< mermaid >}} pie "Dogs" : 386 "Cats" : 85 "Rats" : 15 {{< /mermaid >}} ## echarts [ECharts](https://echarts.apache.org/) is a library helping you to generate interactive data visualization. The basic chart types ECharts supports include [line series](https://echarts.apache.org/en/option.html#series-line), [bar series](https://echarts.apache.org/en/option.html#series-line), [scatter series](https://echarts.apache.org/en/option.html#series-scatter), [pie charts](https://echarts.apache.org/en/option.html#series-pie), [candle-stick series](https://echarts.apache.org/en/option.html#series-candlestick), [boxplot series](https://echarts.apache.org/en/option.html#series-boxplot) for statistics, [map series](https://echarts.apache.org/en/option.html#series-map), [heatmap series](https://echarts.apache.org/en/option.html#series-heatmap), [lines series](https://echarts.apache.org/en/option.html#series-lines) for directional information, [graph series](https://echarts.apache.org/en/option.html#series-graph) for relationships, [treemap series](https://echarts.apache.org/en/option.html#series-treemap), [sunburst series](https://echarts.apache.org/en/option.html#series-sunburst), [parallel series](https://echarts.apache.org/en/option.html#series-parallel) for multi-dimensional data, [funnel series](https://echarts.apache.org/en/option.html#series-funnel), [gauge series](https://echarts.apache.org/en/option.html#series-gauge). And it's extremely easy to create a combinition of them with ECharts. Just insert your ECharts option in `JSON`/`YAML`/`TOML` format in the `echarts` shortcode and that’s it. Example `echarts` input in `JSON` format: ```json {{}} { "title": { "text": "Summary Line Chart", "top": "2%", "left": "center" }, "tooltip": { "trigger": "axis" }, "legend": { "data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"], "top": "10%" }, "grid": { "left": "5%", "right": "5%", "bottom": "5%", "top": "20%", "containLabel": true }, "toolbox": { "feature": { "saveAsImage": { "title": "Save as Image" } } }, "xAxis": { "type": "category", "boundaryGap": false, "data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] }, "yAxis": { "type": "value" }, "series": [ { "name": "Email Marketing", "type": "line", "stack": "Total", "data": [120, 132, 101, 134, 90, 230, 210] }, { "name": "Affiliate Advertising", "type": "line", "stack": "Total", "data": [220, 182, 191, 234, 290, 330, 310] }, { "name": "Video Advertising", "type": "line", "stack": "Total", "data": [150, 232, 201, 154, 190, 330, 410] }, { "name": "Direct View", "type": "line", "stack": "Total", "data": [320, 332, 301, 334, 390, 330, 320] }, { "name": "Search Engine", "type": "line", "stack": "Total", "data": [820, 932, 901, 934, 1290, 1330, 1320] } ] } {{}} ``` The same in `YAML` format: ```yaml {{}} title: text: Summary Line Chart top: 2% left: center tooltip: trigger: axis legend: data: - Email Marketing - Affiliate Advertising - Video Advertising - Direct View - Search Engine top: 10% grid: left: 5% right: 5% bottom: 5% top: 20% containLabel: true toolbox: feature: saveAsImage: title: Save as Image xAxis: type: category boundaryGap: false data: - Monday - Tuesday - Wednesday - Thursday - Friday - Saturday - Sunday yAxis: type: value series: - name: Email Marketing type: line stack: Total data: - 120 - 132 - 101 - 134 - 90 - 230 - 210 - name: Affiliate Advertising type: line stack: Total data: - 220 - 182 - 191 - 234 - 290 - 330 - 310 - name: Video Advertising type: line stack: Total data: - 150 - 232 - 201 - 154 - 190 - 330 - 410 - name: Direct View type: line stack: Total data: - 320 - 332 - 301 - 334 - 390 - 330 - 320 - name: Search Engine type: line stack: Total data: - 820 - 932 - 901 - 934 - 1290 - 1330 - 1320 {{}} ``` The same in `TOML` format: ```toml {{}} [title] text = "Summary Line Chart" top = "2%" left = "center" [tooltip] trigger = "axis" [legend] data = [ "Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine" ] top = "10%" [grid] left = "5%" right = "5%" bottom = "5%" top = "20%" containLabel = true [toolbox] [toolbox.feature] [toolbox.feature.saveAsImage] title = "Save as Image" [xAxis] type = "category" boundaryGap = false data = [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" ] [yAxis] type = "value" [[series]] name = "Email Marketing" type = "line" stack = "Total" data = [ 120.0, 132.0, 101.0, 134.0, 90.0, 230.0, 210.0 ] [[series]] name = "Affiliate Advertising" type = "line" stack = "Total" data = [ 220.0, 182.0, 191.0, 234.0, 290.0, 330.0, 310.0 ] [[series]] name = "Video Advertising" type = "line" stack = "Total" data = [ 150.0, 232.0, 201.0, 154.0, 190.0, 330.0, 410.0 ] [[series]] name = "Direct View" type = "line" stack = "Total" data = [ 320.0, 332.0, 301.0, 334.0, 390.0, 330.0, 320.0 ] [[series]] name = "Search Engine" type = "line" stack = "Total" data = [ 820.0, 932.0, 901.0, 934.0, 1290.0, 1330.0, 1320.0 ] {{}} ``` The rendered output looks like this: {{< echarts >}} { "title": { "text": "Summary Line Chart", "top": "2%", "left": "center" }, "tooltip": { "trigger": "axis" }, "legend": { "data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"], "top": "10%" }, "grid": { "left": "5%", "right": "5%", "bottom": "5%", "top": "20%", "containLabel": true }, "toolbox": { "feature": { "saveAsImage": { "title": "Save as Image" } } }, "xAxis": { "type": "category", "boundaryGap": false, "data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] }, "yAxis": { "type": "value" }, "series": [ { "name": "Email Marketing", "type": "line", "stack": "Total", "data": [120, 132, 101, 134, 90, 230, 210] }, { "name": "Affiliate Advertising", "type": "line", "stack": "Total", "data": [220, 182, 191, 234, 290, 330, 310] }, { "name": "Video Advertising", "type": "line", "stack": "Total", "data": [150, 232, 201, 154, 190, 330, 410] }, { "name": "Direct View", "type": "line", "stack": "Total", "data": [320, 332, 301, 334, 390, 330, 320] }, { "name": "Search Engine", "type": "line", "stack": "Total", "data": [820, 932, 901, 934, 1290, 1330, 1320] } ] } {{< /echarts >}} The `echarts` shortcode has also the following named parameters: * **width** *[optional]* (**first** positional parameter) {{< version 0.2.0 >}} Width of the data visualization, default value is `100%`. * **height** *[optional]* (**second** positional parameter) {{< version 0.2.0 >}} Height of the data visualization, default value is `30rem`. ## mapbox {{< version 0.2.0 >}} [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) is a JavaScript library that uses WebGL to render interactive maps from [vector tiles](https://docs.mapbox.com/help/glossary/vector-tiles/) and [Mapbox styles](https://docs.mapbox.com/mapbox-gl-js/style-spec/). The `mapbox` shortcode has the following named parameters to use Mapbox GL JS: * **lng** *[required]* (**first** positional parameter) Longitude of the inital centerpoint of the map, measured in degrees. * **lat** *[required]* (**second** positional parameter) Latitude of the inital centerpoint of the map, measured in degrees. * **zoom** *[optional]* (**third** positional parameter) The initial zoom level of the map, default value is `10`. * **marked** *[optional]* (**fourth** positional parameter) Whether to add a marker at the inital centerpoint of the map, default value is `true`. * **light-style** *[optional]* (**fifth** positional parameter) Style for the light theme, default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration). * **dark-style** *[optional]* (**sixth** positional parameter) Style for the dark theme, default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration). * **navigation** *[optional]* Whether to add [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration). * **geolocate** *[optional]* Whether to add [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration). * **scale** *[optional]* Whether to add [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration). * **fullscreen** *[optional]* Whether to add [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol), default value is the value set in the [front matter](../theme-documentation-content/#front-matter) or the [site configuration](../theme-documentation-basics/#site-configuration). * **width** *[optional]* Width of the map, default value is `100%`. * **height** *[optional]* Height of the map, default value is `20rem`. Example `mapbox` input: ```markdown {{}} Or {{}} {{}} Or {{}} ``` The rendered output looks like this: {{< mapbox 121.485 31.233 12 >}} {{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4?optimize=true" "mapbox://styles/mapbox/navigation-preview-night-v4?optimize=true" >}} ## music The `music` shortcode embeds a responsive music player based on [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS). There are three ways to use it the `music` shortcode. ### Custom Music URL {#custom-music-url} The `music` shortcode has the following named parameters by custom music URL: * **server** *[required]* URL of the custom music. * **name** *[optional]* Name of the custom music. * **artist** *[optional]* Artist of the custom music. * **cover** *[required]* URL of the custom music cover. Example `music` input by custom music URL: ```markdown {{}} ``` The rendered output looks like this: {{< music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" >}} ### Music Platform URL Automatic Identification {#automatic-identification} The `music` shortcode has one named parameter by music platform URL automatic identification: * **auto** *[required]* (**first** positional parameter) URL of the music platform URL for automatic identification, which supports `netease`, `tencent` and `xiami` music platform. Example `music` input by music platform URL automatic identification: ```markdown {{}} Or {{}} ``` The rendered output looks like this: {{< music auto="https://music.163.com/#/playlist?id=60198" >}} ### Custom Server, Type and ID {#custom-server} The `music` shortcode has the following named parameters by custom music platform: * **server** *[required]* (**first** positional parameter) [`netease`, `tencent`, `kugou`, `xiami`, `baidu`] Music platform. * **type** *[required]* (**second** positional parameter) [`song`, `playlist`, `album`, `search`, `artist`] Type of the music. * **id** *[required]* (**third** positional parameter) Song ID, or playlist ID, or album ID, or search keyword, or artist ID. Example `music` input by custom music platform: ```markdown {{}} Or {{}} ``` The rendered output looks like this: {{< music netease song 1868553 >}} ### Other Parameters {#other-parameters} The `music` shortcode has other named parameters applying to the above three ways: * **theme** *[optional]* {{< version 0.2.0 changed >}} Main color of the music player, default value is `#448aff`. * **fixed** *[optional]* Whether to enable fixed mode, default value is `false`. * **mini** *[optional]* Whether to enable mini mode, default value is `false`. * **autoplay** *[optional]* Whether to autoplay music, default value is `false`. * **volume** *[optional]* Default volume when the player is first opened, which will be remembered in the browser, default value is `0.7`. * **mutex** *[optional]* Whether to pause other players when this player starts playing, default value is `true`. The `music` shortcode has the following named parameters only applying to the type of music list: * **loop** *[optional]* [`all`, `one`, `none`] Loop mode of the music list, default value is `none`. * **order** *[optional]* [`list`, `random`] Play order of the music list, default value is `list`. * **list-folded** *[optional]* Whether the music list should be folded at first, default value is `false`. * **list-max-height** *[optional]* Max height of the music list, default value is `340px`. ## bilibili {{< version 0.2.0 changed >}} The `bilibili` shortcode embeds a responsive video player for bilibili videos. When the video only has one part, only the BV `id` of the video is required, e.g.: ```code https://www.bilibili.com/video/BV1Sx411T7QQ ``` Example `bilibili` input: ```markdown {{}} Or {{}} ``` The rendered output looks like this: {{< bilibili id=BV1Sx411T7QQ >}} When the video has multiple parts, in addition to the BV `id` of the video, `p` is also required, whose default value is `1`, e.g.: ```code https://www.bilibili.com/video/BV1TJ411C7An?p=3 ``` Example `bilibili` input with `p`: ```markdown {{}} Or {{}} ``` The rendered output looks like this: {{< bilibili id=BV1TJ411C7An p=3 >}} ## typeit The `typeit` shortcode provides typing animation based on [TypeIt](https://typeitjs.com/). Just insert your content in the `typeit` shortcode and that’s it. ### Simple Content {#simple-content} Simple content is allowed in `Markdown` format and **without** rich block content such as images and more... Example `typeit` input: ```markdown {{}} This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)... {{}} ``` The rendered output looks like this: {{< typeit >}} This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)... {{< /typeit >}} Alternatively, you can use custom **HTML tags**. Example `typeit` input with `h4` tag: ```markdown {{}} This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)... {{}} ``` The rendered output looks like this: {{< typeit tag=h4 >}} This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)... {{< /typeit >}} ### Code Content {#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`: ```markdown {{}} public class HelloWorld { public static void main(String []args) { System.out.println("Hello World"); } } {{}} ``` The rendered output looks like this: {{< typeit code=java >}} public class HelloWorld { public static void main(String []args) { System.out.println("Hello World"); } } {{< /typeit >}} ### Group Content {#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`: ```markdown {{}} **First** this paragraph begins {{}} {{}} **Then** this paragraph begins {{}} ``` The rendered output looks like this: {{< typeit group=paragraph >}} **First** this paragraph begins {{< /typeit >}} {{< typeit group=paragraph >}} **Then** this paragraph begins {{< /typeit >}}