The latest version of Typora already supports normal HTML tags.
Inline HTML tags, such as <span>
and <sup>
, will be rendered immediately after you input their closing tag. This is the same as other Markdown syntax, such as **
or __
. Other supported tags are rendered in a separate block and you can switch between the output and HTML source code easily, just like math blocks.
For security purposes, no scripts are supported, no matter if you use <script>
or onload
attributes. class
, id
, and data-*
are also not supported. Scripts are allowed inside an <iframe>
but it will wrapped with sandbox
attributes and would have no access to your writing content nor local files.
You can find more details in the following sections.
Table of Contents
<Strong>
or **
?Typora can render inline HTML the same 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 the same:
For easier editing purposes, Typora will show empty tags or HTML with display:none
styles. For example, related content in the following Markdown will be visible in Typora but invisible after exporting.
## <a name="anchor"></a> Header 2
<span style="display:none">I am hidden after export</span>
You can 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 a Markdown document will be rendered as an 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:
An HTML Block can enter edit mode by moving the cursor inside it, by clicking it in a non-interactive part or by using 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 a preview for “invisible” tags, such as <script>
, <meta>
and <style>
, but only shows their raw source.
You can 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 as for images. So, the option “Use relative path as possible” and “image root path” also applies to <video>
content.
As with with <video>
, you can use the <audio>
tag to embed an audio file:
<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 can 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 a Javascript-based embed code, instead of an <iframe>
snippet, 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 this content and/or scripts will also be running in a sandbox iframe with no access to your local files and writing content.
We could consider allowing users to configure 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 exporting/printing.
<Strong>
or **
?Please use Markdown syntax instead of original HTML tags, since Markdown is easier to input and also better supported by Typora.
<application>
, <my-custom-component>
will be ignored (They will be included when exporting/printing).id
, class
, data-*
and unknown attributes in HTML will not be included when rendering (They will be included when exporting/printing).<style>
and <meta>
won’t be applied either (They will be included when exporting/printing).