美文网首页前端开发知识
简书中Markdown使用攻略

简书中Markdown使用攻略

作者: 毹毹 | 来源:发表于2017-05-16 15:23 被阅读569次

    接触简书也有段时间了,但是一直使用的编辑文档格式是富文本,对于代码格式的显示真的大写的尴尬,今天看了一篇大神的分享,果断设置

    编辑器的选择

    1 看下富文本和markdown的简单区分:

    富文本 markdown
    简书的默认编辑器即为「富文本编辑器」,「富文本编辑器」有一条功能栏 Markdown 是一种用来写作的轻量级「标记语言」,它用简洁的语法代替排版,使我们专心于码字
    优点:心理上易入门,操作类似于word 优点:心理上易入门,操作类似于word

    2 Markdown相对来说多了列表和表格(代码风格也比较容易结束)

    markdown |
    ----|------
    斜体 |删除线| 引用 |标题| 外链
    图片| 分割线| 视频| 列表| 表格

    3 富文本功能简介

    富文本功能简介

    富文本由于类似于我们平时常用的编辑器,很容易上手,所以这里不多赘述。

    4 Markdown详解

    学习使用markdown首先需要记住这几个符号,很多标记都是由下面这几个符号来表示,引导

    这几个符号 # * > [] () | - ~ :

    4.1标题(#+空格)

    在 Markdown 中,你只需要在文本前面加上 # +空格即可,同理、你还可以增加二级标题、三级标题、四级标题、五级标题和六级标题,总共六级,只需要增加 # 即可,标题字号相应降低。例如:
    # 一级标题
    ## 二级标题
    ### 三级标题
    #### 四级标题
    ##### 五级标题
    ###### 六级标题

    如下图:


    markdown标题形式
    4.2列表(-,1.+空格)

    无序列表(-+空格):

    - 文本1
    - 文本2
    - 文本3

    有序列表(1.+空格)文字前面加上 1. 2. 3. .....就可以了

    1. 文本
    1. 文本
    2. 文本
    列表形式
    4.3链接和图片(! [] () 感叹号+中括号+小括号)

    在 Markdown 中,插入链接不需要其他按钮,你只需要使用 显示文本 这样的语法即可,

    例如:

    [简书](http://www.jianshu.com)
    简书

    在 Markdown 中,插入图片不需要其他按钮,你只需要使用 ![](图片链接地址)这样的语法即可,例如:

    ![](https://img.haomeiwen.com/i259/0ad0d0bfc1c608b6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    • 注:插入图片的语法和链接的语法很像,只是前面多了一个 !。

    • 插入链接和图片的案例截图:

    图片形式
    4.4引用(>+空格)

    在我们写作的时候经常需要引用他人的文字,这个时候引用这个格式就很有必要了,在 Markdown 中,你只需要在你希望引用的文字前面加上 > 就好了,例如:

    > 说好的幸福呢
    说好的幸福呢

    引用的案例截图:

    引用形式
    4.5粗体和斜体(* ,**)

    Markdown 的粗体和斜体也非常简单,用两个 *包含一段文本就是粗体的语法,用一个* 包含一段文本就是斜体的语法。例如:

    *我是斜体哦*

    我是斜体哦
    **我是粗体哦**
    我是粗体哦

    斜体加粗显示为:

    ***我是斜体+粗体哦***
    我是斜体+粗体哦

    斜体和粗体
    4.6代码引用(`+空格,```+空格)

    需要引用代码时,如果引用的语句只有一段,不分行,可以用 ` 将语句包起来。
    如果引用的语句为多行,可以将```置于这段代码的首行和末行。
    代码引用的案例截图:

    代码引用形式
    4.7表格(| :- 竖线+冒号+短线 需要换行)

    相关代码:

    | Tables | Are | Cool | | ------------- |:-------------:| -----:| | col 3 is | right-aligned | $1600 | | col 2 is | centered | $12 | | zebra stripes | are neat | $1 |

    显示如下:

    Tables Are Cool
    col 3 is right-aligned $1600
    col 2 is centered $12
    zebra stripes are neat $1

    相关代码:

    如下
    `dog | bird | cat
    ----|------|----

    foo | foo | foo
    bar | bar | bar
    baz | baz | baz`

    显示效果

    dog bird cat
    foo foo foo
    bar bar bar
    baz baz baz

    表格的多表现形式

    代码如下:
    |表格|表格|表格| |:---|:---:|---:| |冒号在左边表示左对齐|冒号两边都有表示居中|冒号在右边表示右对齐|

    显示结果:

    表格 表格 表格
    冒号在左边表示左对齐 冒号两边都有表示居中 冒号在右边表示右对齐
    4.8显示链接中带括号的图片

    代码如下:
    ![][1]
    [1]: http://latex.codecogs.com/gif.latex?\prod%20\(n_{i}\)+1

    4.9分割线,删除线(***三个星号,~ 两个波浪线)

    分割线:

    代码

    ***

    显示效果:

    你以为你是谁,迷路了就算了


    好吧,无所谓了,无所谓

    删除线

    代码
    ~~左右两个波浪出现删除线,也叫中划线~~

    效果显示

    左右两个波浪出现删除线,也叫中划线

    soAll _

    参考文章
    简书小白必看,如何优雅而有逼格地写作!
    献给写作者的 Markdown 新手指南

    相关文章

      网友评论

        本文标题:简书中Markdown使用攻略

        本文链接:https://www.haomeiwen.com/subject/jqhlxxtx.html