Skip to content
Gallery
Coda Pack Markup Examples
Markup Examples in Coda Packs
Share
Explore
Rendering results

icon picker
HTML Examples

Bold
B tag
Source
<b>b tag</b>
Rendered
b tag
STRONG tag
Source
<strong>strong tag</strong>
Rendered
strong tag
Italics
I tag
Source
<i>i tag</i>
Rendered
i tag
EM tag
Source
<em>em tag</em>
Rendered
em tag
Underline
U tag
Source
<u>foo</u>
Rendered
foo
Strikethrough
STRIKE Tag
Source
<strike>foo</strike>
Rendered
foo
Link
Basic link
Source
<a href="http://example.com">
link
</a>
Rendered
⁠
link
⁠
⁠
Link to email
Source
<a href="mailto:fake@example.com">
link to email
<a>
Rendered
⁠
link to email
⁠
⁠
Image
Basic image
Source
<img src="https://picsum.photos/50/50"
alt="alt" title="Title">
Rendered
⁠
alt
⁠
⁠
Image with link
Status
Source
<a href="http://example.com">
<img src="https://picsum.photos/50/50">
</a>
Rendered
⁠
http://example.com
⁠
⁠
Notes
Coda itself doesn’t support links on images, so it doesn’t work in HTML either.
Ordered list
Closed tag
Source
<ol>
<li>closed</li>
<li>tags</li>
</ol>
Rendered
closed
tags
Unclosed tags
Source
<ol>
<li>unclosed
<li>tags
</ol>
Rendered
unclosed
tags
Unorded list
Closed tags
Source
<ul>
<li>closed</li>
<li>tags</li>
</ul>
Rendered
closed
tags
Unclosed tags
Source
<ul>
<li>unclosed
<li>tags
</ul>
Rendered
unclosed
tags
Nested lists
Nested list
Source
<ol>
<li>One
<ul>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Four</li>
</ol>
Rendered
One
Two
Three
Inline code
WIthin text
Source
Use the <code>foo()</code> method
Rendered
Use the foo() method
Entire line
Source
<code>The whole line is code</code>
Rendered
The whole line is code
Code block
PRE tag
Source
<pre>// In a pre
foo();</pre>
Rendered
// In a pre

foo();
Horizontal rule
HR tag
Source
This
<hr>
That
Rendered
This
⁠
That
Heading 1
H1 tag
Source
<h1>Foo</h1>
Rendered

Foo

Heading 2
H2 tag
Source
<h2>Foo</h2>
Rendered

Foo

Heading 3
H3 tag
Source
<h3>Foo</h3>
Rendered

Foo

Heading 4
H4 tag
Status
Source
<h4>Foo</h4>
Rendered

Foo

Notes
Coda doesn’t support headers beyond level 3.
Heading 5
H5 tag
Status
Source
<h5>Foo</h5>
Rendered

Foo

Notes
Coda doesn’t support headers beyond level 3.
Heading 6
H6 tag
Status
Source
<h6>Foo</h6>
Rendered

Foo

Notes
Coda doesn’t support headers beyond level 3.
Paragraphs
One line
Source
<p>One.</p><p>Line.</p>
Rendered
One.
Line.
Two lines
Status
Source
<p>Two.</p>
<p>Lines.</p>
Rendered
Two.
Lines.
Notes
Extra vertical space is added when the paragraphs are on separate lines.

Line breaks
Just line break
Source
Line breaks
aren't rendered
Rendered
Line breaks aren't rendered
BR tag
Status
Source
Use the br tag <br/> to create a line break
Rendered
Use the br tag to create a line break
Notes
The whitespace after the line break should be collapsed.
Block quotes
Single line
Source
<blockquote>Quote here</blockquote>
Rendered
Quote here
Nested
Status
Source
<blockquote>Nested
<blockquote>Quotes</blockquote>
</blockquote>
Rendered
Nested
Quotes
Notes
Coda doesn’t support nested quotes.
Table
TABLE tag
Status
Source
<table>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</table>
Rendered
foo bar

Notes
Coda doesn’t support simple tables.

Escaping markup
HTML entities
Source
This &lt;is&gt; cool
Rendered
This <is> cool
Colors
Font color
Status
Source
<span style="color: blue;">blue</span>
Rendered
blue
Notes
Colors aren’t currently supported.
Background color
Status
Source
<span style="background-color: blue;">blue</span>
Rendered
blue
Notes
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.