Markdown的入门教程,非常的使用

原文链接:

https://www.jianshu.com/p/20e82ddb37cb

链接地址  点我      粘贴进来的内容竟然没有图片,好气呦

目录



<h2 id="overview">概述</h2>

<h3 id="summary">简介</h3>

Markdown是一种轻量级标记语言,排版语法简洁,让人们更多地关注内容本身而非排版。它使用易读易写的纯文本格式编写文档,可与HTML混编,可导出 HTML、PDF 以及本身的 .md 格式的文件。因简洁、高效、易读、易写,Markdown被大量使用,如Github、Wikipedia等网站,如各大博客平台:WordPress、Drupal、简书等。

<h3 id="doc">官方文档</h3>

Markdown: Syntax

Markdown 语法说明 (简体中文版)

<h3 id="editor">Markdown编辑器</h3>

  • 在线编辑器

    • dillinger——漂亮强大,支持md, html, pdf 文件导出。

      dillinger

    • 简书——非常漂亮的博客平台,可以自动备份,直接拖入图片。

      简书

  • Windows
    • MarkdownPad——一款全功能的编辑器,被很多人称赞为windows 平台最好用的markdown编辑器。

      MarkdownPad

    • MarkPad——开源软件,可以直接在你的博客或者 GitHub 中打开、保存文档,直接将图片粘贴到 Markdown 文档中。

      MarkPad

    • Cmd Markdown——作业部落出品,全平台并支持Web端

      Cmd Markdown

  • Mac
    • Mou——简洁优雅,免费又好用,中文兼容性好。

      Mou

    • Typora——极致简洁,自定义皮肤。

      Typora

    • MacDown——简洁优雅,开源免费。

      MacDown

    • Ulysses——文字写作推荐。

      Ulysses

  • 多平台
    • Atom——github出的编辑器,支持各种编程语言,可装Markdown插件。

    • sublimetext——专业编辑器,支持各种编程语言。

<h2 id="primary">初级语法</h2>

<h3 id="MarkdownHeader">标题</h3>

标题

Markdown 支持两种标题的语法,类 Atx 和类 Setext 形式。

  • Atx(注意#后面有个空格)

      # 一级标题
      ## 二级标题
      ### 三级标题
    
  • Setext(-=数目任意,最好三个及以上,比较直观)
      一级标题
      ======
    
      二级标题
      ------
    

<h3 id="bolditalic">粗体和斜体</h3>

bolditalic

  • 粗体

      **这是粗体**
    
      __这是粗体__
    
  • 斜体
      *这是斜体*
    
      _这是斜体_
    

<h3 id="paragraph">段落和换行</h3>

paragraph

  • 第一种写法(上图的这是第一段),直接敲两个回车键即可

      这是第一段
    
      这是第二段
    
  • 第二种写法(上图的这是第二段),在写完一段后敲两个空格,然后回车写下一段
      这是第二段
      这是第三段
    
  • 第三种写法(上图的这是第三段),在写完一段后用HTML的语法:<br />作为换行,然后写下一段
      这是第三段<br />这是第四段
    
      这是第三段<br />
      这是第四段
    

<h3 id="hr">分隔线</h3>

hr

可以在一行中用三个及以上的星号、减号、等于号、底线来建立分隔线,行内不能有除空格外的其他东西,注意莫被打脸。 (? ? ?)?

***
---
===
___

<h3 id="blockquote">引言</h3>

blockquote

> 我想只用一个 “>” 号来写一个多行的引用,所以在扯鸡巴蛋地码字占空间,好像差不多了吧,嗯嗯~

---

> 还有一种写法就是每一行都用一个 “>” 号
> 这样写比较美观一点

---

> > 另外一种就是嵌套引用,就像我一样,用两个“>”

<h3 id="list">列表</h3>

<h4 id="disorderlist">无序列表</h4>

disorderlist

无序列表可以在每行开头用星号、加号、减号来表示,也可以三者混合一起,推荐使用相同的字符,避免混乱。

* 一朵百合花
* 两朵百合花
* 三朵百合花

<h4 id="sorderlist">有序列表</h4>

orderlist

有序列表用数字接着一个英文句点来表示,数字可无序,但还是推荐使用1.2.,避免混乱。

1. 一朵百合花
2. 两朵百合花
3. 三朵百合花

<h3 id="code">代码</h3>

<h4 id="linecode">行内代码块</h4>

linecode

I am a `code`
I am a `` ` ``

<h4 id="paragraphcode">段落代码块</h4>

paragraphcode

#### 第一种

    int main()
    {
        printf("我是个段落代码块");
        return 0;
    }

另外,可以用三个反引号和语言名,作为标记代码所使用的语言

paragraphcode2

我的 Mou 编辑器不能识别 (ノ▼Д▼)ノ

<h3 id="link">链接</h3>

<h4 id="urllink">网址链接</h4>

urllink

网址链接有两种形式:行内式参考式

不管是哪一种,链接文字都是用 [方括号] 来标记,双引号""title可写可不写。

  • 行内式

      [huihut](https://huihut.github.io/)
    
      [huihut](https://huihut.github.io/ "huihut")
    
      [huihut](https://huihut.github.io/ ‘huihut‘)
    
  • 参考式
    • 一般写法
        [huihut][1]
        [1]: https://huihut.github.io/
  • 隐式链接标记——可省略id,只需要[text]与下面[方括号]内容相同即可
        [Google][]
        [Google]: http://google.com/
  • 拓展

    • 这里的链接辨别标签可以有字母、数字、空白和标点符号,但是并不区分大小写,因此下面两个链接是一样的:

            [text][a]
            [text][A]
      
    • 链接 title 可以用双引号、单引号、圆括号包起来,因此,下面这三种链接的定义都是相同:
            [1]: https://huihut.github.io/  "title"
            [1]: https://huihut.github.io/  ‘title‘
            [1]: https://huihut.github.io/  (title)
      

特别注意:Markdown.pl 1.0.1 会忽略单引号包起来的链接 title

<h4 id="picturelink">图片链接</h4>

picturelink

图片链接与上面的网址链接类似,同样有两种形式:行内式和参考式,只不过图片链接在前面加上一个感叹号!,在此不做累述。

  • 行内式

      ![huihut](http://upload-images.jianshu.io/upload_images/4994492-7dda0710288c0db8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
  • 参考式
      ![谷歌][1]
      [1]: https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png "Google"
    

<h5 id="picturelinksize">指定图片宽高</h5>

  • Markdown 一般不支持指定图片的宽高,若要指定宽高可以使用普通的 <img>标签

      ![](./xxx.png)
    

    如果需要居中可以在外围包围div标签

      <div  align="center">
      ![](xxx.png)
      </div>
    
  • 使用支持指定图片大小的 Markdown 编辑器,如 Mou
      ![](xxx.png =100x100)
    

<h5 id="picturelinkchain">用图床获取外链</h5>

网上有许多图床,这里推荐两个 七牛图床和 极简图床

<h2 id="Advanced">进阶语法</h2>

<h3 id="label">标签</h3>

label

  • 方法一

      title: Markdown 简易入门教程
      date: 2017-01-25 1:45:50
      tags: Markdown
      categories: 技术
    
  • 方法三
      tags:
      - Markdown
      - 语言
      categories:
      - 技术
    
  • 方法三
      tags: [Markdown,语言]
      categories: [技术]
    

<h3 id="content">目录</h3>

  • 方法一

    这种目录其实是用 HTML加 Markdown的链接实现,分为两个部分,目录部分标题部分

    • 目录部分——实质是链接,链接的[地址]填需要跳转到的标题的id属性(自定义)。

        [跳到标题一](#title1)
      
    • 标题部分——实质是HTML的标题标签,标签里面的id属性等于待跳转的目录的[地址]
        <h1 id="title1">标题一</h1>
      
  • 方法二

    content2

    这种方法非常简单,就是直接添加 [TOC],标题1~6样式的内容会被提取出来作为目录,然而有些编辑器不能使用这功能,如 Mou 不能使用。我是在有道云笔记的 Markdown 中截图的。

      [TOC]
    
      # 标题一
      ……
      ## 标题二
      ……
      ### 标题三
    

    这里有个jQuery插件,貌似可以让Markdown生成目录:

    https://github.com/i5ting/i5ting_ztree_toc

<h3 id="table">表格</h3>

table

  • 表格一般这样子写,这应该是最简单的写法了

      id    |   name   |   score
      ---   |   ---    |   ---
      001   |   Mark   |   90
      002   |   Ford   |   80
      003   |   Alan   |   95
    
  • 还有就是对齐了,用:对齐,:写在在---的左边就是左对齐,右边就是右对齐,两边都写就是居中。
      |long_long_id|long_long_name|long_long_score|
      |    ---     |    :---:     |     ---:      |
      |    001     |     Mark     |      90       |
      |    002     |     Ford     |      80       |
      |    003     |     Alan     |      95       |
    

<h3 id="footnote">脚注</h3>

footnote

这是脚注一[^1]

[^1]: 脚注一

<h3 id="formula">公式</h3>

formula

  • 方法一:使用Google Chart

      ![](http://chart.googleapis.com/chart?cht=tx&chl=\Large x=\frac{-b\pm\sqrt{b^2-4ac}}{2a})
    
  • 方法二:使用forkosh
      ![](http://chart.googleapis.com/chart?cht=tx&chl=\Large x=\frac{-b\pm\sqrt{b^2-4ac}}{2a})
    
  • 方法三:使用codecogs
      <a href="https://www.codecogs.com/eqnedit.php?latex=x=\frac{-b\pm&space;\sqrt{b^{2}-4ac}}{2a}" target="_blank">![x=\frac{-b\pm \sqrt{b^{2}-4ac}}{2a}](https://latex.codecogs.com/gif.latex?x=\frac{-b\pm&space;\sqrt{b^{2}-4ac}}{2a})</a>
    
  • 方法四:使用MathJax引擎——先加载脚本<script>,后解析公式。
      <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>
    
      $$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$
    

<h3 id="flowsheet">流程图</h3>

flowsheet

像流程图这种复杂的功能不推荐在 Markdown 中使用,因为很多编辑器都不支持,我使用了几个编辑器都不能生成流程图,所以上图是在为知笔记官方 Markdown 新手指南中找到的。

flowsheetcode

```flow
st=>start: Start
e=>end: End
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes or No?
io=>inputoutput: catch something...
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
```

更多关于流程图的语法说明:

https://github.com/adrai/flowchart.js

<h3 id="sequencemap">序列图</h3>

sequencemap

sequencemapcode

```sequence
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
```

更多关于时序图的语法说明:

https://github.com/bramp/js-sequence-diagrams

<h2 id="others">其他语法</h2>

<h3 id="html">兼容HTML</h3>

html

Markdown 可以和 HTML 混编,甚至可以完全用 HTML 语法来写。要注意在 HTML 标签中的 Markdown 代码是不起作用的。

<font color=‘blue‘ style=‘font-size:30px‘>蓝色</font>

<div>
# HTML 标签里面的 Markdown 语法不起作用
**你看我没有变粗**
</div>

<h3 id="autoescape">特殊字符自动转换</h3>

  • HTML 语法——在 HTML 中所有<&都要转换,包括链接(URL)

    • 用 <表示 <——起始标签
    • 用 &表示 &——标记 HTML 实体
  • Markdown 语法——Markdown 则会自动转换

<h3 id="backslash">反斜杠</h3>

Markdown 可以利用反斜杠来插入一些在语法中有其它意义的符号。如:

*literal asterisks*

可用

\*literal asterisks\*

Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号:

\   反斜线
`   反引号
*   星号
_   底线
{}  花括号
[]  方括号
()  括弧
#   井字号
+   加号
-   减号
.   英文句点
!   惊叹号

<h3 id="autolink">自动链接</h3>

autolink

  • 网址自动链接

      <https://huihut.github.io/>
    
  • 电子邮件自动链接
      <[email protected]outlook.com>
    

<h2 id="reference">参考</h2>

Markdown: Syntax

Markdown 语法说明 (简体中文版)

Markdown——入门指南

Markdown语法手册

好用的Markdown编辑器一览

markdown中插入图片怎么定义图片的大小或比例?

Markdown进阶语法整理

为知笔记 Markdown 新手指南

Markdown中插入数学公式的方法

i5ting/i5ting_ztree_toc

flowchart.js

adrai/flowchart.js

js-sequence-diagrams

bramp/js-sequence-diagrams


作者:huihut
链接:https://www.jianshu.com/p/20e82ddb37cb
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

原文地址:https://www.cnblogs.com/AlvinSui/p/8728714.html

时间: 2024-11-09 02:26:07

Markdown的入门教程,非常的使用的相关文章

《2015最新Android基础入门教程》完结散花~

<2015最新Android基础入门教程>完结散花~ 标签(空格分隔): 反思小结 引言: 从六月底就开始编写这套教程,历时将近五个多月,今天终于写完了,全套教程正文部分148篇, 十大章,从基本UI控件到四大组件,Intent,Fragment,事件处理,数据存储,网络编程,绘图与动画, 多媒体,系统服务等都进行了详细的讲解!代码都是都是在Android Studio上进行编写的,全文 采用Markdown,行文结构清晰,还结合了实际开发中一些常见的问题进行了剖析-由于个人能力的局限, 虽然

Android基础入门教程——0.教程引言与目录

Android基础入门教程--0.教程引言与目录 标签(空格分隔): Android基础入门教程 好吧,先自夸一下: 使用Markdown来写blog,使用Android Studio来开发Android程序, 除了基础讲解,还会结合实际开发中用到的,遇到的进行学习,跟着路线图学习 事半功倍,希望给各位Android初学者带来便利~相信你会慢慢喜欢上这个教程的! 另外该教程除了在csdn上发布外,还可以在w3c菜鸟笔记上发布,当然后者是FK排版 过的,看起来比会比csdn上的好看一些,这里同时感

org-mode入门教程

org-mode 入门教程By Z.H. Fu 切问录 www.fuzihao.org org-mode 入门教程 org-mode是Emacs提供的一个强大的编辑模式,可以用于做会议笔记以及制作各种待办事项(GDT).其语法类似于Markdown但是提供了比Markdown更多的操作,再加上Emacs强大的编辑功能,能给笔记增加很多动态的操作(能纯文本上实现折叠.展开.树状视图.表格求和.求代码运行结果等功能),可以说org-mode是最强大的标记语言.而org-mode的强大,也导致了他比m

专为设计师而写的GitHub快速入门教程

原文出处: Kevin Li 在互联网行业工作的想必都多多少少听说过GitHub的大名,除了是最大的开源项目托管平台,许多企业也都是用GitHub来协同开发工作,当然我 们彩程也是其中之一.笔者最初决定学习Git也是因为在团队内部设计方案初步被开发出来后,难免会有一些细节需要调整,而为了调整几像素的问题再求前端工 程师出马,其实是很影响整体效率的,所以希望通过学习GitHub好在必要的时候直接参与开发,能发挥自己的一点CSS技术以更直接快速的解决问题. 但是期间竟然发现网上无一篇为设计师而备的G

React JS快速入门教程

翻译至官方文档<Tutorial>http://facebook.github.io/react/docs/tutorial.html 转载请注明出处:http://blog.csdn.net/adousen 推荐阅读 React|RakNet 博客:http://blog.csdn.net/rsspub/article/category/1435601 在入门教程里,我们会创建一个简单却实用的评论盒子来作为我们的例子,你可以把它放进一个博客什么的.它实际上就是Disqus.LiveFyre.

github快速入门教程以及搭建个人博客网站

一:下载github 二:安装GitHub 下载之后点击 进行安装过程,安装之后桌面上会有两个图标,如下图 三:新建项目 GitHub是图形界面模式,Git Shell是命令行模式,在Windows系统下我们使用GitHub进行代码管理.1:打开GitHub图形界面,输入用户名密码或注册新账号,如下图: 2:登录之后新建项目 点击左上角 进行新建项目,如下图所示: 新建之后如下图所示: 在电脑上查找刚才所选择的路径,会发现在该路径下会新建一个"Temp"文件夹,如下图所示: 点击软件右

markdown 光速入门

markdown .md文件后缀名 就是最近非常火的markdown.这是一款专门用于一些文档书写的文件,非常好用~~ 废话不多说,都说是光速入门,3分钟看完帖子. 标题  #符号  #符号越多,字体越小   例 # markdown 就是常见的标题1.  ## markdown  就是标题2. 代码  ~~~符号  一段代码包含在 ~~~ 之间(代码部分) ~~~ 即可实现代码效果.  例~~~javascript  var a  = function() {}; ~~~  这里加javasc

&lt;zz&gt;bower入门教程

from http://www.cnblogs.com/xiaokai0203/p/5891927.html bower入门教程 什么是bower Bower是一个客户端技术的软件包管理器,它可用于搜索.安装和卸载如JavaScript.HTML.CSS之类的网络资源.其他一些建立在Bower基础之上的开发工具,如YeoMan和Grunt,这个会在以后的文章中介绍. 准备工作 安装node环境:node.js 安装Git,bower从远程git仓库获取代码包:git简易指南 安装bower 使用

【转载】GBDT(MART) 迭代决策树入门教程 | 简介

      转载地址:http://blog.csdn.net/w28971023/article/details/8240756        GBDT(Gradient Boosting Decision Tree) 又叫 MART(Multiple Additive Regression Tree),是一种迭代的决策树算法,该算法由多棵决策树组成,所有树的结论累加起来做最终答案.它在被提出之初就和SVM一起被认为是泛化能力(generalization)较强的算法.近些年更因为被用于搜索排