markdown导出的html代码,02 Markdown 导出 HTML

2023-05-16

Markdown 导出 HTML

1. 前言

Markdown 的源文件以 md 为后缀。Markdown 是 HTML 语法的简化版本,它本身不带有任何样式信息。我们所看到的 Markdown 网页(如:github 里常用的 README.md 文件)、Markdown 编辑器(比如 Typora)预览的效果,其实都是将 Markdown 文档内容首先转换成 HTML 标签,再配以某些默认预定共同渲染而成的。

例如,同样的一段表格代码,在 Typora 和 VS Code 预览中的表现不同:

1fab92a4e14beea0ab95d824bafb3d85.png

为了让 Markdown 的表现形式稳定,我们可将 Markdown 导出成 HTML 文件。

2. 语法详解

2.1 使用 Typora 导出 HTML

Typora 导出 HTML 的操作方式为:

「文件」->「导出」->「HTML」

注意:导出时可以看到 HTML 和 HTML(Without Styles)两个选项,它们的区别是:

导出 HTML 时,会根据 Typora 所选主题(「菜单栏」->「主题」),导出包括扩展在内的所有内容;

导出 HTML(Without Styles)时,生成的 HTML 文件只包含 Markdown 基本语法的转换,不含任何扩展及主题样式。

例如,同样的一段表格代码,导出 HTML 和 HTML(Without Styles)的不同表现:

70da3b1f3b26b2ad807d9969eeb6f028.png

一般情况下,推荐使用「导出 HTML」的方法。

除非需要重新定义样式及扩展,否则不推荐使用「导出 HTML(Without Styles)」的导出方式。

2.2 使用 Pandoc 导出 HTML

如果只有 Markdown 源文件,在不通过 Markdown 编辑器的情况下,还可以使用 Pandoc 将其直接转换成 HTML 文件。

Pandoc 是一种标记语言转换工具,可实现不同标记语言间的格式转换。

Pandoc 的安装方法参见其 Github 项目页。

实例 1:

使用 Pandoc 将 Markdown 转换为 Html。

pandoc in.md -o out.html

实例 2:

转换时增加外部样式文件引用,如:style.css。

pandoc in.md -c style.css out.html

注意:此时输出的是一个目录。

实例 3:

将所有外部文件都嵌入到单个 HTML 文件中,包括嵌入视频、图片等。

pandoc -s --self-contained -c style.css in.md -o out.html

Markdown 有一些扩展语法,比如「Mermaid」,「数学公式」等,要支持此类功能,Pandoc 也需要一些插件的支持,例如:Memaid-Filter 可用于渲染 Mermaid 图像。

3. 小结

Markdown 源文件只规定了显示的内容,并没有定义显示的样式,所以在不同的预览环境下会看到不同的效果。为了使其保持统一,需要将 Markdown 文件转换成 HTML 文件;

常见的 Markdown 编辑器都带有导出成 HTML 的功能,导出后通常含有编辑器自带样式;

利用 Pandoc,我们可以在命令行中直接将 Markdown 文件导出成 HTML 文件。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

markdown导出的html代码,02 Markdown 导出 HTML 的相关文章

  • Safari 6 (iOS 6) 弹性布局不会换行元素

    我需要将两个框放在列中 这在我测试过的其他浏览器中有效 但在 iOS 6 上的 Safari 6 中无效 例子 http jsfiddle net 5FESj 1 http jsfiddle net 5FESj 1 display webk
  • 向下滚动时如何使图像移动?

    这是我想要实现的目标的示例 https www flambette com en https www flambette com en 我尝试过更改图像的 css 属性 但效果不能满足我的需求 我尝试过以下代码 mydocument on
  • 在 Bootstrap 3 中将容器类嵌套在容器流体类中?

    除了填充问题之外 为什么不建议将 container 嵌套在 container fluid 中 如果将子容器填充归零 如下面我的代码所示 则效果与拥有一个容器相同 此外 如今 不同的全宽和固定宽度布局似乎很常见 我知道文档说了什么 LIN
  • 表单提交不起作用

    我有一张桌子 可以打印出所有可用的相机 它使用表单来更改这些设置 问题在于该表单仅更新条目中的最后一个摄像机 换句话说 如果我更改表单并为列表中的最后一个摄像机点击 应用 它将起作用 如果我更改此列表中任何其他摄像机的表单 它会将其更改为与
  • 通过电子邮件发送在 HTML5 画布上创建的图像

    我有一个画布 用户可以通过交互来更改设计 现在 用户完成更改后 可以提交他的设计及其电子邮件 ID 但为了提交设计 我使用以下方法将画布转换为图像http www nihilogic dk labs canvas2image http ww
  • 检测 JavaScript 中的焦点丢失

    我希望能够检测 JavaScript 中任意元素何时失去焦点 因此我可以构建一个类似于 jEdit 的内联编辑工具 我不能依赖 jQuery 来实现这个库 所以我需要一个本机方法来完成它 我查看了 onblur 这似乎是正确的事情 但 MD
  • 如何将外部 div 的高度设置为始终等于特定内部 div 的高度?

    我有一个外部 div 其中包含三个内部 div 我希望最左边的内部 div 始终确定外部 div 的高度 如果其他内部 div 的内容 比最左边的 div 少 它们将有空白空间 如果他们有更多的内容 比最左边的div 他们将得到一个滚动条
  • `Uncaught TypeError: Cannot read property 'postMessage' of undefined ` 使用 EasyXDM 发送跨域消息时出现错误

    我正在尝试在客户端的两个网站之间建立一个数据交换系统 我为此使用 EasyXDM http easyxdm net http easyxdm net 这是我的父网站代码
  • CSS - 设置 Div 的大小以填充剩余空间

    我是 CSS 新手 我正在尝试创建模板的准系统结构 我有一个用于页眉 主要内容和页脚的 div 我的页脚和页眉很好 但我需要主要内容 div 来 填充 页眉和页脚之间的剩余空间 我尝试将 padding bottom 属性设置为与页脚相同的
  • 与 contenteditable 相关的用户事件

    I am a beginner in Javascript HTML5 假设我有一个 contenteditable div 我的 HTML5 窗口中的 block level 元素 是什么详尽的用户可以通过用户交互修改此元素 或某些子元素
  • 使用 Javascript 在标签中的内容之前附加元素

    我将用一个例子来说明 我需要用javascript转换以下html a Text 1 a a Text 2 a a Text 3 a to code a a
  • python中的编码检测库[重复]

    这个问题在这里已经有答案了 这在某种程度上与我的问题有关here https stackoverflow com questions 2305997 unicodedecodeerror problem with mechanize 我处理
  • 粘性页脚不粘在 AngularJS 中

    Im working an angular site and im trying to implement a sticky footer across all views but the footer stops sticking whe
  • 如何在图像上叠加徽标?使用CSS

    正如您所看到的 徽标显示在背景图像上方 但我希望它位于背景图像的中心 这是我的标题 背景需要从页面顶部开始并在菜单之前结束 徽标需要显示在背景图像的中央 我已经尝试了很多 但也许有人遇到了类似的问题 可以帮助我解决这个问题 这张图片显示它几
  • 如何在 CSS 中将子元素居中,即使它比父元素大?

    我想创建一个 css 类 以便可以将 div 放置在其父级的中心 我正在使用的代码是 centered position absolute margin auto bottom 0px left 0px top 0px right 0px
  • 列表项的替代背景颜色

    我有一个列表 每个项目都是链接的 有没有办法可以替换每个项目的背景颜色 ul li a href link Link 1 a li li a href link Link 2 a li li a href link Link 3 a li
  • 如何在 vuejs 中防止/停止点击传播

    我有一个递归列表 树 每个元素都有一个 click sayHello el id 现在的问题是 因为它是一个嵌套列表 例如 list element 0 01 list el 1 01 list el 2 01 list el 1 02 l
  • 有什么方法可以安全地在浏览器中显示视频

    有什么方法可以安全地在浏览器中显示视频 就像他的安全措施之一 视频无法下载 谢谢 我想您的意思是您不希望您的视频被下载或复制 如果是这样 那么阻止人们下载视频或多或少是不可能的 甚至有很多工具可以从 YouTube 等大型提供商那里下载 因
  • 内部样式表中的 HTML 注释标签[重复]

    这个问题在这里已经有答案了 可能的重复 注释掉 HTML 文档中的样式表以支持旧版浏览器 https stackoverflow com questions 6825773 commenting out stylesheets in htm
  • 如何在 HTML 中创建可编辑的下拉列表?

    我想创建一个带有下拉列表的文本字段 让用户选择一些预定义的值 用户还应该能够键入新值或从下拉列表中选择预定义值 我知道我可以为此使用两个小部件 但在我的应用程序中 如果将其统一在一个小部件中会更符合人体工程学 是否有标准小部件或者我必须使用

随机推荐