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)

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!')

Code block with colons example:

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

New line is required at the end of the block.

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

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

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

One-line blocks¶

One-line code within fences

pip3 install notolog

One-line code within fences, another example

ls -la

This case is also correct, just do not forget spaces between the tokens

```pip3 install notolog```

Or

`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.