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 可以利用反斜杠来实现转义, 支持以下这些符号前面加上反斜杠来帮助插入普通的符号:


\   反斜线

`   反引号

*   星号

_   底线

{}  花括号

[]  方括号

()  括弧

#   井字号

+   加号

-   减号

.   英文句点

!   惊叹号

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


目录
相关文章
|
8月前
VScode用户自定义代码片段
VScode用户自定义代码片段
55 0
|
JavaScript Windows
如何使用vscode用户代码
1.使用vscdoe 设置-&gt;首选项-&gt;用户片段-vue.json 设置常用的代码片段。注意⚠️ 想要在vue script 标签内生效,需要设置在javascritp.json 文件中。 2 是光标出现的位置,使用tab键可以快速切换,填充代码/文案。
107 0
VSCode快捷开发必备配置——配置用户代码片段
VSCode快捷开发必备配置——配置用户代码片段
253 0
|
JavaScript 前端开发 程序员
推荐三个神级VSCode插件[jupyter中写javascript,替代typora的markdown编辑器,记录敲代码时间的插件]
使用过Python的朋友应该都知道Jupyter-Notebook,因为它对新手朋友学习Python可谓是绝佳的工具,对Python老手来说使用它来写一些小Demo或者绘图分析都是非常不错的工具,我们都知道,最近,我开始了深入学习JavaScript的路途,偶尔为敲一下js来验证书中的说法以及自己的想法,同时可能会记一下笔记,然后可能还需要刷Leetcode
786 0
|
前端开发 JavaScript IDE
封装库/工具库中重要概念之编辑器
在前端开发中,编辑器(Code Editor)是一项非常重要的工具,它可以帮助我们更加高效地编写和编辑代码。虽然市面上已经有了许多强大的编辑器,但是使用封装库/工具库可以帮助我们更加方便地集成编辑器到我们的项目中
133 0
vscode自定义代码模板方法
vscode自定义代码模板方法
247 0
vscode自定义代码模板方法
|
JavaScript
vscode编辑器怎么用代码片段生成用户的文件模板?
vscode编辑器怎么用代码片段生成用户的文件模板?
vscode编辑器怎么用代码片段生成用户的文件模板?
Unity3D原生编辑器的界面太丑?那就试试这款插件吧
是否已经看厌了Unity一成不变的白灰色了?现在给大家带来一个可以更换Unity的主题颜色的插件,下面就让我们来看看怎么使用吧
关于Markdown编辑器的一些简单使用语法
关于Markdown编辑器的一些简单使用语法 Markdown编辑器的日常使用其实还是比较方便的,语法也不会过于复杂。在Markdown编辑器中,常用的标记符号不超过10个,只需要少量的时间就可以轻松掌握。 创建标题 标题是文章中最常用的格式之一,在Markdown编辑器中,如果我们想创建一个标题,只需要输入符号#,在符号#之后空一格然后输入标题名称。Markdown编辑器最多支撑到6级标题,符号#的数量就是对应标题的等级。
108 0
|
Java Go 开发工具