Usage example:

{{< title1 "My awesome title" "my-title-id">}}

The first parameter is the title of the shortcode (in this example is “My awesome title”).
The second paramter is the ID of the shortcode (in this example is “my-title-id”).
It can be used in links to the same page as:

[link to the title](#my-title-id)

Usage example:

{{< subtitle1 "My awesome subtitle" "my-subtitle-id">}}

The first parameter is the title of the shortcode (in this example is “My awesome subtitle”).
The second paramter is the ID of the shortcode (in this example is “my-subtitle-id”).
It can be used in links to the same page as:

[link to the subtitle](#my-subtitle-id)

This shortcode builds a centred page that is two-third of the full size of the page.

Usage example:

{{< code language="shell" >}}
    $ sudo bash -c 'echo 0 > /proc/sys/kernel/randomize_va_space'
{{< /code >}}

This shortcode has 2 parameters:

• line-numbers to hide or show the line numbers. The default is true, for single line code the number is never shown.

• language is used to highlight the syntax of the code properly

This shortcode builds a centred page that is as wide as the full size of the page.

Usage example:

{{< codeWide language="shell" >}}
    $ dmesg | tail
    ......
    [13401.299114] overflow64[16566]: segfault at 616161616161 ip 0000616161616161 sp 00007fffffffddb0 error 14 in libc-2.27.so[7ffff79e4000+1e7000]
{{< /codeWide >}}

This shortcode has 2 parameters:

• line-numbers to hide or show the line numbers. The default is true, for single line code the number is never shown.

• language is used to highlight the syntax of the code properly

This shortcode builds a centred page that is as wide as the two third of the size of the page. The content of the shortcode will pass through the markdown processor.

Usage example:

{{< container "container-id" >}}

{{< /container >}}

This shortcode has an optional parameter to give an ID to the html div.

This shortcode builds a centred page that is as wide as the size of the page. The content of the shortcode will pass through the markdown processor.

Usage example:

{{< containerWide "container-wide-id" >}}

{{< /containerWide >}}

This shortcode has an optional parameter to give an ID to the html div.

This shortcode resize an image that with the width and/or height that you specify

Usage example:

{{< figure src="images/the_stack.png" width="700" >}}
{{< figure src="images/the_stack.png" height="700" >}}

The parameter src is the location of the image relative to the location of the file where the shortcode has been used.
The parameter width is the width of the image.
The parameter height is the height of the image.
The parameter caption is the caption of the image.
The parameter alt is the alt property of the image.

This shortcode shows 2 images one next to the other with the possibility to resize them.

Usage example:

{{< twoFigure src1="images/overflow_1.png" width1="700" src2="images/overflow_2.png" width2="700" >}}

The parameter src1 is the location of the right image relative to the location of the file where the shortcode has been used.
The parameter width1 is the width of the right image.
The parameter height1 is the height of the right image.
The parameter caption1 is the caption of the right image.
The parameter alt1 is the alt property of the right image.
The parameter src2 is the location of the left image relative to the location of the file where the shortcode has been used.
The parameter width2 is the width of the left image.
The parameter height2 is the height of the left image.
The parameter caption2 is the caption of the left image.
The parameter alt2 is the alt property of the left image.

With a small screen these images will be shown one on top of the other.

See example of use here

This shortcode shows 2 YouTube videos one next to the other.

Usage example:

{{% twoVideos id2="pKRzfdIJUZE" id1="Ncv2KmhVgyU" autoplay1=true ratio1="4:3" ratio2="16:9" %}}

The parameter id1 is the ID of the left video
The parameter id2 is the ID of the right video
The parameter autoplay1 is used to start the video on the left (the video will start on mute). Set it to “true” to activate autoplay.
The parameter autoplay2 is used to start the video on the left (the video will start on mute). Set it to “true” to activate autoplay.
The parameter ratio1 is used to specify the the ratio of the video on the left. It can be either “16:9” or “4:3”. The default is “16:9”.
The parameter ratio2 is used to specify the the ratio of the video on the right. It can be either “16:9” or “4:3”. The default is “16:9”.

With a small screen these videos will be shown one on top of the other.

Usage example:

{{< book title="Title Awesome" authors="Awesome author" image="images/cover.jpg" size="300x">}}

The parameter title is the title of the book.
The parameter authors contains the authors of the book.
The parameter image is the cover of the book.

The parameter size is used to specify the size of the book in pixel “width” x “height”.
E.g.: “300x” means 300px of width.
E.g.: “x300” means 300px of height.

See example of use here

Usage example:

{{< exercise >}}
Text of the exercise.
{{< /exercise >}}

This shortcode has no parameters.

See example of use here

Usage example:

{{< tabsCode 
    file1="/content/code_exercises/staircase_n_steps/code/solution_python.md" language1="python" title1="Python" icon1="python"
    file2="/content/code_exercises/staircase_n_steps/code/solution_c.md" language1="c" title2="C" icon2="c"
    file3="/content/code_exercises/staircase_n_steps/code/solution_java.md" language1="java" title3="Java" icon3="java" 
>}}

The parameter file1 is the name of the code file to be displayed in the first tab. The path needs to start from the content folder.
The parameter language1 is used to highlight the syntax of the code properly. The parameter title1 is the title of the first tab.
The parameter icon1 is the icon to be shown at the right of the title, it is an optional parameter. See the partial code icon.html for the available icons.

There are 6 tabs supported at this moment

• the files parameters are file1, file2, file3, file4, file5, file6

• the titles parameters are title1, title2, title3, title4, title5, title6

• the languages parameters are language1, language2, language3, language4, language5, language6

• the icons parameters are icon1, icon2, icon3, icon4, icon5, icon6

See example of use here

Usage example:

{{< tabs 
    file1="/content/exercises/article1/comments/my_comments.md" title1="My Ideas"
    file2="/content/exercises/article1/comments/your_comments.md" title2="Your Ideas" 
    file3="/content/exercises/article1/comments/her_comments.md" title3="Her Ideas"  
>}}

The content of the files (file1, file2 …) are passed through the markdown processor, so you can use markdown in these files.

The parameter file1 is the name of the code file to be displayed in the first tab. The path needs to start from the content folder.
The parameter title1 is the title of the first tab.
The parameter icon1 is the icon to be shown at the right of the title, it is an optional parameter. See the partial code icon.html for the available icons.

There are 6 tabs supported at this moment

• the files parameters are file1, file2, file3, file4, file5, file6

• the titles parameters are title1, title2, title3, title4, title5, title6

• the icons parameters are icon1, icon2, icon3, icon4, icon5, icon6

Usage example:

{{< codeInline >}}sudo echo 0 > /proc/sys/kernel/randomize_va_space{{< /codeInline >}}

This shortcode has 2 parameters:

• language is used to highlight the syntax of the code properly

• id to set a id of the html code element

See an example of usage here

Usage example:

{{< siteLightgreen "Web" "https://www.example.com" >}}
<p>Description of the website.</p>
{{< /siteLightgreen >}}

The first parameter will appear in the right coloured part of the shortcode.
The second parameter will appear in the middle part of the shortcode.

See example of usage here