## Tabs ¶

### Single Tab ¶

Single tab:

### Tab Panels ¶

Tab panel {{< tabpanel >}} with tab1 selected choice=2 by default:

nested tab panels:

#include <stdio.h>

int main() {
    printf("WE NEED NEST!!!");
    return 0;
}

### Grouping Tabs ¶

You can also group several tab panels by specifying the group attribute. It’s used for synchronizing tab choices across tab panels in the same group, e.g. a doc on different platforms.

Tab choices are persistent, try reloading this page.

## Details ¶

## Admonitions ¶

You can customize admonition title:

You can make it collapsible:

You can also specify whether it should be opened by default:

Note that you can use the shortcode {{< note >}} to replace {{< admonition type="note" >}}, it’s less verbose:

You can have nested admonitions:

## Sidenotes ¶

It’s a… sidenote Look at me! I’m a side note! Look at this freaking sidenote! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. another sidenote… Another freaking sidenote with pythagorean theorem $a^2 + b^2 = c^2$ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

## $\LaTeX$ Support ¶

### Pseudocode and Algorithms ¶

https://saswat.padhi.me/pseudocode.js

This quicksort algorithm is extracted from Chapter 7, Introduction to Algorithms (3rd edition)

    \begin{algorithm}
\caption{Quicksort}
\begin{algorithmic}
\PROCEDURE{Quicksort}{$A, p, r$}
    \IF{$p < r$}
        \STATE $q = $ \CALL{Partition}{$A, p, r$}
        \STATE \CALL{Quicksort}{$A, p, q - 1$}
        \STATE \CALL{Quicksort}{$A, q + 1, r$}
    \ENDIF
\ENDPROCEDURE
\PROCEDURE{Partition}{$A, p, r$}
    \STATE $x = A[r]$
    \STATE $i = p - 1$
    \FOR{$j = p$ \TO $r - 1$}
        \IF{$A[j] < x$}
            \STATE $i = i + 1$
            \STATE exchange
            $A[i]$ with     $A[j]$
        \ENDIF
        \STATE exchange $A[i]$ with $A[r]$
    \ENDFOR
\ENDPROCEDURE
\end{algorithmic}
\end{algorithm}

### TikZ Graphics ¶

https://tikzjax.com

## Diargams ¶

### GoAT ¶

https://gohugo.io/content-management/diagrams/#goat-diagrams-ascii

### Mermaid ¶

https://gohugo.io/content-management/diagrams/#mermaid-diagrams

## Marks ¶

If this word has yellow background color and black font color on your screen, that’s because most browsers have the following preset css rules for <mark> https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3 :

mark {
    background: yellow;
    color: black;
}

Alice also uses <mark> to highlight and mark text, but you can also specify

Here are some marked text

Here are some marked text with some code

Here are some marked text with some link

Here are some marked text with some equation $a^2 + b^2 = c^2$

Here are some marked text with some sidenote Amazing

Here are some marked text with some secret

You can also customize some attributes of mark:

• color
• background color
• font scale
• font weight

## Lorem Ipsum ¶

https://en.wikipedia.org/wiki/Lorem_ipsum

You can use {{< loremipsum >}} to generate placeholder text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

You can also specify the number of parapraghs (n) generated by {{< loremipsum paragraphs=n >}}, by default n equals to 1.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.