美文网首页
Markdown 学习笔记·入门

Markdown 学习笔记·入门

作者: fantasykai | 来源:发表于2016-08-18 20:10 被阅读82次

    Markdown 学习笔记·入门

    花一点点时间了解了下Markdown的语法,确实非常简单,这里做下总结,也算是对Markdown语法的熟悉,及模仿造轮子吧~

    markdown 简介

    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。
    Markdown具有一系列衍生版本,用于扩展Markdown的功能(如表格、脚注、内嵌HTML等等),这些功能原初的Markdown尚不具备,它们能让Markdown转换成更多的格式,例如LaTeX,Docbook。Markdown增强版中比较有名的有Markdown Extra、MultiMarkdown、 Maruku等。这些衍生版本要么基于工具,如Pandoc;要么基于网站,如GitHub和Wikipedia,在语法上基本兼容,但在一些语法和渲染效果上有改动。--百度百科

    特点总结

    • 纯文本,所以兼容性极强,可以用所有文本编辑器打开。
    • 让你专注于文字而不是排版。
    • 格式转换方便,Markdown 的文本你可以轻松转换为 html、电子书等。
    • Markdown 的标记语法有极好的可读性。

    Markdown 语法介绍

    基本符号

    • *,-,+ 3个符号 被称为Markdown符号
    • 空白行表示另起一个段落
    • `是表示inline代码,tab是用来标记 代码段,分别对应html的code,pre标签

    标题

    • # + 空格 后面的文字即表示为标题

        # 表示一级标题,## 表示二级标题,依次表示 1-6 级标题
      
    • 注意: 符号后面要加一个 空格 和文本内容隔开

    • 还可以在文字下行加= 表示大标题 - 表示小标题 慎用吧

        例如:
        大标题
        =
        小标题
        -
      

    字体:斜体 / 加粗

    *文本* 表示文本内容为斜体, **文本** 表示文本内容为斜体
    
    • 效果: 斜体文本 加粗文本

    换行

    • 段落间加一个 空白行 分割 同html中的 <p>
    • 连续两个空格即为换行 同html中的 <br>

    列表

    • 使用*,+,-加上一个空格来表示

    • 可以支持嵌套,如

        *,+,-效果一样的
        - 外层列表项目
              + 内层列表项目
             + 内层无序列表项目
            + 内层列表项目
        - 外层列表项目
      
    • 效果


    • 外层列表项目
      • 内层列表项目
      • 内层列表项目
      • 内层列表项目
    • 外层列表项目

    • 有序列表用 数字+英文点+空格来表示

        - 1. 这样会展示序号 
      
    • 效果:

      1. 这样会展示序号
    • 注意:列表内容很长的,不需要手工输入换行符,css控制段落的宽度,会自动的缩放的

    链接

    • 这其实是我第一个接触的markdown语法,第一篇资料收集时就用到了

         直接使用 [文本](链接)
      
    • 效果:百度

         如果很多地方需要相同的url呢,可以预先定义url 这样玩:[ref_name]:URL  ref_name 一般使用数字表示,显得专业 然后在需要使用链接的地方 使用[文本][ref_name] 这种方式即可,酷炫
      
    • 效果
      [1]:https://www.baidu.com/

          [ref_name]:url 如: [1]:https://www.baidu.com/ 
      
    • 引用上面定义的url [百度][1]

    • 如果想把URL展示出来,并可以作为链接使用 这样玩:<URL>

          <url> 如: <https://www.baidu.com/> 
      
    • 效果:https://www.baidu.com/

    图片

    • 图片语法与链接类似

        ![](图片地址) 如: ![](http://i.imgur.com/P7ACmyM.png)
      
    • 同样可以使用引用的方式使用图片

        这样定义:[id]:图片url  这样引用定义 ![][id]
      
    • 定义图片的大小或比例

    • 方法一:嵌入HTML代码

            <img src="./xxx.png" width = "300" height = "200" alt="图片名称" align=center /> 注意:要居中展示,外围加<div>即可
      
    • 方法二:使用支持图片大小更改操作的 Mou 编辑器 (mac可以玩)

             ![](url =100x100) 注意: =前有个空格,可以只写宽度。         
      
    • 方法三: 阿里云的OSS,七牛云的图片服务器时,url上加上相关操字段即可实现图片大小,比例修改,具体见各自的产品文档~

    引用

    • 开篇关于Markdown的简介和特点就是引用的百度, 只要在第一行加上 “>”和一个空格,表示代码引用,还可以嵌套

    转义

    • 使用 \ 来转义,表示文本中的markdown符号

        如: \[百度](https://www.baidu.com/)
      
    • 效果:[百度](https://www.baidu.com/)

    表格

    • 表格代码

    | 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

    代码块

    • 按下Tab键 或4个空格即表示代码块
        C#:
    
        //这里显示一些代码,在正文显示中会自动识别语言,进行代码染色,这是一段C#代码
        public class Blog
        {
             public int Id { get; set; }
             public string Subject { get; set; }
        }
    

    这样基本就可以玩起来了,还是需要多实践,多谢,多总结。

    我们活在各自的的心灵世界,我们有什么样的心,就决定我们看到什么样的世界

    相关文章

      网友评论

          本文标题:Markdown 学习笔记·入门

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