Progress bar

{{< progress 999.99 theme "Name of progress bar" >}}
{{< progress 80 green "Name of progress bar" >}}
{{< progress 77.54 red "Name of progress bar" >}}
{{< progress 123.45 blue "Name of progress bar" >}}
{{< progress 11.11 orange "Name of progress bar" >}}
Name of progress bar
999.99%
Name of progress bar
80%
Name of progress bar
77.54%
Name of progress bar
123.45%
Name of progress bar
11.11%

Accordion

{{< accordion "Foods" open >}}
* Vegetables
* Fruits
* Fish
{{< /accordion >}}

{{< accordion "Travel Destinations" false >}}
- Paris
- Tokyo
- New York City
- Sydney
{{< /accordion >}}
Foods
  • Vegetables
  • Fruits
  • Fish
Travel Destinations
  • Paris
  • Tokyo
  • New York City
  • Sydney

Divided Line

{{< line "This is the divided line text" >}}
This is the divided line text
{{< line >}}

Hidden Text

{{< blur "This text is blurred" >}}
This is a {{< blur "Hide text" >}}
This text is blurred

This is a Hide text

Spoiler

{{< spoiler id="spoiler1" >}}
```py
print("hello")
```
{{< /spoiler >}}
Spoiler
print("hello")
{{< link-card title="This is an example link card" url="https://unsplash.it" desc="This is an example link card. This is an example link card." img="https://unsplash.it/1920/1080/?random=1" >}}
{{< link-card title="This is an example link card" url="https://unsplash.it" desc="This is an example link card." >}}

OpenSeadragon

Checkout The Project: OpenSeadragon DZI Converter

{{< dzi id="seadragon-viewer" url="/dzi/mountain_files/" format="jpg" imgWidth="15920" imgHeight="9800" >}}
{{< carousel height="500" unit="px" items="3" duration="2000" images="https://unsplash.it/1920/1080/?random=1,https://unsplash.it/1920/1080/?random=2,https://unsplash.it/1920/1080/?random=5,https://unsplash.it/1920/1080/?random=4" >}}

Syntax HighLighting

```py
WRITE THE CODE HERE
```
import random


def askForGuess():
    while True:
        guess = input('> ')  # Enter the guess.

        if guess.isdecimal():
            return int(guess)  # Convert string guess to an integer.
        print('Please enter a number between 1 and 100.')


print('Guess the Number, by Al Sweigart al@inventwithpython.com')
print()
secretNumber = random.randint(1, 100)  # Select a random number.
print('I am thinking of a number between 1 and 100.')

for i in range(10):  # Give the player 10 guesses.
    print('You have {} guesses left. Take a guess.'.format(10 - i))

    guess = askForGuess()
    if guess == secretNumber:
        break  # Break out of the for loop if the guess is correct.

    # Offer a hint:
    if guess < secretNumber:
        print('Your guess is too low.')
    if guess > secretNumber:
        print('Your guess is too high.')

# Reveal the results:
if guess == secretNumber:
    print('Yay! You guessed my number!')
else:
    print('Game over. The number I was thinking of was', secretNumber)

Syntax HighLighting With Line Numbers

Highlighting is carried out via the built-in highlight shortcode. It takes exactly one required parameter for the programming language to be highlighted and requires a closing shortcode.

  • linenos: Configures line numbers. Valid values are true, false, table, or inline. false will turn off line numbers if it’s configured to be on in the site configuration. table will give copy-and-paste-friendly code blocks.

  • hl_lines: Lists a set of line numbers or line number ranges to be highlighted.

  • linenostart=199: Starts the line number count from 199.

  • anchorlinenos: Configures anchors on line numbers. Valid values are true or false.

  • lineanchors: Configures a prefix for the anchors on line numbers. It will be suffixed with a dash (-), so linking to line number 1 with the option lineanchors=prefix adds the anchor prefix-1 to the page.

  • hl_inline: Highlights inside a <code> (inline HTML element) tag. Valid values are true or false. The code tag will get a class with the name code-inline.

{{< highlight html "linenos=table,hl_lines=11-15,linenostart=1,title='index.html'" >}}
WRITE THE CODE HERE
{{< / highlight >}}

// or

```html {linenos=table,hl_lines=["11-15"],linenostart=1,title="index.html"}
WRITE THE CODE HERE
```
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<body>

    <h2>JavaScript Statements</h2>

    <p>Multiple statements on one line are allowed.</p>

    <p id="demo1"></p>

    <script>
        let a, b, c;
        a = 5; b = 6; c = a + b;
        document.getElementById("demo1").innerHTML = c;
    </script>

</body>
</html>

Tabs

{{< tabs "Languages" >}}

{{< tab "JS" >}}
```js
console.log("This is the JS tab.")
```
{{< /tab >}}

{{< tab "Python" >}}
```py
print("This is the Python tab.")
```
{{< /tab >}}

{{< tab "C" >}}
```c
#include <stdio.h>

int main()
{
	printf("This is the C tab.");
	return 0;
}
```
{{< /tab >}}

{{< tab "Java" >}}
```java
public class Main {
    public static void main(String[] args) {
        System.out.println("This is the Java tab.");
    }
}
```
{{< /tab >}}

{{< /tabs >}}
  • JS
  • Python
  • C
  • Java
console.log("This is the JS tab.")
print("This is the Python tab.")
#include <stdio.h>

int main()
{
	printf("This is the C tab.");
	return 0;
}
public class Main {
    public static void main(String[] args) {
        System.out.println("This is the Java tab.");
    }
}

Diagrams

Feel free to explore the Mermaid.js documentation for more diagram types and customization options: https://mermaid-js.github.io/mermaid/#/

There are some complex diagrams that you can use with the Mermaid.js shortcode:

Flowchart

{{< diagram >}}
flowchart TD
    Start --> Input
    Input --> Condition
    Condition -- Yes --> Process1
    Condition -- No --> Process2
    Process1 --> Process3
    Process2 --> Process4
    Process3 --> Process5
    Process4 --> Process5
    Process5 --> Output
    Output --> End
{{< /diagram >}}
flowchart TD Start --> Input Input --> Condition Condition -- Yes --> Process1 Condition -- No --> Process2 Process1 --> Process3 Process2 --> Process4 Process3 --> Process5 Process4 --> Process5 Process5 --> Output Output --> End

Sequence Diagram

{{< diagram >}}
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Request
    Bob->>Alice: Response
{{< /diagram >}}

{{< diagram >}} sequenceDiagram participant Alice participant Bob Alice-›Bob: Request Bob-›Alice: Response {{< /diagram >}}

Gantt Chart

{{< diagram >}}
gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Phase 1
    Task 1           :a1, 2023-06-01, 10d
    Task 2           :a2, 2023-06-12, 5d
    section Phase 2
    Task 3           :a3, 2023-06-19, 8d
    Task 4           :a4, 2023-06-28, 3d
{{< /diagram >}}
gantt title Project Timeline dateFormat YYYY-MM-DD section Phase 1 Task 1 :a1, 2023-06-01, 10d Task 2 :a2, 2023-06-12, 5d section Phase 2 Task 3 :a3, 2023-06-19, 8d Task 4 :a4, 2023-06-28, 3d

Class Diagram

{{< diagram >}}
---
title: Animal example
---
classDiagram
    note "From Duck till Zebra"
    Animal <|-- Duck
    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }
{{< /diagram >}}
--- title: Animal example --- classDiagram note "From Duck till Zebra" Animal <|-- Duck note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging" Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() }

Charts

{{< chart "myChart" "line" "{\"labels\": [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\"], \"datasets\": [{ \"label\": \"Sales\", \"data\": [50, 80, 30, 70, 60, 90], \"backgroundColor\": \"rgba(54, 162, 235, 0.2)\", \"borderColor\": \"rgba(54, 162, 235, 1)\", \"borderWidth\": 1, \"pointBackgroundColor\": \"rgba(54, 162, 235, 1)\", \"pointBorderColor\": \"#fff\", \"pointHoverBackgroundColor\": \"#fff\", \"pointHoverBorderColor\": \"rgba(54, 162, 235, 1)\" }, { \"label\": \"Expenses\", \"data\": [40, 60, 45, 55, 70, 50], \"backgroundColor\": \"rgba(255, 99, 132, 0.2)\", \"borderColor\": \"rgba(255, 99, 132, 1)\", \"borderWidth\": 1, \"pointBackgroundColor\": \"rgba(255, 99, 132, 1)\", \"pointBorderColor\": \"#fff\", \"pointHoverBackgroundColor\": \"#fff\", \"pointHoverBorderColor\": \"rgba(255, 99, 132, 1)\" }] }" "{\"responsive\": true, \"scales\": { \"y\": { \"beginAtZero\": true, \"title\": { \"display\": true, \"text\": \"Amount\" } } } }" >}}


LaTeX | Math

Here is some inline math: {{< math `
$$ E = mc^2 $$

$$ 3 < 4 $$
` >}}

Here is some inline math:

$$ E = mc^2 $$ $$ 3 < 4 $$

And here is a displayed equation:
{{< math `
$$ E={\sqrt  {p^{2}c^{2}+m^{2}c^{4}}}=\gamma mc^{2} $$

\[
\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}
\]

\begin{align}
    p(v_i=1|\mathbf{h}) & = \sigma\left(\sum_j w_{ij}h_j + b_i\right)
\end{align}
` >}}

And here is a displayed equation:

$$ E={\sqrt {p^{2}c^{2}+m^{2}c^{4}}}=\gamma mc^{2} $$ \[ \int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi} \] \begin{align} p(v_i=1|\mathbf{h}) & = \sigma\left(\sum_j w_{ij}h_j + b_i\right) \end{align}