Markdown Formatting Options

Thursday, 17 October 2024 - ⧖ 7 min

The content on Marmite accepts any valid CommonMark or Github Flavoured markdown and some GFM extensions, Marmite also does post processing of HTML to support features such as back-links and Obsidian links.

Paragraphs and formatting

Simple paragraph and usual formatting like bold, underline, italic and also all sorts of formatting elements, as follows.

**bold**, __underline__, *italic*

Strike-through

The following is ~~no more~~.

The following is ~~no more~~.

Table

Syntax	Description
Header	Title
List	Here's a list! Item one. Item two.

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title |
| List        | Here's a list! <ul><li>Item one.</li><li>Item two.</li></ul> |

Auto-link

https://github.com/rochacbruno/marmite
A link with a tooltip
https://www.markdownguide.org
fake@example.com

https://github.com/rochacbruno/marmite  
[A link with a tooltip](https://pudim.com.br "A picture of a pudim")  
<https://www.markdownguide.org>  
<fake@example.com>

Wikilinks

Wikilinks allows to link using [[name|url]] syntax.

Read the Tutorial and Read the Tutorial and Read the Tutorial

Pudim

[[Read the Tutorial|getting-started]] and [[Read the Tutorial|getting-started.md]] and [[Read the Tutorial|getting-started.html]]

[[Pudim|https://pudim.com.br]]

Obsidian Links

Obsidian links are made using [[page-slug]] or [[page-slug.md]]

Example:

about and about and about should point both to the about page.

https://pudim.com.br

[[about]] and [[about.md]] and [[about.html]] should point both to the about page.

[[https://pudim.com.br]]

Back-links

Every time you link to another page or post using the backreference like {slug}, {slug}.md or {slug}.html marmite will track the backlinking and show a list of pages that links to each other.

Examples:

hello Hello1 Hello2 Hello3 Hello4 Hello5

[[hello]]
[Hello1](hello.html)
[Hello2](hello.md)
[[Hello3|hello]]
[[Hello4|hello.md]]
<a href="hello.html">Hello5</a>

In any case the hello.html page will have a this page on its list of back-links:

Task

Task 1
Task 2

- [x] Task 1
- [ ] Task 2

Superscript

All raw html is allowed

80²

80<sup>2</sup>

Footnotes

Here is a simple footnote¹. With some² additional text after it.

A reference1 can also be just a link hidden from footnotes.

Here is a simple footnote[^1]. With some[^2] additional text after it.  

A reference[1] can also be just a link hidden from footnotes.

And on the end of the file:

[^1]: My reference.
[^2]: Another footnote
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> "Hobbit lifestyles"

Description lists

First term

Details for the first term

Second term

Details for the second term

More details in second paragraph.

First term

: Details for the **first term**

Second term

: Details for the **second term**

    More details in second paragraph.

Block quote

>Not a quote

quote

Nested quote

>Not a quote
> quote
> > > Nested quote

Multiline quote

"Marmite is the easiest SSG" created by Bruno Rocha with the contribution of various people.

>>>
"Marmite is the easiest SSG" created by
Bruno Rocha with the contribution of various people.
>>>

Multi paragraph quote

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with

> Dorothy followed her through many of the beautiful rooms in her castle.
> 
> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with

Rich quotes

The quarterly results look great!

Revenue was off the chart.

Profits were higher than ever.

Everything is going according to plan.

> #### The quarterly results look great!
> 
> - Revenue was off the chart.
> - Profits were higher than ever.
> 
>  *Everything* is going according to **plan**.

Emoji

😄 - 🦀 - 🐍

:smile: - :crab: - :snake:

Math

Depends on extra: {"math": true} defined on frontmatter, then MathJax is loaded.

When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

Inline math $1 + 2$ and display math $$x + y$$

$$ x^2 $$

When $a \ne 0$, there are two solutions to \\(ax^2 + bx + c = 0\\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

Inline math $1 + 2$ and display math $$x + y$$

$$
x^2
$$

Diagrams

Depends on extra: {"mermaid": true} defined on frontmatter, then MermaidJS is loaded.

mermaid_theme is also configurable with values forest,neutral*,dark,forest,base,default

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D

xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

timeline
    title History of marmite
    2024-10-13 : Created
    2024-10-14 : First Release
               : First Contribution
    2024-10-20 : Big refactor
    2024-10-22 : Diagram support

Click to see the raw mermaid

```mermaid
sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

```

```mermaid
graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D

```

```mermaid
xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

```

```mermaid
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

```

```mermaid
timeline
    title History of marmite
    2024-10-13 : Created
    2024-10-14 : First Release
               : First Contribution
    2024-10-20 : Big refactor
    2024-10-22 : Diagram support
```

Underline

dunder

__dunder__

Spoiler

This is secret

This is ||secret||

Code

import antigravity

def main():
    print("Python is a great language")

fn main() {
    println!("Marmite is made with Rust!");
}

```python
import antigravity

def main():
    print("Python is a great language")
```

```rust
fn main() {
    println!("Marmite is made with Rust!");
}
```

lists

lists
- sub item
images
- other
tables
Formatting

- lists
  - sub item
- images
  * other
- tables
- Formatting

Numbered

First item
Second item
- Indented unordered item
- Indented unordered item
Third item
1. Indented ordered item
2. Indented ordered item
Fourth item

1. First item
1. Second item
    - Indented unordered item
    - Indented unordered item
1. Third item
    1. Indented ordered item
    1. Indented ordered item
1. Fourth item

Starting lists with numbers requires a number\

1983. A great year!
I think 1984 was second best.

- 1983\. A great year!
- I think 1984 was second best.

Images

Photo

Same but containing a tooltip if you hover the mouse on

Photo  
![Photo](media/marmite.jpg)

Same but containing a tooltip if you hover the mouse on  
![Photo](media/marmite.jpg "A jar of Marmite")

Embed

Just use raw HTML for now, in future we may have a shorcode.

<iframe width="260" height="160" src="https://www.youtube.com/embed/MjrBTcnnK6c?si=PmQWsGiTh5XguSpb" title="YouTube video player"></iframe>

Pico CSS components

The default embedded template uses picocss so it is possible to write raw HTML like this:

FAQ

Why is it named Marmite?

The creator of this project was looking for some cool name to use for a markdown related project. Then while having bread with Marmite spread for breakfast it looked like a good idea!

Why Rust?

Why not?

<details>
<summary>Why is it named Marmite?</summary>

The ...

</details>

<hr />

<details>
<summary>Why Rust?</summary>

**Why not?**

</details>

<hr />

Symbols

Copyright (©) — &copy;
Registered trademark (®) — &reg;
Trademark (™) — &trade;
Euro (€) — &euro;
Left arrow (←) — &larr;
Up arrow (↑) — &uarr;
Right arrow (→) — &rarr;
Down arrow (↓) — &darr;
Degree (°) — &#176;
Pi (π) — &#960;

This is a &copy;left material.

This post specifies FrontMatter on its header

---
date: 2024-01-01 12:00:01
slug: markdown-format
title: Markdown Formatting Options
tags: markdown, python, rust, Common Mark
extra:
  math: true
  mermaid: true
---

Bye!

Please consider giving a star on Marmite Github repository, that helps a lot!

My reference. ↩
Another footnote ↩