Loading...
墨滴

nothing

2021/05/12  阅读：201  主题：前端之巅同款

专注写作，认识与入门 Markdown

Markdown基本语法

Markdown是一种纯文本格式的标记语言。通过简单的标记语法，它可以使普通文本内容具有一定的格式。

相比富文本编辑器

优点：

1、因为是纯文本，所以只要支持Markdown的地方都能获得一样的编辑效果，可以让作者摆脱排版的困扰，专心写作。
2、操作简单。比如:富文本编辑器编辑时标记个标题，先选中内容，再点击导航栏的标题按钮，选择几级标题。要三个步骤。而Markdown只需要在标题内容前加#即可

缺点：

1、需要记一些语法（当然，是很简单。五分钟学会）。
2、有些平台不支持Markdown编辑模式。平台推荐：mdnice、vscode、简书、有道云笔记等等。

一、标题

在想要设置为标题的文字前面加#来表示
一个#是一级标题，二个#是二级标题，以此类推。支持六级标题。有的平台比如vscode会给一级标题加上分割线

注：

  • 标准语法一般在#后跟个空格再写文字，简书平台不加空格也行。
  • 换行需要在文字后空2个空格
  • vscode平台空行需要使用<br>来显示，不可以直接写< br/>，会显示为空行，要用转义字符，如下所示; 
&nbsp;代表空格 
&lt;代表小于<>
&gt;代表大于>
&lt;br&gt;代表<br/>
&amp;代表与号&
&quot;代表引号“
&apos;代表撇号‘

示例：

# 这是一级标题
## 这是二级标题
### 这是三级标题
#### 这是四级标题
##### 这是五级标题
###### 这是六级标题

效果如下：

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题
这是六级标题

二、字体

  • 加粗

要加粗的文字左右分别用两个*号包起来

  • 斜体

要倾斜的文字左右分别用一个*号包起来

  • 斜体加粗

要倾斜和加粗的文字左右分别用三个*号包起来

  • 删除线

要加删除线的文字左右分别用两个~~号包起来

示例：

**这是加粗的文字**
*这是倾斜的文字*`
***这是斜体加粗的文字***
~~这是加删除线的文字~~

效果如下：

这是加粗的文字
这是倾斜的文字`
这是斜体加粗的文字
这是加删除线的文字

三、引用

在引用的文字前加>即可。引用也可以嵌套，如加两个>>三个>>> n个... 貌似可以一直加下去，但没神马卵用

示例：

>这是引用的内容
>>这是引用的内容
>>>>>>>>>>这是引用的内容

效果如下：

这是引用的内容，使用空行结束
123
333
444

这是引用的内容，使用空行结束
123

这是引用的内容2，使用空行结束
444

四、分割线

三个或者三个以上的 - 或者 * 都可以。

示例：

---
----
***
*****

效果如下：
可以看到，显示效果是一样的。

五、图片

语法：

![图片alt](图片地址 ''图片title'')

图片alt就是显示在图片下面的文字，相当于对图片内容的解释。
图片title是图片的标题，当鼠标移到图片上时显示的内容。title可加可不加
图片地址可以是网络图片也可以是本地图片，本地图片的路径写相对路径，
本地图片仅针对在本地书写markdown文件时使用
  • 网络图片显示方式
blockchain
blockchain
  • 本地图片显示方式，这里是不会显示的，仅做演示

![local](./img/markdown_img.jpg)

local
local

简书上传本地图片直接点击导航栏的图片标志，选择图片即可

可以通过在图片尾部添加宽度和高度控制图片大小，用法如下：

![同时设置宽度和高度](https://files.mdnice.com/logo.png =150x150)

![只设置宽度，推荐使用百分比](https://files.mdnice.com/logo.png =40%x)

效果如下：

同时设置宽度和高度
同时设置宽度和高度
只设置宽度，推荐使用百分比
只设置宽度，推荐使用百分比

该语法比较特殊，其他 Markdown 编辑器不完全通用。

支持 jpg、png、gif、svg 等图片格式，其中 svg 文件仅可在微信公众平台中使用，svg 文件示例如下：

![](https://files.mdnice.com/i-am-svg.svg)

效果如下：

注：图片粘贴到微信、知乎或掘金时会自动上传其服务器，不必担心使用上述图床会导致图片丢失。

图片还可以和链接嵌套使用，能够实现推荐卡片的效果，用法如下：

[![Markdown Nice 最全功能介绍](https://files.mdnice.com/dance.gif)](https://mp.weixin.qq.com/s/lM808MxUu6tp8zU8SBu3sg)

效果:

Markdown Nice 最全功能介绍
Markdown Nice 最全功能介绍

markdown格式追求的是简单、多平台统一。那么图片的存储就是一个问题，需要用图床，提供统一的外链，这样就不用在不同的平台去处理图片的问题了。才能做到书写一次，各处使用。

六、超链接

语法：

[超链接名](超链接地址 "超链接title")
title可加可不加

示例：

[简书](http://jianshu.com)
[百度](http://baidu.com)

效果如下：

简书
百度

注：Markdown本身语法不支持链接在新页面中打开，貌似简书做了处理，是可以的。别的平台可能就不行了，如果想要在新页面中打开的话可以用html语言的a标签代替。

<a href="超链接地址" target="_blank">超链接名</a>

示例
<a href="https://www.jianshu.com/u/1f5ac0cf6a8b" target="_blank">简书</a>

示例
简书

微信公众号仅支持公众号文章链接，即域名为https://mp.weixin.qq.com/的合法链接。使用方法如下所示：

对于该论述，欢迎读者查阅之前发过的文章，你是《未来世界的幸存者》么？

七、列表

无序列表
语法：
无序列表用 - + * 任何一种都可以

- 列表内容
+ 列表内容
* 列表内容

注意：- + * 跟内容之间都要有一个空格

效果如下：

  • 列表内容
  • 列表内容
  • 列表内容

有序列表
语法：
数字加点

1. 列表内容
2. 列表内容
3. 列表内容

注意：序号跟内容之间要有空格
  1. 列表内容
  2. 列表内容
  3. 列表内容

列表嵌套
上一级和下一级之间敲三个空格即可，有些平台2个空格即可

  • 一级无序列表内容

    • 二级无序列表内容
    • 二级无序列表内容
    • 二级无序列表内容
    • 一级无序列表内容

  • 二级有序列表内容

    • 二级有序列表内容
    • 二级有序列表内容
    • 一级有序列表内容

  1. 二级无序列表内容

    • 二级无序列表内容
    • 二级无序列表内容
    • 一级有序列表内容

  2. 二级有序列表内容

    1. 二级有序列表内容
    2. 二级有序列表内容
    3. 二级有序列表内容

八、表格

语法：

表头|表头|表头
---|:--:|---:
内容|内容|内容
内容|内容|内容

第二行分割表头和内容。
- 有一个就行，为了对齐，多加了几个
文字默认居左
-两边加：表示文字居中
-右边加：表示文字居右
注：原生的语法两边都要用 | 包起来。此处省略

示例：

姓名|技能|排行
--|:--:|--:
刘备|哭|大哥
关羽|打|二哥
张飞|骂|三弟

效果如下：

姓名 技能 排行
刘备 哭 大哥
关羽 打 二哥
张飞 骂 三弟

九、代码

语法： 单行代码：代码之间分别用一个反引号包起来

    `代码内容`

代码块：代码之间分别用三个反引号包起来，且两边的反引号单独占一行。

(```)
  代码...
  代码...
  代码...
(```)

注：为了防止转译，前后三个反引号处加了小括号，实际是没有的。这里只是用来演示，实际中去掉两边小括号即可。

写法：

```
代码...
代码...
代码...
```

示例：

单行代码

`create database hero;`

效果如下：

单行代码

create database hero;

代码块

function fun(){
  echo "这是一句非常牛逼的代码";
}
fun();

同时第一行反引号后面表示代码块所使用的语言，如下go语言：

package main

import (
 "fmt"
 "math/rand"
 "time"
)

func main() {
  for j := 0; j < 10; j++ {
  count := 0
  for i := 0; i < 857; i++ {
   rand.Seed(time.Now().UnixNano())
   n := rand.Intn(200)
   if n == 0 {
    count++
   }
  }
  fmt.Println(count)
 }
}

支持以下语言种类：

bash
clojure，cpp，cs，css
dart，dockerfile, diff
erlang
go，gradle，groovy
haskell
java，javascript，json，julia
kotlin
lisp，lua
makefile，markdown，matlab
objectivec
perl，php，python
r，ruby，rust
scala，shell，sql，swift
tex，typescript
verilog，vhdl
xml
yaml

十 其他

TOC

支持平台：微信公众号、知乎、mm-wiki等。

TOC 全称为 Table of Content，列出全部标题。可以点击标题跳转到对应的位置。

[TOC]

效果：

由于微信只支持到二级列表，本工具仅支持二级标题和三级标题的显示。

4 注音符号

支持平台：微信公众号。

支持注音符号，用法如下：

Markdown Nice 这么好用，简直是喜大普奔hē hē hē hē呀！

附：打字如何打带有声调的拼音字母？

横屏滑动幻灯片

支持平台：微信公众号。

通过<![](url),![](url)>这种语法设置横屏滑动滑动片，具体用法如下：

蓝1
绿2
红3

<<< 左右滑动见更多 >>>

HTML

支持原生 HTML 语法，请写内联样式，如下：

橙色居右 橙色居中

反斜杠\

相当于反转义作用。使符号成为普通符号。

比如打印出反引号:

\`\`\`

效果:

```

十一 图床

MarkDown作为一种纯文本格式的标记语言，通过简单的标记语法，就使普通文本内容具有一定的格式。一次标记可以做到各平台通用，免除了富文本编辑器换平台就要重新排版的繁琐，越来越受欢迎，尤其是程序员群体。现在很多论坛和社区都开始支持使用MarkDown。但使用markdown也有一个重要的问题，那就是图片的存储，markdown文件要用到图片时必须是一个链接。各个平台都有自己的图片存储方法，在不使用图床的情况下，同一篇文章发布到不同的平台需要单独上传图片一次。这个真的无法接受，太麻烦。如果只在一个平台发布，直接用平台的图床即可。

解决办法就是使用图床来单独存储图片，需要用到图片的地方统一用图床上的图片链接就好了。这样同一篇文章，发布到不同的平台真正可以简单复制粘贴。

图床就是一个图片服务器，用来存储图片，以URL的形式来供其他平台获取图片。可以自己搭建，也可以使用别人搭建好后提供的服务。自己搭建肯定花钱，别人搭建给你提供服务，有的收费，有的一定范围内不收费，有的完全免费。

重要提示：数据是比金钱更重要的东西！这点务必先搞清楚。不要因为追求免费而用可能损失数据的服务，这样以后会发现，特别不值。即丢失了数据，又重新花钱，还浪费了时间。

一般选择图床要满足下面条件

  • 可靠性。数据在当今社会是最宝贵的财富之一，因此在选择存储的服务时，可靠性无疑是首要的考虑因素。
  • 安全性。面对攻击、盗取和破坏时如何保障数据不受到损失，是另一个重要的考虑因素。
  • 是否简单易用。越简单易用越好。
  • 价格是否合理。在满足前两条的情况下，越便宜越好，最好免费。

搜集到的作为图床的方法

  • 对象存储图床

    • 国外的有amazon s3 和google storage等
    • 国内的有七牛云、又拍云、腾讯云、阿里云、天翼云等

  • 第三方图床

    • sm.ms、imgchr、聚合图床等

  • 云盘图床

    • 微云等

  • 社交网站图床

    • 新浪微博、qq空间等

  • 云笔记图床

    • 印象笔记、有道云笔记等

  • 代码托管网站图床

    • github、码云等

  • 自建图床

    • github开源图片服务Cheverto

  • 区块链存储图床

    • IPFS等

对象存储图床

免费的有限制，可靠性高，建议有大量需求的和对数据安全性有要求的直接购买阿里云对象存储。

第三方图床

第三方图床就是专门做图床的服务商，常见的有 sm.ms、imgchr、聚合图床、爱图床等
可靠性差，小网站存在数据丢失和网站无法打开的风险，数据隐私不可控（私房照请勿随意上传），建议做好数据备份到网盘。

云盘图床

云盘一般都是文件系统存储，传图片获得外链即可。

  • 微云：利用微云来做你的图床，上传图片后分享，不用加密码，未测试时效性
  • 百度网盘，分享图片可以生成永久链接，但必须要有提取码，肯定不合适做图床了。其他的没试，可以自行测试使用

社交网站图床

社交网站也能发图片，相应的也就可以获得图片的外链。其中用的比较多的是微博图床和qq空间图床。

  • 新浪微博：新浪图床怎么用、可以把新浪微博作为图床使用吗？
  • qq空间：图床使用QQ空间会出现问题吗？

特别注意：微博图床一直以来是大家喜欢的免费好用的图床。但2019年4月25日，微博开启了图片防盗链，Referrer不为空且不是新浪的站点，全部返回403错误，也就是说非新浪的站点无法引用新浪服务器里的图片了。目前可以通过修改referrer的属性来绕过这个限制，但不保证新浪不会采取进一步的措施，毕竟用的人多了，服务成本太大，公司也承受不住。这种方法已经不再安全。

云笔记图床

云笔记同样也可以传图片，获取外链。比较出名的有印象笔记、有道云笔记。也容易被防盗链，不推荐。

代码托管网站图床

常用的代码托管网站有github、gitlab、码云、coding等，这些网站也可以上传图片，网站生成的外链就可以用在markdown中。

主要有三种方法：新建一个仓库，专门放图片、使用pages服务、使用issues功能。

  • 新建github仓库（GitHub repo）做图床
  • github的issues功能做图床
  • 利用码云的 Gitee Pages 服务搭建个人图床

自建图床

自建图片服务器，顾名思义就是自己花钱购买服务器来搭建用来存储图片的服务。github有一个开源的图片服务Cheverto，可以用来搭建自己的图床。

  • Cheverto官网
  • Cheverto的github地址
  • 使用Cheverto搭建一个自己的图床网站（此文章用到了docker，你需要懂docker）

自建图床非程序员玩不转，租服务器贵不说，关键是麻烦，还要去维护。就算搞好了，万一以后不想维护了呢？再说了，租服务器也不少花钱，为什么不直接购买大厂的服务呢？当然你要有能力有实力有别的业务也用服务器，当我没说，这里只是想找个图床用而已。

区块链存储图床

如果了解区块链，就会知道IPFS，它的远景很大，其中一个功能就是存储，我们也可以用它来作为图床。将是一种全新的体验，不过目前来看，尚早。持续关注中...

选择建议

对象存储里七牛云和又拍云都需要备案域名，还是要花域名和服务器的钱，不划算。腾讯云和阿里云收费项繁多，看不懂，个人用也有点浪费。 如果对价格不敏感的用户建议直接使用阿里云oss，速度和安全性都有保证，操作简单。

第三方图床最担心的是不稳定，不知道哪一天服务商就关门大吉了。极简图床的就是个例子。经过时间考验有成熟商业模式的可以考虑。

云盘图床、社交网站图床、云笔记图床最担心的是做限制，不知道哪一天这些网站就对外链做限制了。微博图床就是个例子。

自建图床难度系数太高，费时费力。

区块链新型图床尚早，看未来吧。

代码托管网站本身比较稳定安全，可以用来存放个人少量图片。

基于以上分析，建议的图床选择是

之所以选择gitee而没选择github是因为国内访问速度有时候不是很快，影响体验。第三方图床作为备用图床，可以放一些不太重要的图片。github和百度网盘可以作图片的备份，防止数据丢失。

压缩图片

上传图片之前建议压缩一下，可以减少空间使用，并有效加快图片载入速度。比较好的压缩工具如下

图床管理工具

选择好图床后肯定就是上传并使用图片了，这时就会面对一个问题，那就是每次都要去图床上传，然后复制链接，然后回到使用图片的平台粘贴使用。特别麻烦。所以就出现了图床管理工具帮助我们快速上传图片并获取图片URL链接。这样就省去了自己操作的繁琐。

以下是一些优秀的图床管理工具

PicGo很好，但对码云不太好。mac系统可以用uPic，官网有详细的使用手册，支持 smms、 又拍云 USS、七牛云 KODO、 阿里云 OSS、 腾讯云 COS、微博、Github、 Gitee、 Amazon S3、自定义上传接口。而且还可以选择上传前压缩图片。压缩工具都省了。

需要注意：

  1. 图床设置里面注意path的选择，这个就相当于一个相册，如果想把图片存到别的相册就要修改path路径。
  2. 这种方法添加一张图片就要上传一次到码云，会产生很多的提交记录。个人用图片量不大时可以，图片量大的话会有滥用码云的可能，官方可能会采取一些措施。

十二 发布到公众号平台

  • 使用mdnice编辑完成后点击右上角的复制到公众号，然后到公众号粘贴，具体效果可能需要调整一下。mdnice拥有多种主题可切换。

  • 使用OpenWrite

  • 使用135编辑器查看效果，直接在公众号平台看效果也可以。

摘自：
Markdown基本语法
markdown图床

相关推荐：
认识与入门 Markdown
使用 Typora 一次性搞定公众号写作与排版
强推Markdown神器，一秒钟拯救微信公众号排版

nothing

2021/05/12  阅读：201  主题：前端之巅同款

作者介绍

nothing