<!-- {"notolog.app": {"created": "2024-03-26 00:19:36.466439", "updated": "2026-02-07 00:00:00.000000"}} -->
# Markdown Syntax

## Headings

Keep space between the `#` sign and the heading itself.

**Raw Markdown:**

```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:**

```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:**

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

### 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:**

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

**Rendered result:**

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

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:**

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

**Rendered result:**

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

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

```python
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):

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


## B-I-U-S

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

### Bold

**Raw Markdown:**

```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:**

```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:**

```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:**

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

**Rendered result:**

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

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

### Strikethrough

**Raw Markdown:**

```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):**

```markdown
* Some
    * Random
        * Text

- List1
- List2
- List3
```

**Rendered result:**

* Some
    * Random
        * Text

- List1
- List2
- List3

**Raw Markdown (ordered list):**

```markdown
1. One
	2. Two
		3. Three
```

**Rendered result:**

1. One
	2. Two
		3. Three


## Footnotes

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

**Raw Markdown:**

```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[^1] have a label[^somenote-id] 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.*

[^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.

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:**

```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:**

```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:**

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

```python
# 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}
<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.*

*[HTML]: Hyper Text Markup Language
*[WWW]:  World Wide Web


## Admonitions

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

**Raw Markdown:**

```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:**

!!! note "Important Note"
    This is a note admonition. Use it to highlight additional information that readers should be aware of.

!!! warning "Caution"
    This is a warning admonition. Use it to alert readers about potential issues or important considerations.

!!! tip "Pro Tip"
    This is a tip admonition. Use it to share helpful suggestions and best practices.

### Supported Admonition Types

| Type | Use Case |
| :--- | :--- |
| `note` | General information and remarks |
| `info` | Informational content |
| `tip` | Helpful suggestions |
| `hint` | Subtle guidance (alias for tip) |
| `warning` | Important cautions |
| `caution` | Potential issues (alias for warning) |
| `danger` | Critical warnings |
| `error` | Error-related information |
| `success` | Positive outcomes |
| `question` | Questions or FAQs |
| `abstract` | Summary content |
| `summary` | Brief overviews (alias for abstract) |
| `example` | Code or usage examples |
| `bug` | Known issues |
| `quote` | Quotations |
| `failure` | Failure scenarios |

### 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

<details>
    <summary>Clickable Summary for Description</summary>
    This block contains additional information and conceals it beneath an expandable short summary.
    <details>
        <summary>Nested blocks support</summary>
        This feature is experimental, and some nested syntax highlighting may not function entirely as expected. Nonetheless, it proves helpful in condensing lengthy content into expandable links. Support for this block will be expanded in the future.
    </details>
</details>

---
_This README.md file has been carefully crafted and edited using the Notolog editor itself._