MakeDown编辑器怎么使用

简介: MakeDown编辑器怎么使用

目录

1.文本格式化

1.1 强调文字

1.2 添加删除线

        1.3 标题
2 代码格式化

2.1 行内代码

2.2 区块代码

3. 列表

3.1 无序列表

3.2 有序列表
3.3 列表嵌套

4 链接

4.1 行内式链接

4.2 参考式链接

5 转义

1.文本格式化

1.1 强调文字

我们使用*斜体文字*的方式倾斜文字,**加粗的文字**的方式加粗文字,使用***加粗的斜体字***同时加粗和倾斜文字。

下面的Markdown代码:

*斜体文字*
**加粗文字**
***加粗的斜体文字***

对应的HTML代码

<em>斜体文字</em>
<strong>加粗文字</strong>
<strong><em>加粗的斜体文字</em></strong>

网页上显示:

       斜体文字

       加粗文字

       加粗的斜体文字

1.2 添加删除线

我们可以使用markdown给文字添加删除线:

~~添加删除线的文字~~

编译成html之后:

<del>添加删除线的文字</del>

显示在网页上结果为:

添加删除线的文字

1.3 标题

Markdown 支持两种标题的语法,类 Setext 和类 atx 形式。

类Setext形式采用底线的形式.

类Setext形式采用底线的形式.
一号标题
=============
二号标题
-------------
类Atx形式则是在行首插入1到6个#,对应到标题1到标题6.
# 一号标题
## 二号标题
### 三号标题
#### 四号标题
##### 五号标题
###### 六号标题

对应HTML代码

<h1>一号标题</h1>
<h2>二号标题</h2>
<h3>三号标题</h3>
<h4>四号标题</h4>
<h5>五号标题</h5>
<h6>六号标题</h6>

网页效果

2 代码格式化

2.1 行内代码

使用反引号”`”包含实现行内代码。

我们可以使用`<br>`换行,也可以使用`<p></p>`实现。
`高亮`文字

对应的HTML

我们可以使用<code>&lt;br&gt;</code>换行,也可以使用<code>&lt;p&gt;&lt;/p&gt;</code>实现。
<code>高亮</code>文字。

2.2 区块代码

如果需要在代码内插入反引号,需要多个反引号开始和结束一段代码。

如果需要代码块和语法高亮,可以采用三个反引号的方式,同时可以注明语言类型。

 ```ruby
 require 'redcarpet'
 markdown = Redcarpet.new("Hello World!")
 puts markdown.to_html
 ```

3. 列表

3.1 无序列表

无序列表使用星号、加号或是减号作为列表标记,如果不按列表显示,前面记得加一空行。

- Red
- Green
- Blue

对应html

<ul>
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
</ul>

3.2 有序列表

使用数字接着一个英文句点表示一个有序列表, 注意前面的数字对列表没有影响。

1. 文字
2. 图片
4. 表格

html

<ol>
    <li>文字</li>
    <li>图片</li>
    <li>表格</li>
</ol>

3.3 列表嵌套

列表可以嵌套,添加tab缩进表示层次。例如下面的Markdown代码:

1. 文字
    1. 强调
        - 粗体
        - 斜体
        - 粗体和斜体
    2. 引用
2. 图片
3. 表格

  对应的html代码

<ol>
    <li>文字
    <ol>
        <li>强调
            <ul>
                <li>粗体</li>
                <li>斜体</li>
                <li>粗体和斜体</li>
            </ul>
        </li>
        <li>引用</li>
    </ol>
    </li>
    <li>图片</li>
    <li>表格</li>
</ol>

4 链接

Markdown 支持两种形式的链接语法: 行内式和参考式两种形式。

4.1 行内式链接

首先来看行内式,只要在方块括号后面紧接着圆括号并插入网址链接即可,如果你还想要加上链接的 title 文字,只要在网址后面,用双引号把 title 文字包起来即可。

欢迎大家访问我的[博客](http://blog.csdn.net/whqet/ "博客")。
也可以不指定[链接](http://blog.csdn.net)的title。

对应html代码

欢迎大家访问我的<a href="http://blog.csdn.net/whqet/" title="博客">博客</a>。
也可以不指定<a href="http://blog.csdn.net">链接</a>的title。

4.2 参考式链接

参考式链接需要进行链接内容定义,然后引用该定义设置链接。

链接内容定义格式为:

[链接名]: 链接地址 "链接title"
[链接名]: 空格(或tab) 链接地址 空格 "链接地址"(可省略)

对应html代码

请大家访问我的<a href="http://blog.csdn.net/whqet" title="我的CSDN博客">博客</a>,获取更多信息。

显示在网页上结果为:

请大家访问我的博客,获取更多信息。


5 转义

Markdown 可以利用反斜杠来实现转义, 支持以下这些符号前面加上反斜杠来帮助插入普通的符号:


\   反斜线

`   反引号

*   星号

_   底线

{}  花括号

[]  方括号

()  括弧

#   井字号

+   加号

-   减号

.   英文句点

!   惊叹号

————————————————


目录
相关文章
|
9月前
|
Java
【学习记录】IDEA编辑器 - 类、方法模板配置
【学习记录】IDEA编辑器 - 类、方法模板配置
106 0
【学习记录】IDEA编辑器 - 类、方法模板配置
|
开发工具 C++ Python
|
存储 JSON 缓存
重学编辑器
重学编辑器
473 0
几步教你vscode创建代码模板快捷输入
几步教你vscode创建代码模板快捷输入
353 0
几步教你vscode创建代码模板快捷输入
|
JavaScript
vscode编辑器怎么用代码片段生成用户的文件模板?
vscode编辑器怎么用代码片段生成用户的文件模板?
vscode编辑器怎么用代码片段生成用户的文件模板?
Unity3D原生编辑器的界面太丑?那就试试这款插件吧
是否已经看厌了Unity一成不变的白灰色了?现在给大家带来一个可以更换Unity的主题颜色的插件,下面就让我们来看看怎么使用吧
|
数据可视化 API 图形学
Unity开发者必备的编辑器技巧
我是一名Unity开发爱好者,自己总结了一些Unity编辑器技巧
735 0
|
Web App开发 Ubuntu 前端开发
七款给Web开发者的编辑器
最近看到两篇文章分别介绍了几款 Web 开发的编辑器和 Markdown 编辑器,尤其是有些跨平台的新工具,值得推荐(好吧,我承认主要是为 Ubuntu/Linux 用户推荐的)。
215 0
七款给Web开发者的编辑器
|
图形学 Windows
Unity 之 实用技巧更换编辑器主题
你的编辑器还在用灰色主题吗?还在羡慕别人的深色主题吗?教你一步修改Unity编辑器主题,赶快来看看吧 ~
1372 0
Unity 之 实用技巧更换编辑器主题
|
前端开发 容器
GEF入门实例_总结_06_为编辑器添加内容
一、前言 本文承接上一节:GEF入门实例_总结_05_显示一个空白编辑器 在上一节我们为我们的插件添加了一个空白的编辑器,这一节我们将为此编辑器添加内容。   二、GEF的MVC模式 在此只简单总结一下,后面会详细介绍。
1454 0