The latest version of Typora already supports normal HTML tags.
Inline HTML tags, such as <span>, <sup> will be rendered right after you input their close tag, just as other Markdown syntax, like ** or __. Other supported tags are rendered in a separate block and can switch between the output and HTML source code easily, just like math blocks.
For security convert, no scripts is supported, no matter you use <script> or onload attributes. class, id, and data-* are also not supported. For iframe, scripts are allowed inside <iframe>, but it will wrapped with sandbox attributes, and would have no access to your writing content nor local files.
You could find more details in following sections.
Table of Contents
<Strong> or ** ?Typora now can render inline HTML just as normal inline Markdown styles, for example:
| Raw Markdown Source | Output in Live Preview |
|---|---|
<span style='color:red'>This is red</span> |
This is red |
<ruby> 漢 <rt> ㄏㄢˋ </rt> </ruby> |
漢 |
<kbd>Ctrl</kbd>+<kbd>F9</kbd> |
Ctrl+F9 |
<span style="font-size:2rem; background:yellow;">**Bigger**</span> |
Bigger |
HTML entities like ® ¶ |
HTML entities like ® ¶ |
The writing experience is also same:
For easier editing purposes, Typora will show empty tags or HTML with display:none styles, for example, related contents in following Markdown will be visible in Typora, but invisible after export.
## <a name="anchor"></a> Header 2
<span style="display:none">I am hidden after export</span>
You could use HTML entities directly in Typora, for example:
¼ → ¼, 𝔗 → 𝔗
But we recommend to input their unicode directly, which is more readable and compatible.
Block level HTML tags, and “invisible” tags (such as script, meta, etc) in Markdown document will be rendered as HTML Block, for example:
<details>
<summary>I have keys but no locks. I have space but no room. You can enter but can't leave. What am I?</summary>
A keyboard.
</details>
Will be rendered as:
HTML Block can enter edit mode by when move cursor inside it, or click it non-interactive parts, or use command/ctrl + click.
Markdown syntax will not be parsed inside HTML blocks, which is the same for GFM/CommonMark.
For easier editing purposes, some inline tags, such as svg may also use the same editing behavior of those block level HTML tags .
Typora does not show preview for “invisible” tags, such as <script>, <meta> and <style>, but only shows their raw source.
You could embed a video like this:
<video src="xxx.mp4" />
Or drag & drop a video file into Typora, and Typora will insert the video automatically.
The path of Video follows the same rule of images. So, the option “Use relative path as possible”, and “image root path” also applies to <video> content.
Same with <video>, you could use <audio> tag to embed an audio:
<audio src="xxx.mp3" />
Some websites allow you to embed their contents into other webpages, most of them support <iframe>, which is also supported by Typora. You could just follow their “sharing” page/dialog, and paste their code into Typora, e.g:
<iframe height='265' scrolling='no' title='Fancy Animated SVG Menu' src='//codepen.io/jeangontijo/embed/OxVywj/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/jeangontijo/pen/OxVywj/'>Fancy Animated SVG Menu</a> by Jean Gontijo (<a href='https://codepen.io/jeangontijo'>@jeangontijo</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
which will become
Some websites only provide Javascript-based embed code, instead of an <iframe> snips, for example:
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Sunsets don't get much better than this one over <a href="https://twitter.com/GrandTetonNPS?ref_src=twsrc%5Etfw">@GrandTetonNPS</a>. <a href="https://twitter.com/hashtag/nature?src=hash&ref_src=twsrc%5Etfw">#nature</a> <a href="https://twitter.com/hashtag/sunset?src=hash&ref_src=twsrc%5Etfw">#sunset</a> <a href="http://t.co/YuKy2rcjyU">pic.twitter.com/YuKy2rcjyU</a></p>— US Department of the Interior (@Interior) <a href="https://twitter.com/Interior/status/463440424141459456?ref_src=twsrc%5Etfw">May 5, 2014</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Typora only supports some script-based sharing code, and those contents/scripts will also be running in a sandbox iframe with no access to your local file and writing contents.
We could consider allowing users to config the “whitelist” for this kind in future updates.
No longer supported, you may try online file viewers instead, such as examples in https://gist.github.com/tzmartin/1cf85dc3d975f94cfddc04bc0dd399be.
Typora supports HTML comments, using syntax <!-- comments --> , e.g:
<!-- I am some comments
not end, not end...
here the comment ends -->
They are invisible when export/print.
<Strong> or ** ?Please use markdown syntax instead of original HTML tags, since the latter one are easier to input, and also better supported by Typora.
<application>, <my-custom-component> will be ignored (They will be included when export/print).id, class, data-* and unknown attributes in HTML will not be included when rendering (They will be included when export/print).<style> and <meta> won’t be applied either (They will be included when export/print).