Advanced markdown syntax

In addition to basic Markdown, Typlog offers some advanced features.

Tables

You can create tables with pipes (|) and hyphens (-). Hyphens are used to create each column's header, while pipes separate the columns.

You must include a blank line before and after your table in order for it to render correctly.

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

The leading and trailing pipes (|) are optional:

First Header  | Second Header 
------------- | ------------- 
Content Cell  | Content Cell
Content Cell  | Content Cell

Fenced block code

You can indent using 4 spaces to create a simple code block. You can also use three backticks (`) to create a fenced code block.

In order to get syntax highlighting, you can optionally follow the opening backticks with the name of the language the code is written in:

```python
def hello():
    print('hello')
```

Fenced code blocks accept additional options after the language name: ```<language> <option> <option>....

Option: Show line numbers

Typlog can render code block line numbers with the lineno option:

```python lineno
def hello():
    print('hello')
```

def hello():
    print('hello')

Option: Highlight selected lines

With the highlight option, you can highlight selected lines:

```python highlight=2-5,9
def print_card(card):
    print('<div class="card">')
    if card.image:
        print(f'<img src="{card.image}" class="card_image">')
    print(f'<h2 class="card_name"><a href="">{card.name}</a></h2>')
    print(<p class="card_summary">{card.summary}</p>')
    print('</div>')

for card in cards:
    print_card(card)
```

def print_card(card):
    print('<div class="card">')
    if card.image:
        print(f'<img src="{card.image}" class="card_image">')
    print(f'<h2 class="card_name"><a href="">{card.name}</a></h2>')
    print(<p class="card_summary">{card.summary}</p>')
    print('</div>')

for card in cards:
    print_card(card)

Here are some examples of the highlight option:

1. highlight=2, highlight the second line
2. highlight=1-3, highlight from the first to the third line
3. highlight=1,4,6, highlight the first, fourth, and sixth lines
4. highlight=1-3,5,7-9, highlight the first to third lines, the fifth line, and the seventh to ninth lines

Option: Show filename

With the filename option, the filename will be shown before the code block:

```python filename=hello.py
def hello():
    print('hello')
```

hello.py

def hello():
    print('hello')

Multiple options

Here are examples of multiple options in use at the same time:

```python lineno filename=hello.py
def hello():
    print('hello')
```

hello.py

def hello():
    print('hello')

```python lineno highlight=2-5,9 filename=print_card.py
def print_card(card):
    print('<div class="card">')
    if card.image:
        print(f'<img src="{card.image}" class="card_image">')
    print(f'<h2 class="card_name"><a href="">{card.name}</a></h2>')
    print(<p class="card_summary">{card.summary}</p>')
    print('</div>')

for card in cards:
    print_card(card)
```

print_card.py

def print_card(card):
    print('<div class="card">')
    if card.image:
        print(f'<img src="{card.image}" class="card_image">')
    print(f'<h2 class="card_name"><a href="">{card.name}</a></h2>')
    print(<p class="card_summary">{card.summary}</p>')
    print('</div>')

for card in cards:
    print_card(card)

Math

Math is supported via MathJax. Here is a preview of what it looks like:

Inline math $ax^2 + bx + c = 0$ is wrapped with `$ and $`:

`$ax^2 + bx + c = 0$`

Math blocks are wrapped with fenced code blocks and use math as the language:

```math
ax^2 + bx + c = 0
```

Admonitions