Hugo 10 More Shortcodes 2

Find more shortcodes, add them

Hugo theme: Docsy

Tabbed pane

Sometimes it’s very useful to have tabbed panes when authoring content. One common use-case is to show multiple syntax highlighted code blocks that showcase the same problem, and how to solve it in different programming languages. As an example, the table below shows the language-specific variants of the famous Hello world! program one usually writes first when learning a new programming language from scratch:

• C
• C++
• Go
• Java
• Kotlin
• Lua
• PHP
• Python
• Ruby
• Scala

1#include <stdio.h>
2#include <stdlib.h>
3
4int main(void)
5{
6  puts("Hello World!");
7  return EXIT_SUCCESS;
8}

1#include <iostream>
2
3int main()
4{
5  std::cout << "Hello World!" << std::endl;
6}

1package main
2import "fmt"
3func main() {
4  fmt.Printf("Hello World!\n")
5}

1class HelloWorld {
2  static public void main( String args[] ) {
3    System.out.println( "Hello World!" );
4  }
5}

1fun main(args : Array<String>) {
2    println("Hello, world!")
3}

1print "Hello world"

1<?php
2echo 'Hello World!';
3?>

1print("Hello World!")

1puts "Hello World!"

1object HelloWorld extends App {
2  println("Hello world!")
3}

The Docsy template provides two shortcodes tabpane and tab that let you easily create tabbed panes. To see how to use them, have a look at the following code block, which renders to a pane with three tabs:

 1{{< tabpane >}}
 2  {{< tab header="English" >}}
 3    Welcome!
 4  {{< /tab >}}
 5  {{< tab header="German" >}}
 6    Herzlich willkommen!
 7  {{< /tab >}}
 8  {{< tab header="Swahili" >}}
 9    Karibu sana!
10  {{< /tab >}}
11{{< /tabpane >}}

This code translates to the tabbed pane below, showing a Welcome! greeting in English, German or Swahili:

• English
• German
• Swahili

1Welcome!

1Herzlich willkommen!

1Karibu sana!

Shortcode details

Tabbed panes are implemented using two shortcodes:

• The tabpane shortcode, which is the container element for the tabs. This shortcode can optionally held the named parameters lang and/or highlight. The values of these optional parameters are passed on as second LANG and third OPTIONS arguments to Hugo’s built-in highlight function which is used to render the code blocks of the individual tabs. In case the header text of the tab equals the language used in the tab’s code block (as in the first tabbed pane example above), you may specify langEqualsHeader=true in the surrounding tabpane shortcode. Then, the header text of the individual tab is automatically set as language parameter of the respective tab.
• The various tab shortcodes which actually represent the tabs you would like to show. We recommend specifying the named parameter header for each text in order to set the header text of each tab. If needed, you can additionally specify the named parameters lang and highlight for each tab. This allows you to overwrite the settings given in the parent tabpane shortcode. If the language is neither specified in the tabpane nor in the tabshortcode, it defaults to Hugo’s site variable .Site.Language.Lang.

Hugo theme: book

Columns

Columns help organize shorter pieces of content horizontally for readability.

 1{{< columns >}} <!-- begin columns block -->
 2\# Left Content
 3Lorem markdownum insigne...
 4
 5<---> <!-- magic separator, between columns -->
 6
 7# Mid Content
 8Lorem markdownum insigne...
 9
10<---> <!-- magic separator, between columns -->
11
12# Right Content
13Lorem markdownum insigne...
14{{< /columns >}}

It did not work

section

1{{< section >}}

detail

1{{< details title="Title" open=true >}}
2## Markdown content
3Lorem markdownum insigne...
4{{< /details >}}

expand

Loveit

style

style shortcode 用来在你的文章中插入自定义样式.

style shortcode 有两个位置参数.

第一个参数是自定义样式的内容. 它支持 SASS 中的嵌套语法, 并且 & 指代这个父元素.

第二个参数是包裹你要更改样式的内容的 HTML 标签, 默认值是 div.

一个 style 示例:

1{{< style "text-align:right; strong{color:#00b1ff;}" >}}
2This is a **right-aligned** paragraph.
3{{< /style >}}

typeit

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

mermaid

script

LoveIt NEW | 0.2.8

script is a shortcode to insert custom Javascript in your post.

Note

The script content can be guaranteed to be executed in order after all third-party libraries are loaded. So you are free to use third-party libraries.

Example script input:

echarts