Markup Examples in Coda Packs

icon picker
Rendering results

Rendering Examples
Search
Style
Format
Variant
Source
Rendered
Status
Notes
Bold
Stars
**stars**
stars

Underscores
__underscores__
underscores
According to the Markdown spec, surrounding text in double underscores should make it bold, not underlined.
B tag
<b>b tag</b>
b tag

STRONG tag
<strong>strong tag</strong>
strong tag

Italics
Stars
*stars*
stars

Underscores
_underscores_
underscores

I tag
<i>i tag</i>
i tag

EM tag
<em>em tag</em>
em tag

Underline
U tag
<u>foo</u>
foo

Strikethrough
Tildas
~~foo~~
foo

STRIKE Tag
<strike>foo</strike>
foo

Link
Basic link
[link](http://example.com)

Simple link
<http://example.com>

Link to email
[link to email](fake@example.com)

Simple link to email
<fake@example.com>

Auto-linking
example.com

Basic link
<a href="http://example.com">
link
</a>

Link to email
<a href="mailto:fake@example.com">
link to email
<a>

Image
Basic image
![alt](https://picsum.photos/50/50 "Title")
alt

Basic image
<img src="https://picsum.photos/50/50"
alt="alt" title="Title">
alt

Image with link
[![alt](https://picsum.photos/50/50)](http://example.com)
Coda itself doesn’t support links on images, so it doesn’t work in Markdown either.
Image with link
<a href="http://example.com">
<img src="https://picsum.photos/50/50">
</a>
Coda itself doesn’t support links on images, so it doesn’t work in HTML either.
Ordered list
1. foo
1. bar
foo
bar

Closed tag
<ol>
<li>closed</li>
<li>tags</li>
</ol>
closed
tags

Unclosed tags
<ol>
<li>unclosed
<li>tags
</ol>
unclosed
tags

Unorded list
Dashes
- with
- dashes
with
dashes

Stars
* with
* stars
with
stars

Closed tags
<ul>
<li>closed</li>
<li>tags</li>
</ul>
closed
tags

Unclosed tags
<ul>
<li>unclosed
<li>tags
</ul>
unclosed
tags

Checkbox list
Unchecked
- [] unchecked
unchecked

Unchecked with space
- [ ] unchecked with space
unchecked with space

Lower case X
- [x] checked lower
checked lower

Upper case X
- [X] checked upper
checked upper

Nested lists
Nested list
1. One
- Two
- Three
1. Four
One
Two
Three
Four

Nested list
<ol>
<li>One
<ul>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Four</li>
</ol>
One
Two
Three
Four

Inline code
Within text
Use the `foo()` method
Use the foo() method

Entire line
`The whole line is code`
The whole line is code

Escaping backtick
``Double backticks to `escape` a backtick``
Double backticks to `escape` a backtick

WIthin text
Use the <code>foo()</code> method
Use the foo() method

Entire line
<code>The whole line is code</code>
The whole line is code

Code block
Indented
// Indented code
foo();
// Indented code

foo();

Fenced
```
// Fenced code
foo();
```

// Fenced code

foo();


PRE tag
<pre>// In a pre
foo();</pre>
// In a pre

foo();

Horizontal rule
Dashes
Three

---

Dashes
Three
Dashes

Stars
Three

***

Stars
Three
Stars

HR tag
This
<hr>
That
This
That

Heading 1
Hash
# Single hash

Single hash


Equals
Triple equals below
===
Triple equals below
===

H1 tag
<h1>Foo</h1>

Foo


Heading 2
Hashes
## Double hash

Double hash


Dashes
Triple dash below
---
Triple dash below

H2 tag
<h2>Foo</h2>

Foo


Heading 3
Hashes
### Foo

Foo


H3 tag
<h3>Foo</h3>

Foo


Heading 4
Hashes
#### Foo
Foo
Coda doesn’t support headers beyond level 3.
H4 tag
<h4>Foo</h4>

Foo

Coda doesn’t support headers beyond level 3.
Heading 5
Hashes
##### Foo
Foo
Coda doesn’t support headers beyond level 3.
H5 tag
<h5>Foo</h5>

Foo

Coda doesn’t support headers beyond level 3.
Heading 6
Hashes
###### Foo
Foo
Coda doesn’t support headers beyond level 3.
H6 tag
<h6>Foo</h6>

Foo

Coda doesn’t support headers beyond level 3.
Paragraphs
Blank line
Some text.

More text.
Some text.
More text.

One line
<p>One.</p><p>Line.</p>
One.
Line.

Two lines
<p>Two.</p>
<p>Lines.</p>
Two.
Lines.
Extra vertical space is added when the paragraphs are on separate lines.

Line breaks
Just line break
Line breaks
aren't rendered
Line breaks
aren’t rendered
According to spec, line breaks in the source code shouldn’t be rendered.
Two trailing spaces
Use two spaces
to create a line break
Use two spaces
to create a line break

Just line break
Line breaks
aren't rendered
Line breaks aren't rendered

BR tag
Use the br tag <br/> to create a line break
Use the br tag to create a line break
The whitespace after the line break should be collapsed.
Block quotes
Single line
> Quote here
Quote here

Multiple lines
> Multiple
> Lines
Multiple
Lines

Blank line
> Includes
>
> a blank line
Includes
a blank line
The blank line isn’t preserved.
Nested
> Nested
>> Quotes
Nested
Quotes
Coda doesn’t support nested quotes.
Single line
<blockquote>Quote here</blockquote>
Quote here

Nested
<blockquote>Nested
<blockquote>Quotes</blockquote>
</blockquote>
Nested
Quotes
Coda doesn’t support nested quotes.
Table
Table extension
| Col1 | Col2 |
| ---- | ---- |
| foo | bar |
| Col1 | Col2 |
| ---- | ---- |
| foo | bar |
Coda doesn’t support simple tables.

TABLE tag
<table>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</table>
foo bar

Coda doesn’t support simple tables.

Mixed markup
HTML in Markdown
Markdown <i>containing</i> HTML.
Markdown containing HTML.
HTML tags in markdown are stripped.

Escaping markup
Backslashes
This \*is\* cool
This *is* cool

HTML entities
This &lt;is&gt; cool
This <is> cool

Colors
Font color
<span style="color: blue;">blue</span>
blue
Colors aren’t currently supported.
Background color
<span style="background-color: blue;">blue</span>
blue
Only the color “yellow” works today, other colors aren’t currently supported.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.