Markdown Syntax¶

Headings¶

Keep space between the # sign and the heading itself.

Raw Markdown:

# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6

Rendered result:

Header 1¶

Header 2¶

Header 3¶

Header 4¶

Header 5¶

Header 6¶

No alternate syntax supported for the headings at the moment.

Tables¶

Markdown table syntax is supported, complete with column alignment options to enhance readability and presentation.

A Markdown table is composed of rows of data, divided by pipes (|). The first row is typically the header, followed by a separator line, and then the data rows.

Raw Markdown:

| Item                  | In Stock | Price |
| :-------------------- | :------: | ----: |
| Unicorn Bubble Tea    | Yes      | 7.99  |
| Dragon's Breath Chili | No       | 23.99 |
| Fairy Dust Tiramisu   | Yes      | 17.99 |
| Wizard's Cloak Hoodie | No       | 42.99 |

Rendered result:

Alignment Operands¶

To align the content within your table cells, you can use colons (:) in the separator line:

• Left-aligned: Use :-- or :--- (colon on the left side)
• Center-aligned: Use :--: or :---: (colons on both sides)
• Right-aligned: Use --: or ---: (colon on the right side)

Links¶

Use [label](destination) for a text link and wrap ![Alt text](image-path) inside it for a clickable picture. An optional quoted title follows the destination. Local links open supported text files relative to the current document.

Raw Markdown:

[Notolog documentation](https://notolog.app/)
[Markdown guide](https://notolog.app/markdown-syntax/ "Markdown syntax")
[Local user guide](user-guide.md)
[![Documentation](assets/notolog-example-image.png)](https://notolog.app/)

Rendered result:

Notolog documentation

Markdown guide

Local user guide

Images¶

Image with path¶

Raw Markdown:

![Notolog](assets/notolog-example-image.png)

Rendered result:

The syntax follows the pattern: ![Alt text](assets/notolog-example-image.png) where the path can be relative to the current file or an absolute URL.

Image with base64 data¶

For embedding images directly in Markdown without external files:

Raw Markdown:

![Notolog inline logo](data:image/png;base64,iVBORw0KGgo...)

Rendered result:

To get base64 image code from the real image use this Python example:

import base64

file_path = 'example.png'
with open(file_path, 'rb') as image_file:
    image_data = image_file.read()
    base64_encoded_data = base64.b64encode(image_data)
    base64_decoded_data = base64_encoded_data.decode('utf-8')
    print(base64_decoded_data)

Then place the printed code into this template (replace CODE with the output):

![Alt text](data:image/png;base64,CODE)

B-I-U-S¶

**B**old-**I**talic-**U**nderline-**S**trikethrough

Bold¶

Raw Markdown:

Some **bold** text here A
Some __bold__ text here B

Rendered result:

Some bold text here A Some bold text here B

When using bold text markdown avoid an underscores which are not surrounded with spaces, use a**n asterix syntax ins**tead.

Also, the multiline syntax is supported, so please feel free to use it whenever you may find it helpful, or whenever it gets you in other ways.

Italic¶

Raw Markdown:

Some *lorem ipsum* text here A
Some _lorem ipsum_ text here B

Rendered result:

Some lorem ipsum text here A Some lorem ipsum text here B

Also, multiline syntax is supported, so please feel free to use it whenever you find it helpful or whenever it benefits you in other ways.

Bold + Italic¶

Raw Markdown:

Some ***lorem ipsum*** text here A
Some ___lorem ipsum___ text here B

Rendered result:

Some lorem ipsum text here A Some lorem ipsum text here B

Also, multiline syntax is supported, so please feel free to use it whenever you find it helpful or whenever it benefits you in other ways.

Underline¶

Raw Markdown:

Some <u>lorem ipsum</u> text here.

Rendered result:

Some lorem ipsum text here.

Also, multiline syntax is supported, so please feel free to use it whenever you find it helpful.

Strikethrough¶

Raw Markdown:

Some ~~lorem ipsum~~ text here.

Rendered result:

Some lorem ipsum text here.

Also, multiline syntax is supported, so please feel free to use it whenever you find it helpful.

Lists¶

Raw Markdown (unordered lists):

* Some
    * Random
        * Text

- List1
- List2
- List3

Rendered result:

• Some

  • Random
    • Text

• List1

• List2
• List3

Raw Markdown (ordered list):

1. One
    2. Two
        3. Three

Rendered result:

1. One
   1. Two
      1. Three

Footnotes¶

This is a part of the extended Markdown syntax. Handful for creating footnotes at the bottom of the pages.

Raw Markdown:

Footnotes[^1] have a label[^somenote-id] which is an id and the footnote's content can be seen by following the footnote's link.

[^1]: This is a footnote number **1**, do not forget to click a link to return →
[^somenote-id]: A footnote with the label **somenote-id** is also here.

Rendered result:

Footnotes¹ have a label² which is an id and the footnote's content can be seen by following the footnote's link.

Footnote notations themselves are not visible if rendered correctly.

Double check a footnote label (id) is corresponding with the footnote's notation written in a square brackets, like in example above.

Blockquote¶

Raw Markdown:

> Also, multiline syntax is supported, so please
feel free to use it whenever you find it helpful.

Rendered result:

Also, multiline syntax is supported, so please feel free to use it whenever you find it helpful.

Nested blockquote¶

Raw Markdown:

> Also, multiline syntax is supported, so please
>> feel free to use it whenever you find it helpful
>>> or whenever it benefits you in other ways.

Rendered result:

Also, multiline syntax is supported, so please

feel free to use it whenever you find it helpful

or whenever it benefits you in other ways.

More elements within blockquote¶

Raw Markdown:

> #### Also, multiline syntax is supported
>
> * So please feel free to use it whenever you find it helpful.
> * Or whenever it benefits you in other ways.
>
* Any other `inline` *elements* are also **supported** here as well.

Rendered result:

Also, multiline syntax is supported¶

• So please feel free to use it whenever you find it helpful.

• Or whenever it benefits you in other ways.

• Any other inline elements are also supported here as well.

Code¶

Multi-line blocks¶

Code block within fences:

# My first code
print('Hello World!')

In edit mode, Pygments adds language-aware colors when the fence declares one of these languages (aliases are shown in parentheses):

• Bash (sh, shell, zsh), console
• C (h), C++ (cpp, c++, cc, hpp)
• CSS, diff (patch), Dockerfile (docker)
• HTML (htm), INI, JavaScript (js), JSON, JSON5
• Markdown (md), PHP, Python (py), SQL, TOML
• TypeScript (ts), XML, YAML (yml)

An omitted or unknown language still uses the generic code-block style. A markdown fence highlights Markdown tokens such as emphasis as code syntax; it does not render the fenced content as headings, lists, bold text, or italic text.

Fenced code blocks also work inside lists and blockquotes, in both edit and view mode. Keep the opening and closing fences at the same indentation and indent their contents at least as far. Separate the block from surrounding text with a blank line:

1. Install the audio dependencies:

    ```sh
    pip install "notolog[tts]"
    ```

2. Open Settings.

For nested lists, add another four spaces per list level. A fence must begin on its own line, below the list item marker.

Notolog edit mode also recognizes a legacy indented pseudo-fence. The language name can use any alias supported by the editor's fenced-code highlighter, not only Python:

::::py
# My first code
print('Hello World!')

This is an edit-mode highlighting extension rather than Python-Markdown fence syntax. In rendered output it remains an ordinary indented code block and the ::::py line is displayed literally. A blank line ends the pseudo-fence.

Fenced code blocks must be placed at the document root. The bundled Extra extension does not parse fences nested inside lists or blockquotes.

<html>
<p>HTML Document</p>
</html>

Code blocks are perfect for monospace text, such as ASCII art:

███╗   ██╗ ██████╗ ████████╗ ██████╗ ██╗      ██████╗  ██████╗ 
████╗  ██║██╔═══██╗╚══██╔══╝██╔═══██╗██║     ██╔═══██╗██╔════╝ 
██╔██╗ ██║██║   ██║   ██║   ██║   ██║██║     ██║   ██║██║  ███╗
██║╚██╗██║██║   ██║   ██║   ██║   ██║██║     ██║   ██║██║   ██║
██║ ╚████║╚██████╔╝   ██║   ╚██████╔╝███████╗╚██████╔╝╚██████╔╝
╚═╝  ╚═══╝ ╚═════╝    ╚═╝    ╚═════╝ ╚══════╝ ╚═════╝  ╚═════╝ 

Inline code¶

Inline code uses matching backtick delimiters:

pip3 install notolog

Longer delimiters allow the span to contain shorter backtick runs:

ls -la

Both directions are valid when spaces make the outer delimiter unambiguous:

```pip3 install notolog```

`pip3 install notolog`

Horizontal line¶

As simple as at least three hyphens.

TODOs¶

Some tasks take time to complete, and breaking them down into simpler tasks can help in getting them sorted efficiently. To assist in keeping all records on track, we have introduced a @todo token, available in both code and text formats.

Abbreviations¶

The text contains abbreviation (hover mouse on it):

• The HTML is a hyper-text markup language
• Find more info about it at WWW

The abbreviation notations themselves are not visible when have been rendered correctly.

Admonitions¶

Admonitions are special callout blocks that highlight important information. They support various types for different purposes.

Raw Markdown:

!!! note "Optional Title"
    This is a note admonition.
    Content must be indented.

!!! warning
    This is a warning without a custom title.

!!! tip "Pro Tip"
    Helpful tips go here.

Rendered result:

Supported Admonition Types¶

Admonition Syntax Rules¶

1. Start with !!! followed by the type
2. Optional title in quotes after the type
3. Content must be indented (4 spaces or 1 tab)
4. Empty lines are allowed within the content

Details and Summary¶

This README.md file has been carefully crafted and edited using the Notolog editor itself.