美文网首页干货邦苹果产品之美Macbook,iphone,ios 及其他Markdown
【Mac流派】程序猿修炼之道(4)-技能篇之Markdown(附

【Mac流派】程序猿修炼之道(4)-技能篇之Markdown(附

作者: 代码咖啡 | 来源:发表于2016-09-16 22:10 被阅读2597次

我叫程序猿,于公元2013年9月1日被一股洪荒之力推入一个名叫挨踢圈的巨坑,从此开始了我的程序猿修炼之道。前一篇章的生存篇系列,我们讲到了使用Markdown在简书上写博客 ,这一章节,我们来讲讲Markdown该如何写。好的,现在我们开始Level 4的升级之路!

标题

标题可根据字体的大小分为六个级别,分别用若干个#表示。

【效果】

这是一级标题

这是二级标题

这是三级标题

这是四级标题

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

【输入】

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

我们也可以使用这样的形式来显示一级标题和二级标题:

【效果】
这是一个一级标题
============================
这是一个二级标题


【输入】

这是一个一级标题
============================
这是一个二级标题
--------------------------------------------------

文本

文本的显示形式可分为粗体、斜体两种,通过在文本前后输入若干个*

【效果】
这是粗体
这是斜体
这是斜体+粗体

【输入】

**这是粗体**
*这是斜体*
***这是斜体+粗体***

图片

图片的输入语法为:
![图片内容](图片链接)

【效果】

我的简书个人主页

【输入】

![我的简书个人主页](http:https://img.haomeiwen.com/i291600/f1aa74cf4c14c6c0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

注意:这里的![]()均为英文输入法,且简书平台Markdown编辑器只要将图片文件拖入输入区域,即可生成Markdown文本,猿猿们只要修改描述图片的文本即可。

如果输入的图片链接找不到图片,其效果为:

动图效果

【输入】

![动图效果](http:https://img.haomeiwen.com/i291600/3b00271942fef854.gif?imageMogr2/auto-orient/strip)

链接

链接的语法与图片类似,只要在图片的基础上去掉!即可。

【效果】

这个是简书平台的链接

【输入】

[这个是简书平台的链接](http://jianshu.com)

列表

列表可分为有序列表无序列表

无序列表可通过在每行文本前输入*+-来实现。

【效果】

  • 星号实现的列表
  • 记得符号与文本之间有一个空格
  • 减号实现的列表
  • 加号实现的列表

【输入】

* **星号**实现的列表
* 记得符号与文本之间有一个**空格**
- **减号**实现的列表
+ **加号**实现的列表

有序列表可通过在每行文本前面输入数字+.+空格来实现。

【效果】

  1. 第一行
    这是第一行的内容
  2. 第二行
    这是第二行的内容
  3. 第三行
    这是第三行的内容
    我是占位行
  4. 第四行
    这是第四行的内容

【输入】

1. 第一行
这是第一行的内容
2. 第二行
这是第二行的内容
3. 第三行
这是第三行的内容
我是占位行
4. 第四行
这是第四行的内容

引用

引用即我们文章中摘抄他人文章中写的内容,其可以通过 >来实现。

【效果】

这是一段引用文章的文字,此处省略1000字。。。

【输入】

> 这是一段引用文章的文字,此处省略1000字。。。

PS: 因引用文本底色与简书默认文本底色色差明显,所以本猿以引用作为文章段落的标题以明显区分文章不同部分,纯属个人习惯

行内代码块

行内代码块可用于关键字词,将其与普通文本区分开来,其用法为在文字内容开始与结尾添加"`"。

【效果】

这是行内代码块

【输入】

`这是行内代码块`

代码块

代码块实则为行内代码快的扩展,用于将多行代码或文本内容与其他文本内容区分开来,其效果如下:

【效果】

    public int add(int a, int b) {
        return a + b;
    }

【插入】

实际输入为每一行代码前面加上4个Tab键或8个空格键。

注意:简书的Markdown环境下,多行代码前需留出一个空行才能显示效果!

加强代码块

加强代码块是代码块的增强版,省去了多行代码每行输入Tab键的烦恼,只要在多行代码的开始和结尾输入"```"即可。

【效果】

public int add(int a, int b) {
    return a + b;
}

【输入】

public int add(int a, int b) {
return a + b;
}
// 因为结尾的三个在代码框里不好输入,在`之间用空格隔开,实际没有空格


> **表格**

表格的语法主要用到的符号为`|`、`-`、`:`,我们先来看看效果:

【效果】

|默认|居中|左对齐|右对齐|
|--|:-:|:-|-:|
|换行\n换行失败|简书Markdown|不支持|换行|
|*支持斜体*|**粗体**|***斜体+粗体***||
|# 不支持标题|[支持链接](http://jianshu.com)|![支持图片](http://img1.imgtn.bdimg.com/it/u=627177226,2113594557&fm=15&gp=0.jpg)|`支持行内代码块` |

【输入】

默认 居中 左对齐 右对齐
换行\n换行失败 简书Markdown 不支持 换行
支持斜体 粗体 斜体+粗体
# 不支持标题 支持链接 支持图片支持图片 支持行内代码块

猿猿们可以看到,表格的第一行默认为粗体居中,表格的其他语法,大家看【输入】+实际操作自己体会吧!

> **删除线**

对于线的显示,Markdown也提供了支持,包括:

【效果】

~~删除线~~

【输入】

删除线



以上是本猿针对最最基本的Markdown用法对其进行了罗列,当然猿猿们也可以在其他平台上看到Markdown更加高阶的用法,如:[cmd Markdown](https://www.zybuluo.com/mdeditor?url=https://www.zybuluo.com/static/editor/md-help.markdown#fn:footnote)对原声Markdown进行了更进一步的封装和扩展,可支持LaTex、Todo列表、Toc目录、Mermaid 序列图等,Markdown是一个很有意思的工具,感兴趣的猿猿们可以进行更进一步的探索!

> **分割线**

分割线可使用`*`、`-`来实现。

【效果】

---
***

【输入】



**以上是程序猿系列技能篇之Markdown的全部内容,感谢各位猿猿的阅读!**

***PS: 程序猿小品文系列持续更新,欢迎大家关注!***

---

> **附录一 Markdown工具**

Markdown工具可分为**在线**和**客户端**两种,接下来本猿带领大家来看看Mac端Markdown熟悉工具。

**【在线】**

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

![图片来自简书](http:https://img.haomeiwen.com/i291600/486b29859e021c70.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

猿猿们,如果你写**简书**还没有用过**Markdown**,本猿强烈推荐你尝试一下,相信你会爱上它的,正如我之前提到过的,Markdown让我放下了CSDN、Lofter的博客平台,提高了我写文章的速度和频率,让我从此痴迷其中!

**简书**设置Markdown编辑器方法如下:

![图片来自简书](http:https://img.haomeiwen.com/i291600/89e5fc65cf97ad71.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

点击齿轮图标,进入设置;

![图片来自简书](http:https://img.haomeiwen.com/i291600/6248d4b5443b6901.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

选择**基础设置**选项,在下方**选择常用的编辑器**选择`Markdown`,然后点击`保存`按钮即可;

![图片来自简书](http:https://img.haomeiwen.com/i291600/cc0bf1c046d4b055.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**简书Markdown**可支持实时预览,这个功能带来了非常棒的用户体验,就好比刚开始学习Html的猿猿们,每输入一个字符都感觉自己完成了一项成就,***赞!***

***[作业部落](https://www.zybuluo.com)***

![图片来自作业部落](http:https://img.haomeiwen.com/i291600/db35a832a1ecd54c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**作业部落**这个名字乍一听,有点学生气,有点小学时候用的错题本的感觉,但是其功能是非常强大的,**支持实时预览**,对Markdown进行了非常**完美的封装**,正如它说的“**Cmd Markdown是世界上最好的Markdown语言**”,用这句话形容它应该是不为过的,我们来看一下:

它支持

  1. Todo列表
  2. LaTex公式
  3. 简易流程图
  4. 序列图
  5. 甘特图
  6. TOC目录
  7. 标签分类
  8. 注脚
  9. Mermaid 流程图
  10. Mermaid 序列图
  11. 定义型列表
  12. 内嵌图标

可以说,使用Cmd Markdown完成一篇比较专业的学术论文是没问题的。本猿的Markdown语法就是从这里开始起步的,但是它有一个致命的缺点,就是:

**它太完美了,像毒品一样给人致命的依赖,导致一旦转移到其他Markdown平台,用户有一种`攀过五岳,从此看其他山都是平地`的感觉。**

正因为它封装地太多,在其他Markdown平台,一些功能用不了,所以本猿丢弃了这个***毒品***,转向更具有普适性的**简书Markdown**。

PS: 作业部落同时支持客户端,在线同步,可离线保存。

***[马克飞象](https://maxiang.io)***

![图片来自马克飞象](http:https://img.haomeiwen.com/i291600/7299bfc2163bb81a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

如果你是**印象笔记**迷,那么**马克飞象**可以说是你的福音了,它支持将文本存到印象笔记,且功能特性与**作业部落**无几,但是有一点让人遗憾的是:

***马克飞象是一款收费软件,在10天的试用期结束后,只有通过收费才能继续使用!***

![图片来自马克飞象客户端](http:https://img.haomeiwen.com/i291600/22e4e4b56b70be34.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

PS:同**作业部落**一样,**马克飞象**也支持客户端,支持本地缓存。

***[有道云笔记](http://note.youdao.com)***

![图片来自有道云笔记](http:https://img.haomeiwen.com/i291600/ece80fd826efb38f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

或许你听惯了**有道词典**,这个八竿子打不着的**词典**与**Markdown**突然有一天走到一起产生了爱情的火花,诞生出了**有道云笔记**,想想就感觉像***吉利收购了沃尔沃***,再高端的东西被低端拿下了后多少印象分会大打折扣。

![图片来自有道云笔记](http:https://img.haomeiwen.com/i291600/b9e1cf6d891de5b5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

是的!你没看错,这就是有道云笔记,不得不说,**有道**支持**Markdown**确实吸引了不少路人粉。

![图片来自有道云笔记](http:https://img.haomeiwen.com/i291600/2db580ea7b5f9563.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

有一个功能有道云笔记做的确实不错,就是可以**将自己的笔记发布到网上,他人可以像浏览网页一样查看自己的记录**。

***[小书匠](http://soft.xiaoshujiang.com)***

![图片来自小书匠](http:https://img.haomeiwen.com/i291600/264af054aaa12c24.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**小书匠**是一款内容丰富的个性化Markdown编辑工具,为什么说它个性化呢?我们来看看它的功能:

支持:

  1. 全屏预览
  2. 实时可获取html代码
  3. 自定义CSS样式
  4. 多方式预览:普通预览、ppt预览、pdf预览
  5. 多种预览排版方式:上、下、左、右、浮动
  6. 内容可以标题为节点隐藏
  7. 映射关系
    8 大纲查看,自动生成目录

![图片来自小书匠](http:https://img.haomeiwen.com/i291600/902c6f72b766a08c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**土豪金**配上**经典黑**就足以闪瞎我们凡人的双眸,高逼格、高内涵、~~高血压~~高品质的Markdown编辑器,你值得拥有!

PS:这里强调一下:**小书匠支持windows、Linux、Mac、Web多端编辑!**

**【客户端】**

除了以上同时支持客户端的在线Markdown编辑器外,我们来说说其他的客户端Markdown编辑器。

***[Mou](http://25.io/mou/)***

![图片来自Mou](http:https://img.haomeiwen.com/i291600/6fccd4a7583f4bef.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**Mou**是本猿尝试的第一款Markdown客户端软件,支持最基本的Markdown语法,界面简洁。因其主题风格不是很心仪,后来本猿将它Kill掉了-_-#,但这并不影响Markdown迷们对它的喜爱!

***[MacDown](http://macdown.uranusjr.com)***

![图片来自MacDown](http:https://img.haomeiwen.com/i291600/9f3ecabdc091dce1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**MacDown**是本猿使用Markdown编辑器以来用的最久的一款,其主题样式和预览效果都还是不错的,重要的是:它**开源*免费***,***免费***,***免费***,***免费!***

但是它有一个不足,就是:一个窗口只能打开一个文件,这就显得比较鸡肋了,后来本猿又将MacDown杀掉了-_-||

***[Atom](https://atom.io)***

![图片来自Atom](http:https://img.haomeiwen.com/i291600/ead6377370329138.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**Atom**是一款很强大比较成熟稳定的一款Markdown编辑器,支持多文件显示,文件目录缩进,有丰富的插件,其插件的下载方式为:

Preferences->install->想要插件的名称->搜索->下载


然后重启Atom即可,目前本猿正在使用这款APP。

***[Sublime](http://www.sublimetext.com)***

![图片来自Sublime](http:https://img.haomeiwen.com/i291600/fdfb0c42a819590b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**Sublime**是一款通用型编辑器。**如果说Atom是17世纪的物理牛顿,那么Sublime就是15世纪的全能达芬奇。**之所以提到Sublime,是因为Sublime支持Markdown**插件**,通过安装下载,Sublime也同样可以实现Markdown编辑器的效果,但是它的预览还是挺鸡肋的,它只能像Html一样,在浏览器中预览,而且**不支持实时预览**。但是毕竟是老牌编辑器,强大的通用性让其在编辑器领域鹤立鸡群。

PS: 本文Markdown工具推荐借鉴自:[好用的Markdown编辑器一览](http://www.williamlong.info/archives/4319.html),其中还包括windows端和Linux端的工具推荐,感兴趣可以看一下!

以上就是本猿对Markdown浏览器的推荐,上述每一张图片(除了Mou)都是都是本猿重新安装APP后截图得到的。嗯!非常实诚的笔者,如今已不多见了,本猿被自己感动到了-_-||

**如果猿猿们觉得这篇文章有用,请戳一戳文章下方的*喜欢*,*感谢大家的阅读!***

*上一篇*
[【Mac流派】程序猿修炼之道(3)-生存进阶篇](http://www.jianshu.com/p/c29e6c54b700)
*下一篇*
[【Mac流派】程序猿修炼之道(5)-生存高阶篇](http://www.jianshu.com/p/5ce8acd00b2a)

相关文章

网友评论

  • eed142605d40:这些app都不能把直接拖入图片,要么就得收费,博主是怎么做的?使用图床?求推荐一个简单方便的插图技巧
    代码咖啡: @Chant_bd3c 互访啊😄
    eed142605d40:@代码咖啡 感谢博主回复,我发现了一个好东西,MWeb可以做到直接拖入图片,¥98,但是它还有免费的lite版。虽然有些bug,但是还是很不错的。我已经靠着博主的文章和各种教程😂搭好并开始使用我的[个人博客](http://chant00.com/2017/06/06/%E5%9C%A8hexo%E5%8D%9A%E5%AE%A2%E4%B8%AD%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%87%EF%BC%8C%E9%9F%B3%E4%B9%90%EF%BC%8C%E8%A7%86%E5%B1%8F%EF%BC%8C%E5%85%AC%E5%BC%8F/)
    代码咖啡:@Chant_bd3c 在简书上创建一片文章,专门用来放图片,图片拖入简书,复制图片链接即可。
  • 像最初:学习了!
  • 24K纯帅豆:我是来拆你台的 :smirk: :smirk: :smirk:
    http://sspai.com/25137
    代码咖啡:@24K纯帅豆 :joy: 你够了

本文标题:【Mac流派】程序猿修炼之道(4)-技能篇之Markdown(附

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