The latest version of Typora already supports normal HTML tags.
Inline HTML tags, such as
<sup> will be rendered right after you input their close tag, just as other Markdown syntax, like
__. 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
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 found more details in following sections.
Table of Contents
Typora now can render inline HTML just as normal inline Markdown styles, for example:
|Raw Markdown Source||Output in Live Preview|
||This is red|
||漢 ㄏㄢˋ 漢|
||HTML entities like ® ¶|
The writing experience is also same:
For easier editing purpose, 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
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
ctrl + click.
Markdown syntax will not be parsed inside HTML blocks, which is same for GFM/CommonMark.
For easier editing purpose, some inline tag, 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
<style>, but only show 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>, 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 supports
<iframe>, which is also supported by Typora. Could you 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
<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 allow users to config the “whitelist” for this kind in future updates.
Currently only macOS version supports embed PDF documents:
<iframe src="https://pdfobject.com/pdf/sample-3pp.pdf" style="height=800px;" />
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.
Please use markdown syntax instead of their original HTML tags, since the later one are easier to input, and also be better supported by Typora.
<my-custom-component>will be ignored (They will be included when export/print).
data-*and unknown attributes in HTML will not be included when rendering (They will be included when export/print).
<meta>won’t be applied either (They will be included when export/print).