Markdown tips¶

For full documentation visit zensical.org.

Commands¶

• zensical new - Create a new project
• zensical serve - Start local web server
• zensical build - Build your site

Examples¶

Admonitions¶

Go to documentation

!!! note

    This is a **note** admonition. Use it to provide helpful information.

!!! warning

    This is a **warning** admonition. Be careful!

Details¶

Go to documentation

> Go to [documentation](https://zensical.org/docs/authoring/admonitions/#collapsible-blocks)

??? info "Click to expand for more info"

    This content is hidden until you click to expand it.
    Great for FAQs or long explanations.

Code Blocks¶

Go to documentation

def greet(name):
    print(f"Hello, {name}!") # (1)!

greet("Python")

1. Go to documentation

   Code annotations allow to attach notes to lines of code.

Code can also be highlighted inline: print("Hello, Python!").

Content tabs¶

Go to documentation

print("Hello from Python!")

println!("Hello from Rust!");

Diagrams¶

Go to documentation

graph LR
  A[Start] --> B{Error?};
  B -->|Yes| C[Hmm...];
  C --> D[Debug];
  D --> B;
  B ---->|No| E[Yay!];

Footnotes¶

Go to documentation

Here's a sentence with a footnote.¹

Hover it, to see a tooltip.

Images¶

Use regular Markdown when you want the image to appear directly in the page:

![Berry Blast smoothie](ASA/images/Picture1.png)

You can also add hover text after the path:

![Berry Blast smoothie](ASA/images/Picture1.png "Berry Blast smoothie")

Use a reference-style image when you want to keep the image path separate from the paragraph:

![Berry Blast smoothie][berry-blast]

[berry-blast]: ASA/images/Picture1.png "Berry Blast smoothie"

To size an image, use HTML instead of Markdown:

<img src="ASA/images/Picture1.png" alt="Berry Blast smoothie" width="400">

You can also size by percentage:

<img src="ASA/images/Picture1.png" alt="Berry Blast smoothie" width="60%">

Use inline HTML when you want an image to sit inside a sentence:

Blend until smooth <img src="ASA/images/Picture1.png" alt="Berry Blast smoothie" width="80"> and serve cold.

Formatting¶

Go to documentation

• This was marked (highlight)
• This was inserted (underline)
• This was deleted (strikethrough)
• H₂O
• A^TA
• Ctrl+Alt+Del

Icons, Emojis¶

Go to documentation

• :sparkles:
• :rocket:
• :tada:
• :memo:
• :eyes:

Font Awesome¶

To use fontawesome, you must use the solid folder. So the prefix is: fontawesome-solid

• :fontawesome-solid-mosquito-net:
• :fontawesome-solid-calculator:

Luicide, Material Icons¶

• :lucide-aperture:
• :material-bluetooth-connect:

Icon header:¶

If you want an icon to show up in the navigation page, put this at the top of your page:

---
icon: lucide/cpu
---

Maths¶

Go to documentation

\cos x=\sum_{k=0}^{\infty}\frac{(-1)^k}{(2k)!}x^{2k}

Task Lists¶

Go to documentation

I've also added a button that clears all the checks!

• Install Zensical
• Configure zensical.toml
• Write amazing documentation
• Deploy anywhere

<div class="tasklist-clear-anchor"></div>
* [x] Install Zensical
* [x] Configure `zensical.toml`
* [x] Write amazing documentation
* [ ] Deploy anywhere

Tooltips¶

Go to documentation

Hover me

icon: simple/markdown¶

Markdown in 5min¶

Headers¶

# H1 Header
## H2 Header
### H3 Header
#### H4 Header
##### H5 Header
###### H6 Header

Text formatting¶

**bold text**
*italic text*
***bold and italic***
~~strikethrough~~
`inline code`

Links and images¶

[Link text](https://example.com)
[Link with title](https://example.com "Hover title")
![Alt text](image.jpg)
![Image with title](image.jpg "Image title")

Image examples¶

Inline image:
![Alt text](images/example.png)

Reference-style image:
![Alt text][example-image]

[example-image]: images/example.png "Optional hover title"

Scaled image:
<img src="images/example.png" alt="Alt text" width="400">

Scaled by percentage:
<img src="images/example.png" alt="Alt text" width="60%">

Small image inside a sentence:
Text before <img src="images/example.png" alt="Alt text" width="80"> text after.

Lists¶

Unordered:

- Item 1
- Item 2
  - Nested item

Ordered:

1. First item
2. Second item
3. Third item

Blockquotes¶

> This is a blockquote
> Multiple lines
>> Nested quote

Code blocks¶

```javascript
function hello() {
  console.log("Hello, world!");
}
```

Tables¶

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Row 1    | Data     | Data     |
| Row 2    | Data     | Data     |

Horizontal rule¶

---
or
***
or
___

Task lists¶

- [x] Completed task
- [ ] Incomplete task
- [ ] Another task

Escaping characters¶

Use backslash to escape: \* \_ \# \`

Line breaks¶

End a line with two spaces  
to create a line break.

Or use a blank line for a new paragraph.