Skip to content
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
text
9
10
blockquote
pull quote
code block<blockquote style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>blockquote</span></blockquote><div style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>pull quote</span></div><pre style="text-align: left; margin-top: 0.5em; margin-bottom: 0.5em;"><span>code block</span></pre>
11
<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
<div><table border="1" style="border-collapse: collapse; border-color: transparent;" data-coda-grid-id="grid-NWbfaT9tSp" data-coda-display-column-id="c-lmKKFXr6fT" data-coda-view-config-inheritsdefaultformat="false"><caption style="text-align: left;"><h2>Example table</h2></caption><thead><tr><th style="width: 150px; text-align: left; border-bottom: 1px solid #e0e0e0;" data-coda-column-id="c-lmKKFXr6fT" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false">Column 1</th><th style="width: 150px; text-align: left; border-bottom: 1px solid #e0e0e0;" data-coda-column-id="c-c6EQH2rSw0" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false">Column 2</th><th style="width: 150px; text-align: left; border-bottom: 1px solid #e0e0e0;" data-coda-column-id="c-8ABxmS7TUX" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false">Column 3</th></tr></thead><tbody><tr><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">A</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">B</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">C</td></tr><tr><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">D</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">E</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">F</td></tr><tr><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">G</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">H</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">I</td></tr></tbody></table></div>
14
Timeline
Open
<div><table border="1" style="border-collapse: collapse; border-color: transparent;" data-coda-grid-id="grid-IPh3uQp2vV" data-coda-display-column-id="c-oEQ_6gfqag" data-coda-view-config-chartlayoutmodelastseen=""gantt_chart"" data-coda-view-config-ganttchartcolumntypes=""START_AND_DURATION"" data-coda-view-config-ganttchartdurationcolumnid=""c-gFyj69ztQ2"" data-coda-view-config-ganttchartlabelwidth="220" data-coda-view-config-ganttchartpeoplecolumnid=""c-AAyxOOgsC0"" data-coda-view-config-ganttchartstartcolumnid=""c-2MczCkCtsW"" data-coda-view-config-ganttcharttimezone=""DOC_TIMEZONE"" data-coda-view-config-ganttchartwidthmode=""ExactSize"" data-coda-view-config-inheritsdefaultformat="true" data-coda-view-config-layoutmode=""gantt_chart""><caption style="text-align: left;"><h2>Sample timeline</h2></caption><thead><tr><th style="width: 140px; text-align: left; border-bottom: 1px solid #e0e0e0;" data-coda-column-id="c-oEQ_6gfqag" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false">Title</th><th style="width: 140px; text-align: left; border-bottom: 1px solid #e0e0e0;" data-coda-column-id="c-2MczCkCtsW" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false" data-coda-column-format="{"type":"dp"}">Start</th><th style="width: 140px; text-align: left; border-bottom: 1px solid #e0e0e0;" data-coda-column-id="c-gFyj69ztQ2" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false" data-coda-column-format="{"type":"dur"}">Duration</th><th style="width: 150px; text-align: left; border-bottom: 1px solid #e0e0e0;" data-coda-column-id="c-XO5qn641kD" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false">Description</th><th style="width: 150px; text-align: left; border-bottom: 1px solid #e0e0e0;" data-coda-column-id="c-AAyxOOgsC0" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false">Person</th></tr></thead><tbody><tr><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">Task 1</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">11/3/2022</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">5 days</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;"></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;"></td></tr><tr><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">Task 2</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">11/8/2022</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">5 days</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;"></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;"></td></tr><tr><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">Task 3</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">11/13/2022</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">5 days</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;"></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;"></td></tr></tbody></table></div><div><table border="1" style="border-collapse: collapse; border-color: transparent;" data-coda-grid-id="grid-IPh3uQp2vV" data-coda-display-column-id="c-oEQ_6gfqag" data-coda-view-config-inheritsdefaultformat="false"><caption style="text-align: left;"><h2>Table</h2></caption><thead><tr><th style="width: 140px; text-align: left; border-bottom: 1px solid #e0e0e0;" data-coda-column-id="c-oEQ_6gfqag" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false">Title</th><th style="width: 140px; text-align: left; border-bottom: 1px solid #e0e0e0;" data-coda-column-id="c-2MczCkCtsW" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false" data-coda-column-format="{"type":"dp"}">Start</th><th style="width: 140px; text-align: left; border-bottom: 1px solid #e0e0e0;" data-coda-column-id="c-gFyj69ztQ2" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false" data-coda-column-format="{"type":"dur"}">Duration</th><th style="width: 150px; text-align: left; border-bottom: 1px solid #e0e0e0;" data-coda-column-id="c-XO5qn641kD" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false">Description</th><th style="width: 150px; text-align: left; border-bottom: 1px solid #e0e0e0;" data-coda-column-id="c-AAyxOOgsC0" data-coda-column-overflow-style="wrap" data-coda-column-show-empty-groups="false">Person</th></tr></thead><tbody><tr><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">Task 1</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">11/3/2022</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">5 days</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;"></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;"></td></tr><tr><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">Task 2</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">11/8/2022</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">5 days</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;"></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;"></td></tr><tr><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">Task 3</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">11/13/2022</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;">5 days</td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;"></td><td style="border-top:none;border-right:none;border-bottom:1px solid #e0e0e0;border-left:none;vertical-align:top;"></td></tr></tbody></table></div>
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.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.