Contents
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" >}}
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" >}}
{{< line >}}
Hidden Text
{{< blur "This text is blurred" >}}
This is a {{< blur "Hide text" >}}
This is a
Spoiler
{{< spoiler name="Hello World" >}}
```py
print("Hello World!")
```
{{< /spoiler >}}
print("Hello World!")
Links Card
{{< link-card title="This is an example link card" url="https://picsum.photos" desc="This is an example link card. This is an example link card." img="https://picsum.photos/1920/1080/?random=1" >}}
{{< link-card title="This is an example link card" url="https://picsum.photos" desc="This is an example link card." >}}
This is an example link card
This is an example link card. This is an example link card
https://picsum.photosThis is an example link card
This is an example link card.
https://picsum.photosOpenSeadragon
Checkout The Project: OpenSeadragon DZI Converter
{{< dzi id="seadragon-viewer" url="/dzi/mountain_files/" format="jpg" imgWidth="15920" imgHeight="9800" >}}
Carousel
{{< carousel height="500" unit="px" items="3" duration="2000" images="https://picsum.photos/1920/1080/?random=1,https://picsum.photos/1920/1080/?random=2,https://picsum.photos/1920/1080/?random=5,https://picsum.photos/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 aretrue
,false
,table
, orinline
.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 aretrue
orfalse
.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 optionlineanchors=prefix
adds the anchorprefix-1
to the page.hl_inline
: Highlights inside a<code>
(inline HTML element) tag. Valid values aretrue
orfalse
. The code tag will get a class with the namecode-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
```
|
|
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 >}}
Sequence 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 >}}
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 >}}
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 >}}\(ax^2 + bx + c = 0\){{< /math >}}
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} $$
{{< /math >}}
Comments
No comments yet. Be the first to comment!
Leave a Comment
Comments are moderated for security reasons. Your comment will be added after review.