Advanced markdown syntax

Besides the basic markdown syntax, we (Typlog) offer more advanced features.

Table

You can create tables with pipes | and hyphens -. Hyphens are used to create each column's header, while pipes separate each column. You must include a blank line before your table in order for it to correctly render.

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

There is a simple version for the table without the leading and ending |:

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

Fenced block code

Besides indenting with 4 spaces for a code block, there is fenced code block. With fenced code, you can highlight the block code with a given language name.

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

Fenced code accepts extra parameters after the language part. ```language extra info.

Show line numbers

Typlog can render block code line numebrs with lineno option:

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

Highlight certain lines

With highlight option, you can mark certain lines with a highlight background color:

```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 value of highlight option:

  1. highlight=2, just highlight the second line
  2. highlight=1-3, highlight between the first and third lines
  3. highlight=1,4,6, highlight the first, 4th, and 6th lines.
  4. highlight=1-3,5,7-9, highlight the 1st to 3rd lines, the 5th line, the 7th to 9th lines.

Show filename

With filename option, there will be a header part to show the filename in the code block:

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

filename and lineno together:

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

With all options

Here is an example of how it looks with all options:

```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 how it looks like:

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

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

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

Block level math is wrapped with language math fenced code:

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