杰致信息科技(广州)有限公司

如何使用MarkdownPad来编辑Markdown文档

(作者:ALAN HE) (日期: 2022年7月19日) (版本: Version 1.0)(关键字: Markdown编辑)

Markdown 是一种轻量级标记语言。它允许人们“使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML(或者HTML)文档”。很简单就写出排版
很好看的文章
**MarkdownPad** Windows平台上一款功能齐全的Markdown文档编辑工具, 可以让你快速的编写Markdown文档, 和Html一样Markdown文档也是一种轻
量的标记性语言,可以达到以较小的文件大小来存储更多的内容, 内容也丰富多彩, 涵盖文字, 图片, 视频, 链接等多种方式
### Built exclusively for Markdown ###
Enjoy first-class Markdown support with easy access to Markdown syntax and convenient keyboard shortcuts.
尝试在MarkdownPad上输入下面内容, 然后在右边的窗口你就可以看到Markdown文档实际显示的样式, 当然首先你需要在Windows10上面安装Markdown
Pad文档编辑器,然后安装 Awesomium 1.6.6 SDK. 然后右边的屏幕就会实时显示你正在编辑的Markdown文档的屏幕解析显示:
- **Bold** (`Ctrl+B`) and *Italic* (`Ctrl+I`) - Quotes (`Ctrl+Q`) - Code blocks (`Ctrl+K`) - Headings 1, 2, 3 (`Ctrl+1`, `Ctrl+2`, `Ctrl+3`) - Lists (`Ctrl+U` and `Ctrl+Shift+O`)
### See your changes instantly with LivePreview ###
下面这段英文我们进行文字链接, 将链接文字设置为蓝色并加下划线, 点击蓝色下划线字体, 将自动跳转到所设置的对应的网页. 这是Markdown文档的其中一个强大的功能. Don't guess if your [hyperlink syntax](http://markdownpad.com) is correct; LivePreview will show you exactly what your document looks like every time you press a key.
点击上面的链接, 您将自动跳转到上面的链接所对应的网址, 是不是很方便?
下面首先介绍如何在Markdownpad插入视频.那么如何在markdown中链接视频呢? 下面是在MarkdownPad插入视频的代码, 和JS(JavaScrip)没有什么分别.

iframe方式, youku的这种可以通过这种方式. 效果预览如下

但大家发现下面的视频似乎无法设置视频屏幕的尺寸大小, 而是占据了整个屏幕

markdown 支持h5语法

video H5方式, 通用方式. 只要有视频的源地址即可. 视频的地址最简单就是你硬盘的地址或者服务器上的视频文件地址, 如../video/watsonchatbot.mp4或者http://carcontent.com/../video/watsonchatbot.mp4, 可以看到下面不但定义了视频播放尺寸的大小,还定义了视频是居中播放还是靠左或者靠右播放. 可以看到在Video标签里面加align="center"并不起作用. 最终靠加

搞点

### Make it your own ###
Fonts, color schemes, layouts and stylesheets are all 100% customizable so you can turn MarkdownPad into your perfect editor.
无论是字体, 颜色, 布局和样式文件都可以进行100%客户化以满足你的需要, 将MarkdownPad变成你的完美的编辑器. 下面演示如何设置字体颜色和字体大小以及字体式样

红色蓝色黄色黄绿色

字体大小size=1 字体大小size=3 字体大小size=5

黑体宋体仿宋幼圆楷书华文行楷华文隶书华文新魏华文彩云华文琥珀

Marked Txt

== highlight 1 ==

highlight 2

```Javascript router.get('/view6410', function (req, res) { const brand = '东风本田'; const document = '2020年东风本田X-NV维修电路图'; const dirs = '东风本田X-NV'; res.render('view-6565', {document, brand, content_dir, dirs}); }); ```
`code 2`

### 如何标记程序代码

 
        router.get('/view6410', function (req, res) { 

              const brand = '东风本田'; 

              const document = '2020年东风本田X-NV维修电路图'; 

              const dirs = '东风本田X-NV'; 

              res.render('view-6565', {document, brand, content_dir, dirs}); 

        });

### A robust editor for advanced Markdown users ###

MarkdownPad supports multiple Markdown processing engines, including standard Markdown, Markdown Extra (with Table support) and GitHub Flavored Markdown.

With a tabbed document interface, PDF export, a built-in image uploader, session management, spell check, auto-save, syntax highlighting and a built-in CSS management interface, there's no limit to what you can do with MarkdownPad.

这是正常文本
== 这是 markdown 的标记文本 ==
这是 HTML 的标记文本

这是正常文本
** 这是 markdown 的斜体文本 **
这是内嵌HTML 的斜体文本

这是正常文本
~~这是 markdown 的删除文本~~
~~这是内嵌HTML 的删除文本~~

### 插入图片

插入第一幅图片, 对图片的尺寸进行设置, 分别为图片原尺寸的50%, 显示效果如图:

第二幅图片对图片的尺寸进行具体的设置, 包括高度和宽度的设置, 可以看出, 图片确实按照所定义的尺寸显示.

第三幅图除了高度和宽度按照50%进行设置外, 还对图片进行了居中处理. 入下面图片所示:

### 如何在Markdown里绘制表格
下面演示如何在Markdown文件里面建立表格, 用JavaScript的表格设置代码, 具体参考如下:

Tables	Are	Cool
col 1 is	left-aligned	$1600
col 2 is	centered	$12
col 3 is	right-aligned	$1

下面建立更复杂的表格, 包括对表格的单元格进行合并处理等, 详细请参考下面的代码.

关节脱位部位	关节脱位类型	给付比例	系数（f）
关节脱位	髋关节、膝关节、腕关节、肘关节、踝关节、肩关节、颌关节	20%	关节脱位系数（f）=1。
	拇指（每个）	3%
	脚趾或除拇指以外的手指（每个）	1%

markdown表格		html表格
语法	标题->连字符(---)	语法	表格->table标签
	分隔每列->管道(\|)		标题->th标签
	对齐->冒号(:)		行->tr标签
	强调->反引号(`)		列->td标签

      </tr>
      <tr>
        <td style="width: 20%; text-align: left;text-align: left;border-right: 1px solid gray">脚趾或除拇指以外的手指（每个）</td>

      </tr>
    </tbody>
  </table>

图片文字混排

要实现图片和文字在同一行的混合排列排版, 则需要通过一下两种方法实现, 第一种是通过表格的方式, 在其中一列上插入表格, 再另外一列上插入文本, 文本通过空行
来调节文字的上下移动以避免文档显示在整个表格的列的中间, Markdown没有设置文字在表格中上下排列的功能, 需要通过添加换行予以实现.

关节脱位部位	关节脱位类型
	髋关节、膝关节、腕关节、肘关节、踝关节、肩关节、颌关节
	拇指（每个）

**图片文字混排**

要实现图片文字的在同一行的混合排版, 要么使用表格的模式, 要么就需要
用html标记性语言进行标记, 这里先演示使用表格的方式, 来实现视频和文字
在同一行的混合排版效果, 主要涉及对文字的版面设置

要实现图片文字的在同一行的混合排版, 要么使用表格的模式, 要么就需要
用html标记性语言进行标记, 这里先演示使用表格的方式, 来实现视频和文字
在同一行的混合排版效果, 主要涉及对文字的版面设置

要实现图片文字的在同一行的混合排版, 要么使用表格的模式, 要么就需要
用html标记性语言进行标记, 这里先演示使用表格的方式, 来实现视频和文字
在同一行的混合排版效果, 主要涉及对文字的版面设置

      </tr>
      <tr>
        <td style="width: 20%; text-align: left">脚趾或除拇指以外的手指（每个）</td>

      </tr>
    </tbody>
  </table>

视频图片混排

下面也是如何横向对视频和文字进行混排, 要实现视频和文字混排的功能, 有几种方法, 其中一种就是利用表格处理, 先在左边合并单元格, 在合并的单元格中插入视频, 然后在右边的表格列中填入文字内容.注意将表格的边框去掉.这样就看不出来是表格了.

	髋关节、膝关节、腕关节、肘关节、踝关节、肩关节、颌关节
	拇指（每个）

**视频文字混排**

要实现图片文字的在同一行的混合排版, 要么使用表格的模式, 要么就需要
用html标记性语言进行标记, 这里先演示使用表格的方式, 来实现视频和文字
在同一行的混合排版效果, 主要涉及对文字的版面设置

**视频文字混排技巧**

要实现图片文字的在同一行的混合排版, 要么使用表格的模式, 要么就需要
用html标记性语言进行标记, 这里先演示使用表格的方式, 来实现视频和文字
在同一行的混合排版效果, 主要涉及对文字的版面设置

多张图片平铺排列

### 插入背景色

router.get('/view6410', function (req, res)
{
const brand = '东风本田';
const document = '2020年东风本田X-NV维修电路图';
const dirs = '东风本田X-NV';
res.render('view-6565', {document, brand, content_dir, dirs});
});

北京吉普汽车维修故障分享

如何使用MarkdownPad来编辑Markdown文档

iframe方式, youku的这种可以通过这种方式. 效果预览如下

markdown 支持h5语法

图片文字混排

视频图片混排

多张图片平铺排列

插入音乐

关于CoursesQQ

CoursesQQ下载

用户档案管理

帮助中心

合作伙伴入驻

其他