HTML Support in Typora

August 18, 2018
by
typora.io

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.

HTML Entities

But we recommend to input their unicode directly, which is more readable and compatible.

HTML Block

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:

I have keys but no locks. I have space but no room. You can enter but can't leave. What am I?
A keyboard.

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.

Media and Embedded Contents

Video

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.

Audio

Same with <video>, you could use <audio> tag to embed an audio:

<audiosrc="xxx.mp3"/>

Embed Web Contents

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:

Comments

<Strong> or ** ?

Please use markdown syntax instead of original HTML tags, since the later one are easier to input, and also better supported by Typora.

Limitations

In HTML Block, no empty line is not allowed, or it will be rendered as two HTML Blocks.

Only common/normal HTML tags will be rendered as HTML contents in Typora, custom tags, like <application>, <my-custom-component> will be ignored (They will be included when export/print).

Not all attributes are supported. id, class, data-* and unknown attributes in HTML will not be included when rendering (They will be included when export/print).

Scripts are basically not allowed. <style> and <meta> won’t be applied either (They will be included when export/print).

Not all HTML tags/styles can be exported to other formats. Export to PDF, HTML or HTML-compatible formats (such as EPub) would keep those HTML contents, but export to other formats, such as Word or LaTeX, those HTML contents may become plain text.