Typora 中的 HTML 支持 #

最新版本的 Typora 已经支持普通的 HTML 标签。

内联 HTML 标签，如 <span>, <sup> 将在你输入它们的关闭标签后立即渲染，就像其他 Markdown 语法一样，如 ** 或 __。其他支持的标签会在一个单独的块中渲染，并且可以在输出和 HTML 源代码之间轻松切换，就像数学块一样。

为了安全起见，不支持任何脚本，无论你使用 <script> 或 onload 属性。class, id, 和 data-* 也不被支持。对于 iframe，在 <iframe>，脚本是允许的，但它会被 sandbox 属性包裹，并且不能访问你的写作内容或本地文件。

Inline HTML #

例如，Typora 现在可以像正常的内联 Markdown 样式一样渲染内联 HTML。

<span style='color:red'>这是红色的</span>

<ruby>汉<rt>ㄏㄢˋ</rt> </ruby>

<kbd>Ctrl</kbd>+<kbd>F9</kbd>

<span style="font-size:2rem; background:yellow;">** 更大的 **</span>

HTML 实体，如 ® ¶。

为了方便编辑，Typora 会显示空标签或带有 display:none 样式的 HTML，例如，以下 Markdown 中的相关内容在 Typora 中是可见的，但在导出后是不可见的。

## <a name="anchor"></a> Header 2

<span style="display:none">I am hidden after export</span>

HTML 实体 #

例如，你可以在 Typora 中直接使用 HTML entities (opens new window) 。

&frac14; → ¼, →𝔗 &#x1D517;

但我们建议直接输入它们的 unicode，这样更容易阅读和兼容。

HTML 块 #

例如，Markdown 文档中的块级 HTML 标签和 "看不见的 "标签（如 script, meta, 等）将被渲染为 HTML 块。

<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>

将被表述为。

我有钥匙但没有锁。我有空间，但没有房间。你可以进入但不能离开。我是什么？

当光标在其内部移动时，HTML 块可以进入编辑模式，或点击其非交互式部分，或使用 command/ ctrl + 点击。

Markdown 语法不会在 HTML 块内被解析，这对 GFM/CommonMark 也是如此。

为了方便编辑，一些内联标签，如 svg，也可以使用那些块级 HTML 标签的相同编辑行为。

Typora 不显示 "不可见 "标签的预览，如 <script>, <meta> 和 <style>，但只显示其原始来源。

媒体和嵌入式内容 #

视频 #

你可以像这样嵌入一个视频。

<video src="xxx.mp4" />

或者将视频文件拖放到 Typora 中，Typora 会自动插入视频。

Video 的路径遵循图像的相同规则。因此，选项 "尽可能使用相对路径"，以及 "图像根路径 "也适用于 <video> 内容。

音频 #

与 <video> 相同，你可以使用 <audio> 标签来嵌入一个音频。

<audio src="xxx.mp3" />

嵌入网络内容 #

有些网站允许你把他们的内容嵌入到其他网页中，其中大多数网站支持 <iframe>，Typora 也支持这种方式。你只需按照他们的 "分享 "页面/对话框，将他们的代码粘贴到 Typora 中，例如。

<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>

例如，有些网站只提供基于 Javascript 的嵌入代码，而不是一个 <iframe> snips。

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Sunsets don&#39;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&amp;ref_src=twsrc%5Etfw">#nature</a> <a href="https://twitter.com/hashtag/sunset?src=hash&amp;ref_src=twsrc%5Etfw">#sunset</a> <a href="http://t.co/YuKy2rcjyU">pic.twitter.com/YuKy2rcjyU</a></p>&mdash; 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 只支持一些基于脚本的共享代码，这些内容/脚本也将在一个沙盒 iframe 中运行，无法访问你的本地文件和写入内容。

我们可以考虑在未来的更新中允许用户为这种类型配置"_ 白名单"。

PDF #

不再支持，你可以尝试用在线文件查看器代替，比如在 "我 "的例子。https://gist.github.com/tzmartin/1cf85dc3d975f94cfddc04bc0dd399be.

评论 #

Typora 支持 HTML 注释，使用语法 <!-- comments -->，例如。

<!-- I am some comments
not end, not end...
here the comment ends -->

输出/打印时，它们是不可见的。

<Strong> 或? ** #

请使用 markdown 语法而不是原始的 HTML 标签，因为后者更容易输入，而且 Typora 也更支持。

限制条件 #

  • 在 HTML 块中，不允许有空行，否则会被渲染成两个 HTML 块。
  • 在 Typora 中，只有普通/正常的 HTML 标签会被渲染为 HTML 内容，自定义标签，如 <application>, <my-custom-component>，将被忽略（它们将在导出/打印时被包括在内）。
  • 不是所有的属性都被支持。id, class, data-* 和 HTML 中的未知属性在渲染时将不被包括（它们在导出/打印时将被包括）。
  • 脚本基本上是不允许的。<style> 和 <meta> 也不会被应用（导出/打印时将包括它们）。
  • 不是所有的 HTML 标签/样式都可以导出到其他格式。导出到 PDF、HTML 或与 HTML 兼容的格式（如 EPub）会保留那些 HTML 内容，但导出到其他格式，如 Word 或 LaTeX，那些 HTML 内容可能变成纯文本。

插入图片