zoukankan      html  css  js  c++  java
  • Markdown基本语法及生成目录结构的方法

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

    一、标题

    在想要设置为标题的文字前面加#来表示
    一个#是一级标题,二个#是二级标题,以此类推。支持六级标题。

    注:标准语法一般在#后跟个空格再写文字。

    示例:

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

    效果:

    二、字体

    加粗

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

    斜体

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

    斜体加粗

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

    删除线

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

    示例:

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

    效果:

    三、引用

    在引用的文字前加>即可。引用也可以嵌套,如加两个>>三个>>>

    示例:

    > 这是引用的内容1
    >> 这是引用的内容2
    >>> 这是引用的内容3

    效果:

    四、分割线

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

    示例:

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

    效果:

    五、图片

    语法:

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

    示例:

    ![百度](https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png "baidu")

    效果:

    六、超链接

    语法:

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

    示例:

    [百度](http://www.baidu.com "百度")

    效果:

    七、列表

    1.无序列表

    语法:

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

    示例:

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

    效果:

    2.有序列表

    语法:

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

    示例:

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

    效果:

    3.列表嵌套

    语法:

    * 列表1
       * 列表1.1
       * 列表1.2
       * 列表1.3
    * 列表2
       * 列表2.1
       * 列表2.2
       * 列表2.3
    
    上一级和下一级之间敲三个空格即可

    示例:

    * 列表1
       * 列表1.1
       * 列表1.2
       * 列表1.3
    * 列表2
       * 列表2.1
       * 列表2.2
       * 列表2.3

    效果:

    八、表格

    语法:

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

    示例:

    |姓名|年龄|排行|
    |--|:--:|--:|
    甲|25|3
    丙|27|1
    乙|26|2

    效果:

    九、代码

    语法:

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

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

    示例:

    `console.log('单行代码块')`
    ```
    function fun(){
      console.log('多行代码块');
    }
    fun();
    ```

    效果:

    十、流程图

    语法:

    tag=>type: content:>url

    tag就是元素名字,type是这个元素的类型,有6中类型,分别为:

    • start # 开始

    • end # 结束

    • operation # 操作

    • subroutine # 子程序

    • condition # 条件

    • inputoutput # 输入或产出

    url是一个连接,与框框中的文本相绑定,content就是在框框中要写的内容,注意type后的冒号与文本之间一定要有个空格。

    连接元素的语法:

    用->来连接两个元素,需要注意的是condition类型,因为他有yes和no两个分支,所以要写成

    cond(yes)->e 
    cond(no)->op

    示例:

    ```flow
    st=>start: Start
    op=>operation: Your Operation
    cond=>condition: Yes or No?
    e=>end
    st->op->cond
    cond(yes)->e
    cond(no)->op
    ```

    效果:

    十一、markdown生成目录结构的方法:

    示例:

    ```
    project
    │   README.md
    │   file001.txt    
    │
    └───folder1
    │   │   file011.txt
    │   │   file012.txt
    │   │
    │   └───subfolder1
    │       │   file111.txt
    │       │   file112.txt
    │       │   ...
    │   
    └───folder2
        │   file021.txt
        │   file022.txt
    ```

    我们经常会看到上面这种【目录&文件结构】在页面上非常整齐地输出,下面来说一下怎么这种生成目录结构。

    使用一个Node模块来自动完成这个任务:mddir

    1.安装mddir包

    npm install mddir --save

    2.打开终端或命令提示符,并cd进入mddir /src文件夹

    3.执行 node mddir "../../../"

    示例:

    ```
    $ cd ~/Documents/demo-project
    $ pwd
    Users/username/Documents/demo-project
    $ npm install mddir --save
    $ cd node_modules/mddir/src
    $ pwd
    Users/username/Documents/node_modules/mddir/src
    $ ls
    mddir.js
    $ node mddir "../../../"
    // Exports 'directoryList.md' in mddir/src folder
    ```

    如果没有指定路径,mddir将默认为mddir/src文件夹之上上的三个文件夹(假设mddir安装在:project/node_modules/mddir/src中)。

    目前忽略node_modules和.git文件夹。

    示例生成的markdown文件结构'directoryList.md'

        |-- .bowerrc
        |-- .jshintrc
        |-- .jshintrc2
        |-- Gruntfile.js
        |-- README.md
        |-- bower.json
        |-- karma.conf.js
        |-- package.json
        |-- app
            |-- app.js
            |-- db.js
            |-- directoryList.md
            |-- index.html
            |-- mddir.js
            |-- routing.js
            |-- server.js
            |-- _api
                |-- api.groups.js
                |-- api.posts.js
                |-- api.users.js
                |-- api.widgets.js
            |-- _components
                |-- directives
                    |-- directives.module.js
                    |-- vendor
                        |-- directive.draganddrop.js
                |-- helpers
                    |-- helpers.module.js
                    |-- proprietary
                        |-- factory.actionDispatcher.js
                |-- services
                    |-- services.cardTemplates.js
                    |-- services.cards.js
                    |-- services.groups.js
                    |-- services.posts.js
                    |-- services.users.js
                    |-- services.widgets.js
            |-- _mocks
                |-- mocks.groups.js
                |-- mocks.posts.js
                |-- mocks.users.js
                |-- mocks.widgets.js

    参考链接:

    https://www.jianshu.com/p/191d1e21f7ed

    https://www.jianshu.com/p/02a5a1bf1096

    https://vimsky.com/article/3606.html

  • 相关阅读:
    js 中的基本包装类型
    js监听浏览器,关闭,刷新(兼容IE6+,Firefox,Chrome,Safari)
    js 中的 && 与 ||
    程序设计模式的工厂(Factory)模式
    关于MOSS首页不能打开提示“根级别上的数据无效
    获取汉字的拼音的首个字母方法
    XmlDocument扩展类
    初次体验Android,过程很艰辛!
    用Python写个翻译工具
    开发经验是修炼设计模式的基石
  • 原文地址:https://www.cnblogs.com/abc-x/p/13470575.html
Copyright © 2011-2022 走看看