Coda Pack Markup Examples

Explore

Markup Examples in Coda Packs
Markup Examples in Coda Packs

Examples of how HTML and Markdown content are rendered in Coda Packs.

Examples of how HTML and Markdown content are rendered in Coda Packs.

Eric Koleda

Markdown Examples

HTML Examples

Read more about

Markdown⁠

and

HTML⁠

value hints in the Coda Pack SDK documentation.

Last rendered:

9/25/2023

⁠

Type

Style

Type

Variant

Source

Rendered

Status

Notes

Bold

Markdown

Stars

**stars**

stars

Open

Markdown

Underscores

__underscores__

underscores

Warning

According to the Markdown spec, surrounding text in double underscores should make it bold, not underlined.

Open

HTML

B tag

<b>b tag</b>

b tag

Open

HTML

STRONG tag

<strong>strong tag</strong>

strong tag

Open

Italics

Markdown

Stars

*stars*

stars

Open

Markdown

Underscores

_underscores_

underscores

Open

HTML

I tag

<i>i tag</i>

i tag

Open

HTML

EM tag

<em>em tag</em>

em tag

Open

Underline

HTML

U tag

<u>foo</u>

foo

Open

Strikethrough

Markdown

Tildas

~~foo~~

foo

Open

HTML

STRIKE Tag

<strike>foo</strike>

foo

Open

Link

Markdown

Basic link

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

⁠

link

⁠

Open

Markdown

Simple link

<http://example.com>

⁠

http://example.com

⁠

Open

Markdown

Link to email

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

⁠

link to email

⁠

Open

Markdown

Simple link to email

<fake@example.com>

⁠

fake@example.com

⁠

Open

HTML

Basic link

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

⁠

link

⁠

Open

HTML

Link to email

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

⁠

link to email

⁠

Open

Image

Markdown

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

⁠

⁠

Open

HTML

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

⁠

⁠

Open

Image with link

Markdown

[![alt](https://picsum.photos/50/50)](http://example.com)

⁠

alt

⁠

Not supported

Coda itself doesn’t support links on images, so it doesn’t work in Markdown either.

Open

HTML

<a href="http://example.com"> <img src="https://picsum.photos/50/50"></a>

⁠

http://example.com

⁠

Not supported

Coda itself doesn’t support links on images, so it doesn’t work in HTML either.

Open

Ordered list

Markdown

1. foo1. bar

foo

bar

Open

HTML

Closed tag

<ol> <li>closed</li> <li>tags</li></ol>

closed

tags

Open

HTML

Unclosed tags

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

unclosed

tags

Open

Unorded list

Markdown

Dashes

- with- dashes

with

dashes

Open

Markdown

Stars

* with* stars

with

stars

Open

HTML

Closed tags

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

closed

tags

Open

HTML

Unclosed tags

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

unclosed

tags

Open

Checkbox list

Markdown

Unchecked

- [] unchecked

unchecked

Open

Markdown

Unchecked with space

- [ ] unchecked with space

unchecked with space

Open

Markdown

Lower case X

- [x] checked lower

checked lower

Open

Markdown

Upper case X

- [X] checked upper

checked upper

Open

Nested lists

Markdown

1. One - Two - Three1. Four

One

Two

Three

Four

Open

HTML

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

One

Two

Three

Four

Open

Auto-linking

Markdown

example.com

⁠

example.com

⁠

Open

Inline code

Markdown

Within text

Use the `foo()` method

Use the foo() method

Open

Markdown

Entire line

`The whole line is code`

The whole line is code

Open

Markdown

Escaping backtick

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

Double backticks to `escape` a backtick

Open

HTML

WIthin text

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

Use the foo() method

Open

HTML

Entire line

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

The whole line is code

Open

Code block

Markdown

Indented

// Indented code foo();

// Indented code

foo();

Open

Markdown

Fenced

```// Fenced codefoo();```

// Fenced code

foo();

Open

HTML

PRE tag

<pre>// In a prefoo();</pre>

// In a pre

foo();

Open

Horizontal rule

Markdown

Dashes

Three

---

Dashes

Three

⁠

Dashes

Open

Markdown

Stars

Three

***

Stars

Three

⁠

Stars

Open

HTML

HR tag

This<hr>That

This

⁠

That

Open

Heading 1

Markdown

Hash

# Single hash

Single hash

Open

Markdown

Equals

Triple equals below===

Triple equals below

===

Open

HTML

H1 tag

<h1>Foo</h1>

Foo

Open

Heading 2

Markdown

Hashes

## Double hash

Double hash

Open

Markdown

Dashes

Triple dash below---

Triple dash below

⁠

Open

HTML

H2 tag

<h2>Foo</h2>

Foo

Open

Heading 3

Markdown

Hashes

### Foo

Foo

Open

HTML

H3 tag

<h3>Foo</h3>

Foo

Open

Heading 4

Markdown

Hashes

#### Foo

Foo

Not supported

Coda doesn’t support headers beyond level 3.

Open

HTML

H4 tag

<h4>Foo</h4>

Foo

Not supported

Coda doesn’t support headers beyond level 3.

Open

Heading 5

Markdown

Hashes

##### Foo

Foo

Not supported

Coda doesn’t support headers beyond level 3.

Open

HTML

H5 tag

<h5>Foo</h5>

Foo

Not supported

Coda doesn’t support headers beyond level 3.

Open

Heading 6

Markdown

Hashes

###### Foo

Foo

Not supported

Coda doesn’t support headers beyond level 3.

Open

HTML

H6 tag

<h6>Foo</h6>

Foo

Not supported

Coda doesn’t support headers beyond level 3.

Open

Paragraphs

Markdown

Blank line

Some text.

More text.

Some text.

More text.

Open

HTML

One line

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

One.

Line.

Open

HTML

Two lines

<p>Two.</p><p>Lines.</p>

Two.

Lines.

Warning

Extra vertical space is added when the paragraphs are on separate lines.

Open

Line breaks

Markdown

Just line break

Line breaksaren't rendered

Line breaks

aren’t rendered

Warning

According to spec, line breaks in the source code shouldn’t be rendered.

Open

Markdown

Two trailing spaces

Use two spaces to create a line break

Use two spaces

to create a line break

Open

HTML

Just line break

Line breaksaren't rendered

Line breaks aren't rendered

Open

HTML

BR tag

Use the br tag <br/> to create a line break

Use the br tag to create a line break

Warning

The whitespace after the line break should be collapsed.

Open

Block quotes

Markdown

Single line

> Quote here

Quote here

Open

Markdown

Multiple lines

> Multiple> Lines

Multiple

Lines

Open

Markdown

Blank line

> Includes>> a blank line

Includes

a blank line

Open

Markdown

Nested

> Nested>> Quotes

Nested

Quotes

Not supported

Coda doesn’t support nested quotes.

Open

HTML

Single line

<blockquote>Quote here</blockquote>

Quote here

Open

HTML

Nested

<blockquote>Nested <blockquote>Quotes</blockquote></blockquote>

Nested

Quotes

Not supported

Coda doesn’t support nested quotes.

Open

Table

Markdown

Table extension

| Col1 | Col2 || ---- | ---- || foo | bar |

| Col1 | Col2 |

| ---- | ---- |

| foo | bar |

Not supported

Coda doesn’t support simple tables.

Open

HTML

TABLE tag

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

foo bar

Not supported

Coda doesn’t support simple tables.

Open

Mixed markup

Markdown

HTML in Markdown

Markdown <i>containing</i> HTML.

Markdown containing HTML.

Not supported

Mixing markup isn’t currently supported.

Open

Escaping markup

Markdown

Backslashes

This \*is\* cool

This *is* cool

Open

HTML

HTML entities

This <is> cool

This <is> cool

Open

Font color

HTML

<span style="color: blue;">blue</span>

blue

Not supported

Colors aren’t currently supported.

Open

Background color

HTML

<span style="background-color: blue;">blue</span>

blue

Not supported

Only the color “yellow” works today, other colors aren’t currently supported.

Open

⁠

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.

Markup Examples in Coda PacksMarkup Examples in Coda Packs

Single hash

Foo

Double hash

Foo

Foo

Foo

Foo

Foo

Foo

Markup Examples in Coda Packs
Markup Examples in Coda Packs