简书markdown编辑器实现代码显示和图表功能

2022-07-20 本文已影响0人阳光下的叶子呵

刚接触到简书，觉得里面的文章和排版都不错，于是就想自己写几篇文章，可是在写第一篇文章时，里面需要一个表格，找了半天不知道该怎么弄，后来听朋友说要用markdown编辑器，然后按照入门指南的介绍终于实现了。下面介绍markdown编辑器的一些语法，详见
简书官方markdown入门指南

首先我们要在设置里将编辑器设置成mardown模式，默认为富文本模式。直接在编辑器里面用markdown的语法看不出效果，需要我们将编辑器切换到视图模式，点击右上角的切换视图按钮,然后就可以一边编辑一边看显示的效果了。

标题

这是最为常用的格式，在平时常用的的文本编辑器中大多是这样实现的：输入文本、选中文本、设置标题格式。
而在 Markdown 中，你只需要在文本前面加上 # 即可，同理、你还可以增加二级标题、三级标题、四级标题、五级标题和六级标题，总共六级，只需要增加 # 即可，标题字号相应降低。例如：

    #一级标题
    ##二级标题
    ###三级标题

效果如下

一级标题

二级标题

三级标题

引用

普通引用

> 引用文本前使用 [大于号+空格]> 折行可以不加，新起一行都要加上哦
> 折行可以不加，新起一行都要加上哦

引用文本前使用 [大于号+空格]> 折行可以不加，新起一行都要加上哦
折行可以不加，新起一行都要加上哦

引用里嵌套引用

>最外层引用
>>多一个 >嵌套一层引用
>>>可以嵌套很多层

最外层引用

多一个 >嵌套一层引用

可以嵌套很多层

引用里嵌套列表

> - 这是引用里嵌套的一个列表
> - 还可以有子列表
> -     * 子列表需要从  之后延后四个空格开始

这是引用里嵌套的一个列表

还可以有子列表
* 子列表需要从  之后延后四个空格开始

引用里嵌套代码块

>    (代码块)，在前面加四个空格形成代码块> 
> ``` 或者使用(```) 形成代码块

public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

分隔符

如果你有写分割线的习惯，可以新起一行输入三个减号-。当前后都有段落时，请空出一行：

前面的段落

---

后面的段落

前面的段落

后面的段落

粗斜体

**斜体文本** _*斜体文本*_
****粗体文本****  __**粗体文本**__
******粗斜体文本******
 ___***粗斜体文本***___

列表

列表格式也很常用，在 Markdown 中，你只需要在文字前面加上 -（- 和文本之间要有一个空格）就可以了，例如：

无序列表

文本1
文本2
如果我们希望有序列表，可以在文字面前加上1. 2. 3.等

有序列表

1. 文本1
2. 文本2

插入图片和链接

在 Markdown 中，插入链接不需要其他按钮，只需要使用 [显示文本](链接地址) 这样的语法即可，例如：

[Github](https://github.com)

在 Markdown 中，插入图片不需要其他按钮，只需要使用 ！[]（图片地址）
这样的语法即可，例如：

![](https://www.google.com.hk/logos/doodles/2016/2016-doodle-fruit-games-day-12-5125886484414464.3-scta.png)

[图片上传中...(image-180c53-1658288095859-0)]

注：如果是本地图片可以直接将图片拖入到要编辑的地方

引用

> 一盏灯， 一片昏黄； 一简书， 一杯淡茶。 守着那一份淡定， 品读属于自己的寂寞。 保持淡定， 才能欣赏到最美丽的风景！ 保持淡定， 人生从此不再寂寞。

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

表格

    name | sex | age
    ---- | ---- | ----
    xiaoming | 男 | 18

name	sex	age
xiaoming	男	18

显示如上图

代码

    这里开始写代码
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

通过在需要显示的代码里前一行后一行都加上```就可以，
也可以使用 4 空格缩进，再贴上代码，实现相同的的效果。