Markdown Syntax Guide

Markdown Syntax Support

While most markdown features are supported out of the box, Tina will ignore elements that it cannot handle. We do not expect to support the full CommonMark and GitHub Flavored Markdown specs. Be sure to voice your support for various rich-text features by reaching out through one of our community channels!

Supported Elements

Here’s an overview of Markdown syntax with examples that you can use with TinaCMS or in your own text files.

Headers

# This is a h1 tag

## This is a h2 tag

#### This is a h4 tag

Emphasis

_This text will be italic_

**This text will be bold**

_You **can** combine them_

~This text has a strikethrough~

This text will be italic

This text will be bold

You can combine them

This text has a strikethrough

Lists

Unordered

- Item 1
- Item 2
  - Item 2a
  - Item 2b

• Item 1
• Item 2
  • Item 2a
  • Item 2b

Ordered

1. Item 1
1. Item 2
1. Item 3
   1. Item 3a
   1. Item 3b

1. Item 1
2. Item 2
3. Item 3
   1. Item 3a
   2. Item 3b

Images

![A llama](/uploads/llama-6.avif)
Format: ![Alt Text](url)

Links

https://tina.io - automatic!
[TinaCMS](https://tina.io)

https://tina.io - automatic! TinaCMS

Blockquotes

As Napoleon said about the liger:

> It’s pretty much my favorite animal.
> It’s like a lion and a tiger mixed… bred for its skills in magic.

As Napoleon said about the liger:

It’s pretty much my favorite animal. It’s like a lion and a tiger mixed… bred for its skills in magic.

Inline code

I think you should use an
`<addr>` element here instead.

I think you should use an <addr> element here instead.

Syntax highlighting

Here’s an example of how you can use syntax highlighting with GitHub Flavored Markdown:

```javascript
function fancyAlert(arg) {
  if (arg) {
    $.facebox({ div: '#foo' })
  }
}
```

And here's how it looks - nicely colored with styled code titles!

function fancyAlert(arg) {
  if (arg) {
    $.facebox({ div: '#foo' })
  }
}

Tables

You can create tables by assembling a list of words and dividing them with hyphens - (for the first row), and then separating each column with a pipe |:

| First Header                |Second Header                 |
| --------------------------- | ---------------------------- |
| Content from cell 1         | Content from cell 2          |
| Content in the first column | Content in the second column |

Diagrams

You can use Mermaid diagrams to visualize flows, sequences, and other chart types directly in Markdown. Here’s an example of a Mermaid flowchart:

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do Something]
    B -->|No| D[Do Something Else]
    C --> E[End]
    D --> E

Unsupported Elements

• Footnotes
• Code blocks via indentation (use ``` instead)
• Code blocks in list items
• Non-inline elements in tables...
• Links with an unsupported scheme – only URLs beginning with http, https, mailto, tel and xref will be recognised.

Non-serializable content

TinaCMS has no build step when MDX is used.

This means that any JavaScript expressions needing execution won't take effect.

• No support for import/export
• No support for JavaScript expressions, such as...
  • const a = 2
  • ## Today is {new Date().toLocaleString()}

Automatic Transforms

For some elements, Tina will automatically transform the values:

Bold and italic marks

From __Hello__ to **Hello**.

Line items

From - Item 1 to Item 1.

Deeply-nested blockquotes and code blocks

From * > My blockquote to * My blockquote.