Skip to content
Gallery
ToHtml pack examples
ToHtml pack examples
Issues
More
Share
Explore

ToHtml pack examples

Nuutti Kotivuori
This pack has a single formula, `ToHtml()`, that takes in the input value as HTML, and returns it as string. The HTML contents are generated natively by Coda, and this pack makes no modification to it, it just passes the value onwards as is.
Text outputs
Coda
HTML
1
abc
abc
2
abc
<div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>a</span><span style="font-weight: bold;">b</span><span>c</span></div>
3
normal underline bold italic strikethrough inline code normal
<div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>normal </span><span style="text-decoration: underline;">underline</span><span> </span><span style="font-weight: bold;">bold</span><span> </span><span style="font-style: italic;">italic</span><span> </span><span style="text-decoration: line-through;">strikethrough</span><span> </span><span style="font-family: monospace;">inline code</span><span> normal</span></div>
4
normal red bgred
<div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>normal </span><span style="color: rgb(169, 30, 30);">red</span><span> </span><span style="background-color: rgb(255, 220, 220);">bgred</span></div>
5
text linebreak text
paragraph 1
paragraph 2
<div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>text</span><br><span>linebreak</span><br><span>text</span></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>paragraph 1</span></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>paragraph 2</span></div>
6
left
middle
right
indent 1
indent 2
no indent
<div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>left</span></div><div style="text-align: center; margin-top: 0.5em; margin-bottom: 0.5em;"><span>middle</span></div><div style="text-align: right; margin-top: 0.5em; margin-bottom: 0.5em;"><span>right</span></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>indent 1</span></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>indent 2</span></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>no indent</span></div>
7

h1

h2

h3

text
<h1 style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>h1</span></h1><h2 style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>h2</span></h2><h3 style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>h3</span></h3><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>text</span></div>
8
bullet list 1
bullet list 2
nested 1
nested 2
bullet list 3
text
numbered list 1
numbered list 2
nested a
nested b
numbered list 3
​
9
checklist checked
checklist unchecked
checklist indented
​
10
blockquote
pull quote
code block
​
11
⁠
Link to google
⁠
⁠
<div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span style="display: inline-block;"><a href="https://google.com/">Link to google</a></span></div>
There are no rows in this table
⁠
Canvas outputs
Name
Coda
Html
1
Callouts
Open
<h3 style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Callout</span></h3><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Callout text</span></div><h3 style="text-align: left; margin-top: 1em; margin-bottom: 0.5em;"><span>Info callout</span></h3><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Callout text</span></div><h3 style="text-align: left; margin-top: 1em; margin-bottom: 0.5em;"><span>Tip callout</span></h3><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Callout text</span></div><h3 style="text-align: left; margin-top: 1em; margin-bottom: 0.5em;"><span>Alert callout</span></h3><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Callout text</span></div><h3 style="text-align: left; margin-top: 1em; margin-bottom: 0.5em;"><span>Critical callout</span></h3><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Callout text</span></div>
2
Picture
Open
<div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span style="display: inline-block;"><img data-coda-env="prod" data-coda-doc-id="hr00AbhnZv" data-coda-blob-id="bl-WkYCVl9gnz" data-coda-blob-hash="bdf1fec2bc69f194976ae9cc36722db213cf17b7a748c3227f1b677dea21b0ad92c1e3d0067702e9e6bd122ab8ea58de62902de7e6a9e490b29429c8060c33922cf888823a5c8f9511220182f3eb5df7ef5f0d909944468080780a9ca57ef0e547886a0e" data-coda-mime-type="image/jpeg" data-coda-size="2689105" alt="susan-wilkinson-5_vGqL4iuFo-unsplash.jpg" src="https://codahosted.io/docs/hr00AbhnZv/blobs/bl-WkYCVl9gnz/bdf1fec2bc69f194976ae9cc36722db213cf17b7a748c3227f1b677dea21b0ad92c1e3d0067702e9e6bd122ab8ea58de62902de7e6a9e490b29429c8060c33922cf888823a5c8f9511220182f3eb5df7ef5f0d909944468080780a9ca57ef0e547886a0e" height="796" width="530"></span></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>text</span></div>
3
Unsplash
Open
<div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span style="display: inline-block;"><img data-coda-env="prod" data-coda-doc-id="hr00AbhnZv" data-coda-blob-id="bl-cfRke53_Io" data-coda-blob-hash="0f0a348cbeb9599bd42c09e1f56fd8962545b02bf3d762e2b231459ee015f61df85576b597370b26eaa271f0b35402e7bc31e2ee02d3c6f7eec6269ccdb288c601f39386ea82e12a6c25393c85825b05c2b6203c334690090f0ec7e5943fe28757f628fc" data-coda-mime-type="image/jpeg" data-coda-size="168756" alt="blue and orange smoke" src="https://codahosted.io/docs/hr00AbhnZv/blobs/bl-cfRke53_Io/0f0a348cbeb9599bd42c09e1f56fd8962545b02bf3d762e2b231459ee015f61df85576b597370b26eaa271f0b35402e7bc31e2ee02d3c6f7eec6269ccdb288c601f39386ea82e12a6c25393c85825b05c2b6203c334690090f0ec7e5943fe28757f628fc" height="300" width="800"></span></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>text</span></div>
4
Mention
Open
<div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span style="display: inline-block;"><a href="mailto:nuutti.kotivuori@gmail.com">Nuutti Kotivuori</a></span><span> </span></div>
5
Collapsible list
Open
​
6
Separators
Open
<div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Line separator</span></div><hr><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Thick line separator</span></div><hr><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Dashed line separator</span></div><hr><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Dotted line separator</span></div><hr><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Wavy line separator</span></div><hr><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Paragraph line separator</span></div><hr>
7
Columns
Open
<div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Two column 1</span></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Two column 2</span></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Three column 1</span></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Three column 2</span></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Three column 3</span></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Four column 1</span></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Four column 2</span></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Four column 3</span></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>Four column 4</span></div>
8
Formula
Open
<div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span style="display: inline-block;">formula text</span></div>
9
File
Open
<div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span style="display: inline-block;"><img data-coda-env="prod" data-coda-doc-id="hr00AbhnZv" data-coda-blob-id="bl-FQNntFpB9l" data-coda-blob-hash="65431daa5cc78c7237bf8f0123a645e7af8d26a3f8a952548b749b6d298003795d92908c8acf7d777a38dfa3d6b5f67bd404c89860957bed6dd1894886f4f255f82d6357e7f10f49483d3e646bdc097138f76dfb7d8f55969c11527d3a2a936a178fb139" data-coda-mime-type="application/pdf" data-coda-size="3028" alt="" src="https://codahosted.io/docs/hr00AbhnZv/blobs/bl-FQNntFpB9l/65431daa5cc78c7237bf8f0123a645e7af8d26a3f8a952548b749b6d298003795d92908c8acf7d777a38dfa3d6b5f67bd404c89860957bed6dd1894886f4f255f82d6357e7f10f49483d3e646bdc097138f76dfb7d8f55969c11527d3a2a936a178fb139" height="0" width="0"></span></div>
10
Embed
Open
<div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span style="display: inline-block;">https://google.com/</span></div>
11
Youtube
Open
<div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span style="display: inline-block;">https://youtu.be/M4sF0AX71DE</span></div>
12
Button
Open
<div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span style="display: inline-block;">Copy to clipboard</span></div>
13
Table
Open
​
14
Timeline
Open
​
15
Inputs
Open
<div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span style="display: inline-block;"></span></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span style="display: inline-block;"></span></div><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span style="display: inline-block;">0</span></div>
There are no rows in this table
⁠
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.