Headings¶

h1 Heading¶

h2 Heading¶

h3 Heading¶

h4 Heading¶

h5 Heading¶

h6 Heading¶

Horizontal Rules¶

Create a horizontal rule by entering three underscore (___), dash (---) or asterisk (***) characters on a separate line in your markdown. Use site-wide custom css to style the horizontal rules. For example, to make them lighter and 4px thick, add the following to your extra.css file:

hr {
  height:4px; 
  border-width:0; 
  background-color: var(--md-default-fg-color--lighter);
  /* Note: Using Material's built-in CSS variables like --md-default-fg-color--lightest */
  /* ensures your line color adjusts nicely when switching between light and dark color schemes. */
}

Typographic replacements¶

Enable smartsymbols extension to see result:

[project.markdown_extensions]
pymdownx.smartsymbols = {}

Examples¶

--> yields →

<-- yields ←

<--> yields ↔

(c) → ©

(r) → ®

(tm) → ™

1/4, 1/2, 1/8, 1/3 → ¼, ½, ⅛, ⅓

+/- → ±

1st, 2nd, etc. → 1^st, 2^nd, etc.

Emphasis¶

**This is bold text**

__This is also bold text__

*This is italic text*

_This is also italic text_

~~Strikethrough~~

This is also bold text

This is italic text

This is also italic text

Strikethrough

Blockquotes¶

> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between greater-than signs.

Blockquotes can also be nested…

…by using additional greater-than signs right next to each other…

…or with spaces between greater-than signs.

Lists¶

Unordered¶

• Create a list by starting a line with +, -, or *
• Sub-lists are made by indenting 2 spaces:
• Marker character change forces new list start:
  • Ac tristique libero volutpat at
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
• Very easy!

Ordered¶

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. You can use sequential numbers…
5. …or keep all the numbers as 1.

Changing the starting number of an ordered list:¶

In Zensical, you can change the starting number of an ordered list by explicitly writing your desired starting number on the very first item of the list. While Zensical automatically re-numbers consecutive list items when rendering (allowing you to use 1. for all subsequent items), it remains highly sensitive to the initial value. The first item dictates the start of the <ol> sequence.

09/10/26: NOT WORKING

27. foo
28. bar

Code¶

<code> Sections¶

Use single backquotes/grave accent characters in a line to format a section as <code\>.

Use single back-quotes in a line `to format a section as <code\>.`

To format multi-line sections of code, indent each line with four spaces:

// Some comments
line 1 of code
line 2 of code
line 3 of code

Block Code¶

Language-specific syntax highlighting

Block code sections begin and end with three backquotes. To enable syntax highlighting, the code block must be marked by a language shortcode identifier (e.g., php, js, python, etc.).

<?php
/* This is a sample bit of php code. */
# Function to add two numbers
function add_em_up ( $a, $b ) { 
  return $a + $b;
}

# Example usage
$a = 53.67;
$b = 22;
$result = add_em_up ( $a, $b );
echo "$a + $b : $result\n";
?>

const foo = function (bar) {
  return bar++;
};

console.log(foo(5));

Interactive code annotations¶

Code annotations can be placed anywhere in a code block where a comment for the language of the block can be placed. Enable the content.code.annotate extension:

[project.theme]
features = [
  "content.code.annotate", 
]

Add a blank line followed by a numbered list directly after the code block to create interactive, explanatory tooltips.

def calculate_total(price: float, tax: float) -> float:
    """Calculate the final price including tax."""
    subtotal = price * (1.0 + tax)  # (1)
    return round(subtotal, 2)       # (2)

1. This line calculates the final cost by adding the decimal tax rate to 1 and scaling the original price.
2. This line cleans up floating-point precision issues by rounding the final output to two decimal places.

  ``` python title="Python syntax highlighting"
  def calculate_total(price: float, tax: float) -> float:
      """Calculate the final price including tax."""
      subtotal = price * (1.0 + tax)  # (1)
      return round(subtotal, 2)       # (2)
  ```

  1. This line calculates the final cost by adding the decimal tax rate to 1 and scaling the original price.
  2. This line cleans up floating-point precision issues by rounding the final output to two decimal places.

Tables¶

Right aligned column

Links¶

[link text](https://example.langley.stream:4443/)

[link with title](https://example.langley.stream:4443/ "title text!")

link with title

* [`zensical new`][new] - Create a new project
* [`zensical serve`][serve] - Start local web server
* [`zensical build`][build] - Build your site

  [new]: https://zensical.org/docs/usage/new/
  [serve]: https://zensical.org/docs/usage/preview/
  [build]: https://zensical.org/docs/usage/build/

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

Images¶

Like links, Images also have a footnote style syntax

With a reference later in the document defining the URL location:

Plugins¶

The killer feature of markdown-it is very effective support of syntax plugins.

Emojies¶

Classic markup:

Shortcuts (emoticons): :-) :-( 8-) ;)

see how to change output with twemoji.

Subscript / Superscript¶

• 19^th
• H₂O

<ins>¶

^^inserted^^ => <ins>inserted</ins>

inserted section

<mark>¶

==marked== => <mark>marked</mark>

marked section

<del>¶

~~deleted~~ => <del>deleted</del>

deleted section

Footnotes¶

Footnote 1 link¹.

Footnote 2 link².

Duplicated footnote reference².

Definition lists¶

Term 1

Definition 1 with lazy continuation.

Term 2 with inline markup

Definition 2

PHP code

  <?php
  echo "Hello";
  ?>

Third paragraph of definition 2.

Abbreviations¶

This example creates an abbreviation popup for the text “HTML”. Hover over the abbreviation to see its definition (title).

*[HTML]: Hyper Text Markup Language

It converts “HTML”, but keeps intact partial entries like “XHTML”.