Markdown Preview Enhanced教程

下载 3

kayky

发布于

2242

人观看

#信息技术

Markdown Preview Enhanced是Atom和Visual Studio Code的超级强大降价扩展插件。本文介绍了他的编写规则，导出格式及相关扩展。

展开查看详情

1 . 目录致谢目录一览 1. 开始 1.1 简介 1.2 使用 1.3 安装教程 1.3.1 Atom 版本安装教程 1.3.2 VS Code 版本安装教程 2. 编写 Markdown 2.1 Markdown 基本要素 2.2 数学 2.3 图像 2.4 目录列表（TOC） 2.5 导入文件 2.6 Code Chunk 2.7 幻灯片制作 2.8 Pandoc 3. 文档导出 3.1 HTML 导出 3.2 PhantomJS 导出 3.3 Chrome (Puppeteer) 导出 3.4 PDF 导出 3.5 eBook 导出 3.6 Prince PDF 导出 3.7 Pandoc 3.7.1 PDF 文档 3.7.2 Word 文档 3.7.3 RTF 文档 3.7.4 Beamer 文档 3.7.5 Custom 文档 3.7.6 Bibliographies 以及 Citations 3.8 保存为 Markdown 4. 定制 & 扩展本文档使用书栈(BookStack.CN) 构建 - 1 -

2 . 4.1 自定义 CSS 4.2 扩展 Markdown Parser 4.3 图片助手 5. 额外 6. 疑难解答（FAQ） 7. Changelog 本文档使用书栈(BookStack.CN) 构建 - 2 -

3 .致谢致谢当前文档《markdown preview enhanced文档（简体中文版）》由进击的皇虫使用书栈(BookStack.CN) 进行构建，生成于 2018-01-20。书栈(BookStack.CN) 仅提供文档编写、整理、归类等功能，以及对文档内容的生成和导出工具。文档内容由网友们编写和整理，书栈(BookStack.CN) 难以确认文档内容知识点是否错漏。如果您在阅读文档获取知识的时候，发现文档内容有不恰当的地方，请向我们反馈，让我们共同携手，将知识准确、高效且有效地传递给每一个人。同时，如果您在日常生活、工作和学习中遇到有价值有营养的知识文档，欢迎分享到书栈(BookStack.CN) ，为知识的传承献上您的一份力量！如果当前文档生成时间太久，请到书栈(BookStack.CN) 获取最新的文档，以跟上知识更新换代的步伐。文档地址：http://www.bookstack.cn/books/mpe 书栈官网：http://www.bookstack.cn 书栈开源：https://github.com/TruthHun 分享，让知识传承更久远！感谢知识的创造者，感谢知识的分享者，也感谢每一位阅读到此处的读者，因为我们都将成为知识的传承者。本文档使用书栈(BookStack.CN) 构建 - 3 -

4 .目录一览目录一览开始简介使用安装教程 Atom VS Code 编写 Markdown Markdown 基本要素数学图像 TOC 导入文件 Code Chunk 幻灯片 Pandoc 文档导出 HTML PhantomJS Puppeteer PDF eBook Prince (PDF) Pandoc PDF Word RTF Beamer Custom Bibliographies and Citations Markdown (GFM) 定制 & 扩展自定义 CSS 扩展 Markdown Parser 本文档使用书栈(BookStack.CN) 构建 - 4 -

5 .目录一览图片助手开发者文档 Credits Backers Thanks 额外疑难解答 Changelog Atom History VS Code 本文档使用书栈(BookStack.CN) 构建 - 5 -

6 .1. 开始 1. 开始本文档使用书栈(BookStack.CN) 构建 - 6 -

7 .1.1 简介 1.1 简介 Markdown Preview Enhanced 安装特性支持这个项目 Mume - 该项目的核心帮忙翻译文档 Markdown Preview Enhanced tag v0.15.2 downloads 107k Markdown Preview Enhanced 是一款为 Atom 以及 Visual Studio Code 编辑器编写的超级强大的 Markdown 插件。这款插件意在让你拥有飘逸的 Markdown 写作体验。在这里留言如果你发现了问题或者想要请求新的特性。安装本文档使用书栈(BookStack.CN) 构建 - 7 -

8 .1.1 简介 Atom 版安装 VS Code 版安装特性自动编辑器及预览滑动同步导入外部文件 Code Chunk Pandoc Prince 电子书幻灯片可扩展性 LaTeX 数学导出 PDF, PNG, 以及 JPEG 凭借 PhantomJS 导出 PDF, PNG, 以及 JPEG 凭借 Puppeteer 导出漂亮的 HTML（移动端支持）编译到 GitHub Flavored Markdown 自定义预览 CSS TOC 生成流程图 / 时序图以及各种其他种类的图形嵌入 LaTeX, 渲染 TikZ, Chemfig 等图形 Task List (Github Flavored) 图片助手脚注 Front Matter 以及更多。。。支持这个项目 Markdown Preview Enhanced 是一款由 University of Illinois/NCSA Open Source License 下发布的免费开源软件。这个项目的持续开发脱离不了这些可敬的赞助者们。你也可以使这个项目变的更好，到 Patreon，PayPal，或者微信支付 Wechat Pay 上来支持我们。谢谢！ Mume - 该项目的核心 Mume 驱动了 atom 以及 vscode 版本的 markdown preview enhanced。帮忙翻译文档本文档使用书栈(BookStack.CN) 构建 - 8 -

9 .1.1 简介如果你想要帮忙翻译这个文档到其他的语言, 请在这里留言。 ➔ 使用本文档使用书栈(BookStack.CN) 构建 - 9 -

10 .1.2 使用 1.2 使用使用命令快捷键插件设置 Atom VS Code 使用命令你可以在 atom 编辑器中按 cmd-shift-p 键来打开 Command Palette 。 cmd 键在 Windows 中就是 ctrl Markdown 源文件 Markdown Preview Enhanced: Toggle ctrl-shift-m 开／关 Markdown 文件预览。 Markdown Preview Enhanced: Toggle Zen Mode 开关无干扰式写作模式。 Markdown Preview Enhanced: Customize Css 自定义预览 CSS。这里有一个快速教程。 Markdown Preview Enhanced: Create Toc 生成 TOC（需要预览实现打开）。文档在这里。 Markdown Preview Enhanced: Toggle Scroll Sync 开／关预览滑动同步。 Markdown Preview Enhanced: Sync Source ctrl-shift-s 滑动预览到编辑器中的光标位置。 Markdown Preview Enhanced: Toggle Live Update 开／关预览实时更新。如果关闭了，则预览只会在 markdown 文件保存时才会更新。本文档使用书栈(BookStack.CN) 构建 - 10 -

11 .1.2 使用 Markdown Preview Enhanced: Toggle Break On Single Newline 开关回车换行。如果关闭了，则需要在句子后面打上两个空格然后回车进行换行。 Markdown Preview Enhanced: Insert New Slide 插入新的幻灯片并且进入 presentation 模式。 Markdown Preview Enhanced: Insert Table 插入 markdown 表格。 Markdown Preview Enhanced: Insert Page Break 插入断页符。 Markdown Preview Enhanced: Open Mermaid Config 打开 mermaid 设置文件。 Markdown Preview Enhanced: Open PhantomJS Config 打开 PhantomJS 设置文件。 Markdown Preview Enhanced: Open Mathjax Config 打开 MathJax 设置文件。 Markdown Preview Enhanced: Image Helper 更多详细信息请查看这个文档。图片助手支持快速插入图片链接，拷贝本地图片，和上传图片（powered by imgur and sm.ms）。国内用户推荐使用 sm.ms ，墙内不限量免费上传图片。本文档使用书栈(BookStack.CN) 构建 - 11 -

12 .1.2 使用 Markdown Preview Enhanced: Show Uploaded Images 打开 image_history.md 显示图片上传历史。你可以随意编辑 image_history.md 文件。 Markdown Preview Enhanced: Run Code Chunk shift-enter 运行单个 Code Chunk。 Markdown Preview Enhanced: Run All Code Chunks ctrl-shift-enter 运行所有 Code Chunks。 Markdown Preview Enhanced: Extend Parser 扩展 Markdown Parser。预览右键点击预览打开菜单：本文档使用书栈(BookStack.CN) 构建 - 12 -

13 .1.2 使用 cmd-= or cmd-shift-= . 放大预览。 cmd— or cmd-shift-_ . 缩小预览。 cmd-0 重置预览缩放。 cmd-shift-s 滑动 markdown 编辑器到预览的位置。 esc 开／关边栏 TOC。快捷键 Shortcuts Functionality ctrl-shift-m 开／关预览 cmd-k v 打开预览仅 VSCode 可用 ctrl-shift-s 滑动同步预览 / 滑动同步 markdown 源 shift-enter 运行 Code Chunk ctrl-shift-enter 运行所有的 Code Chunks cmd-= or cmd-shift-= 预览放大本文档使用书栈(BookStack.CN) 构建 - 13 -

14 .1.2 使用 cmd— or cmd-shift-_ 预览缩小 cmd-0 预览缩放重置 esc 开／关边栏 TOC 插件设置 Atom 如果你想要打开插件设置，请按下 cmd-shift-p 然后选择 Settings View: Open 。在 Settings 页面中，接着点击 Packages 。在 Installed Packages 下面搜索 markdown-preview-enhanced ：点击 Settings 按钮：本文档使用书栈(BookStack.CN) 构建 - 14 -

15 .1.2 使用 VS Code 运行 Preferences: Open User Settings 命令，然后搜索 markdown-preview-enhanced 。本文档使用书栈(BookStack.CN) 构建 - 15 -

16 .1.2 使用本文档使用书栈(BookStack.CN) 构建 - 16 -

17 .1.3 安装教程 1.3 安装教程本文档使用书栈(BookStack.CN) 构建 - 17 -

18 .1.3.1 Atom 版本安装教程 1.3.1 Atom 版本安装教程 Atom 版本安装教程软件内安装（墙外推荐） Terminal 终端安装（墙内可以尝试） GitHub安装（墙内推荐）对于开发人员 Atom 版本安装教程感谢 @zangchendi 编写此文档. 请确保已禁用掉官方的 markdown-preview 插件安装方法有很多，推荐用户根据个人情况（墙内/墙外）自行选择。软件内安装（墙外推荐）打开 atom 编辑器，打开 Settings 设置（默认为 cmd+, 键)，然后点击 install 安装，搜索 markdown-preview-enhanced 。安装完成后，必须重启 atom 使之生效。推荐在安装完成后在 Settings 中点击 Disable 关闭系统内置安装的 markdown-preview ，防止冲突。本文档使用书栈(BookStack.CN) 构建 - 18 -

19 .1.3.1 Atom 版本安装教程 Terminal 终端安装（墙内可以尝试）打开终端，运行如下命令： 1. apm install markdown-preview-enhanced 如果是墙内用户，可以先尝试运行如下命令测试网络状况： 1. apm install check 如果 Installing check to /.atom/packages 后面很快出现一个对号，则证明可以使用命令行安装。注：校园网用户可能比较容易安装，此外防火墙也经常会抽风导致安装成功。注2：墙内用户用户默认已经安装npm并设置国内淘宝镜像。如果没有，请参照下文安装。关于墙内npm安装运行如下命令使用淘宝镜像安装npm： 1. npm install -g cnpm --registry=https://registry.npm.taobao.org 本文档使用书栈(BookStack.CN) 构建 - 19 -

20 .1.3.1 Atom 版本安装教程可以通过 cnpm -v 查看版本命令查看是否安装成功。此后就可以使用 cnpm 代替 npm 命令之后需要对 .atom 文件夹内 .atomrc 进行配置：打开 .atomrc 文件（如不存在请自行创建），输入如下内容并保存 1. registry=https://registry.npm.taobao.org 2. strict-ssl = false GitHub安装（墙内推荐） cd 到 .atom/packages 文件夹 Clone 整个项目 cd 到下载的 markdown-preview-enhanced 文件夹运行 npm install 命令。墙内用户可以使用 cnpm install 命令。 1. cd ~/.atom/packages 2. git clone https://github.com/shd101wyy/markdown-preview-enhanced 3. cd markdown-preview-enhanced 4. npm install 墙内用户如果没有安装 npm 命令，可以参照终端安装内的关于墙内npm安装对于开发人员 1. apm develop markdown-preview-enhanced 在Atom编辑器中通过 View->Developer->Open in Dev Mode… 打开 markdown- preview-enhanced 文件夹然后您就可以修改代码每次更新代码，您都需要通过 cmd-shift-p 键搜索选择 Window: Reload 重新载入项目。 ➔ 使用本文档使用书栈(BookStack.CN) 构建 - 20 -

21 .1.3.2 VS Code 版本安装教程 1.3.2 VS Code 版本安装教程 VS Code 版本安装教程通过 VS Code 安装（推荐）通过 GitHub 安装 VS Code 版本安装教程这里有如下方式安装此插件：通过 VS Code 安装（推荐）打开 vscode 编辑器，在插件页搜索 markdown-preview-enhanced ，接着点击 Install 按钮。通过 GitHub 安装从 Releases 下载 markdown-preview-enhanced-*.vsix 文件。打开 vscode，运行 Extension: Install from VSIX 命令，然后选择你刚刚下载好的 *.vsix 文件。 ➔ 使用本文档使用书栈(BookStack.CN) 构建 - 21 -

22 .1.3.2 VS Code 版本安装教程本文档使用书栈(BookStack.CN) 构建 - 22 -

23 .2. 编写 Markdown 2. 编写 Markdown 本文档使用书栈(BookStack.CN) 构建 - 23 -

24 .2.1 Markdown 基本要素 2.1 Markdown 基本要素 Markdown 基本要素什么是 Markdown? 语法说明标题强调列表无序列表有序列表添加图片链接引用分割线行内代码代码块语法高亮代码块 class（MPE 扩展的特性）代码行数任务列表表格扩展的语法表格 Emoji & Font-Awesome 上标下标脚注缩略标记 CriticMarkup 参考 Markdown 基本要素这篇文件意在简要介绍 GitHub Flavored Markdown 写作。什么是 Markdown? Markdown 是一种文本格式。你可以用它来控制文档的显示。使用 markdown，你可以创建粗体的本文档使用书栈(BookStack.CN) 构建 - 24 -

25 .2.1 Markdown 基本要素文字，斜体的文字，添加图片，并且创建列表等等。基本上来讲，Markdown 就是普通的文字加上 # 或者 * 等符号。语法说明标题 1. # 这是 <h1> 一级标题 2. ## 这是 <h2> 二级标题 3. ### 这是 <h3> 三级标题 4. #### 这是 <h4> 四级标题 5. ##### 这是 <h5> 五级标题 6. ###### 这是 <h6> 六级标题如果你想要给你的标题添加 id 或者 class ，请在标题最后添加 {#id .class1 .class2} 。例如： 1. # 这个标题拥有 1 个 id {#my_id} 2. # 这个标题有 2 个 classes {.class1 .class2} 这是一个 MPE 扩展的特性。强调 1. *这会是斜体的文字* 2. _这会是斜体的文字_ 3. 4. **这会是粗体的文字** 5. __这会是粗体的文字__ 6. 7. _你也 **组合** 这些符号_ 8. 9. ~~这个文字将会被横线删除~~ 列表无序列表 1. * Item 1 2. * Item 2 3. * Item 2a 本文档使用书栈(BookStack.CN) 构建 - 25 -

26 .2.1 Markdown 基本要素 4. * Item 2b 有序列表 1. 1. Item 1 2. 1. Item 2 3. 1. Item 3 4. 1. Item 3a 5. 1. Item 3b 添加图片 1. ![GitHub Logo](/images/logo.png) 2. Format: ![Alt Text](url) 链接 1. http://github.com - 自动生成！ 2. [GitHub](http://github.com) 引用 1. 正如 Kanye West 所说： 2. 3. > We're living the future so 4. > the present is our past. 分割线 1. 如下，三个或者更多的 2. 3. --- 4. 5. 连字符 6. 7. *** 8. 9. 星号 10. 11. ___ 本文档使用书栈(BookStack.CN) 构建 - 26 -

27 .2.1 Markdown 基本要素 12. 13. 下划线行内代码 1. 我觉得你应该在这里使用 2. `<addr>` 才对。代码块你可以在你的代码上面和下面添加 ``` 来表示代码块。语法高亮你可以给你的代码块添加任何一种语言的语法高亮例如，给 ruby 代码添加语法高亮： 1. ```ruby 2. require 'redcarpet' 3. markdown = Redcarpet.new("Hello World!") 4. puts markdown.to_html 5. ``` 会得到下面的效果： 1. require 'redcarpet' 2. markdown = Redcarpet.new("Hello World!") 3. puts markdown.to_html 代码块 class（MPE 扩展的特性）你可以给你的代码块设置 class 。例如，添加 class1 class2 到一个代码块： 1. ```javascript {.class1 .class} 2. function add(x, y) { 3. return x + y 4. } 5. ``` 本文档使用书栈(BookStack.CN) 构建 - 27 -

28 .2.1 Markdown 基本要素代码行数如果你想要你的代码块显示代码行数，只要添加 line-numbers class 就可以了。例如： 1. ```javascript {.line-numbers} 2. function add(x, y) { 3. return x + y 4. } 5. ``` 将会得到下面的显示效果：任务列表 1. - [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported 2. - [x] list syntax required (any unordered or ordered list supported) 3. - [x] this is a complete item 4. - [ ] this is an incomplete item 表格 1. First Header | Second Header 2. ------------ | ------------- 3. Content from cell 1 | Content from cell 2 4. Content in the first column | Content in the second column 扩展的语法表格本文档使用书栈(BookStack.CN) 构建 - 28 -

29 .2.1 Markdown 基本要素 Emoji & Font-Awesome 只适用于 markdown-it parser 而不适用于 pandoc parser 。缺省下是启用的。你可以在插件设置里禁用此功能。 1. :smile: 2. :fa-car: 上标 1. 30^th^ 下标本文档使用书栈(BookStack.CN) 构建 - 29 -

3点赞

0收藏

3下载