Typora中的HTML支持

2025-01-06 432
Typora

类型:Markdown编辑器

简介:跨平台Markdown编辑器,所见即所得,支持Latex公式。

在最新版本的 Typora 中,已经加强了对普通 HTML 标签的支持。你现在可以在 Markdown 中轻松地使用 HTML 标签,效果与传统的 Markdown 语法一样直观。无论是内联的 HTML 标签,还是块级 HTML 标签,Typora 都能自动渲染并呈现,极大地提升了写作与排版的灵活性。以下是一些详细的介绍,帮助你更好地理解 Typora 对 HTML 的支持以及相关的使用限制。

一、内联HTML

Typora 现在允许在 Markdown 中使用内联 HTML 标签,并且它们会立即被呈现。例如:

Typora中的HTML支持

写作体验也是一样:

Typora中的HTML支持

还可以在 Markdown 中使用 HTML 实体,如:

## <a name="anchor"></a> Header 2
<span style="display:none">I am hidden after export</span>

Typora 会实时渲染这些内联 HTML 标签,使写作体验更为直观和便捷。为了提高可读性,建议直接使用 Unicode 字符,而不是 HTML 实体。

二、HTML实体

你可以直接在 Typora 中使用 HTML 实体,如 &lt;(小于号)和 &gt;(大于号),Typora 会自动将它们渲染为相应的符号。使用 HTML 实体时,务必确保格式正确,或者你可以直接输入 Unicode 字符以便于编辑和阅读。

三、HTML块

Typora 同样支持块级 HTML 标签。这些标签将呈现为独立的块,通常用于包裹更复杂的结构,如 <details> 和 <blockquote>。例如:

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

这段代码会呈现为:

我有钥匙但没有锁。我有空间,但没有空间。可以进入但不能离开。我是什么?

此外,Typora 也会支持像 <meta>、<script>、<style> 等标签,尽管它们的呈现方式不同:它们会显示为原始代码,而非渲染结果。

注意:在 HTML 块中,Markdown 语法将不会被解析,确保块内的 HTML 内容正确嵌套。

四、媒体和嵌入内容

Typora 允许你直接嵌入媒体内容,如视频和音频文件。你可以使用 <video> 和 <audio> 标签,或直接拖放文件到 Typora 中,自动插入相应的代码。示例:

  • 视频:<video src=”xxx.mp4″ />
  • 音频:<audio src=”xxx.mp3″ />

这些媒体文件遵循与图像相同的路径规则,因此你可以使用相对路径和指定图像根路径等选项。

五、嵌入Web内容

一些网站允许通过 <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%;'></iframe>

Typora中的HTML支持

在 Typora 中嵌入此类内容后,它将呈现为一个可交互的嵌入式元素。

一些网站(例如 Twitter)提供了基于 JavaScript 的嵌入代码,Typora 也支持这种嵌入方式,不过请注意,所有嵌入的脚本都将在沙盒环境中运行,因此无法访问本地文件和写入内容。

六、注释

Typora 同样支持使用 HTML 注释。你可以使用以下语法插入注释,注释内容在导出或打印时不可见:

<!-- This is a comment -->

七、 样式和局限性

虽然 Typora 支持大部分标准的 HTML 标签,但也存在一些限制:

1、空行问题:在 HTML 块中,插入空行会导致其被渲染为多个块。确保在 HTML 标签间没有多余的空行。

2、不支持的标签和属性:Typora 不支持某些 HTML 标签(如 <application>)和自定义标签(如 <my-custom-component>)。这些标签会在导出时作为原始代码保留,但不会渲染。

3、脚本限制:对于 <script>、<meta>、<style> 等标签,Typora 不会执行或应用其中的内容。这些标签的内容会在导出时保留,但不会影响页面渲染。

4、导出格式差异:Typora 支持将文档导出为多种格式,但并非所有 HTML 内容都能完美导出。例如,在导出为 Word 或 LaTeX 格式时,HTML 内容可能会变成纯文本,而不是作为可渲染的元素保留。

  • 广告合作

  • QQ群号:4114653

温馨提示:
1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。邮箱:2942802716#qq.com(#改为@)。 2、本站原创内容未经允许不得转裁,转载请注明出处“站长百科”和原文地址。