• markdown语法测试集合


    这篇文章包含markdown语法基本的内容, 目的是放在自己的博客园上, 通过开发者控制台快速选中,
    从而自定义自己博客园markdown样式.当然本文也可以当markdown语法学习之用.

    在markdown里强制换行是在末尾添加2个空格+1个回车.
    在markdown里可以使用对特殊符号进行转义.

    1. 标题

    语法

    # This is an <h1> tag
    ## This is an <h2> tag
    ### This is an <h3> tag
    #### This is an <h4> tag
    

    实例

    This is an h1 tag

    This is an h2 tag

    This is an h3 tag

    This is an h4 tag

    2. 强调和斜体

    语法

    *This text will be italic*
    _This will also be italic_
    
    **This text will be bold**
    __This will also be bold__
    

    (个人不喜欢2个下划线中间包含的内容被斜体, 会和网址冲突, 我会在自定义博客园样式中去除这个样式.)

    实例

    This text will not be italic
    This will also not be italic

    This text will be bold
    This will also be bold

    3. 有序列表和无序列表

    语法

    * Item 1
    * Item 2
    * Item 3
    
    1. Item 1
    2. Item 2
    3. Item 3
    

    实例

    • Item 1
    • Item 2
    • Item 3
    1. Item 1
    2. Item 2
    3. Item 3

    4. 图片

    语法

    ![img-name](img-url)
    

    实例

    图片测试

    5. 超链接

    语法

    [link-name](link-url)
    

    实例

    阿胜4K

    6. 引用

    语法

    > 引用本意是引用别人的话之类  
    > 但我个人喜欢把引用当成"注意"使用  
    

    实例

    If you please draw me a sheep!
    不想当将军的士兵, 不是好士兵.

    7. 单行代码

    语法

    `This is an inline code.`
    

    实例

    同样的单行代码, 我经常用来显示特殊名词

    8. 多行代码

    语法

    ​```javascript
    for (var i=0; i<100; i++) {
        console.log("hello world" + i);
    }
    ​```
    

    实例

    for (var i=0; i<100; i++) {
        console.log("hello world" + i);
    }
    

    也可以通过缩进来显示代码, 下面是示例:

    console.loe("Hello_World");
    

    本人样式参考

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>Page title</title>
    </head>
    <body>
    	
    </body>
    </html>
    
    /*
        这是我应用在博客园上的Markdown样式.
        https://www.cnblogs.com/asheng2016
    */
    
    
    /* 文章标题样式(这个不是markdown里的标题) */
    #topics .postTitle a {
        color: #169fe6;
    }
    
    /* 普通文字样式 */
    #cnblogs_post_body p {
        margin: 18px auto;
        color: #000;
        font-family: Consolas, "Microsoft YaHei", monospace;
        font-size: 16px;
        text-indent: 0;
    }
    
    /* 标题样式 */
    #cnblogs_post_body h1 {
        font-family: Consolas, "Microsoft YaHei", monospace;
        font-size: 32px;
        font-weight: bold;
        line-height: 1.5;
        margin: 10px 0;
    }
    
    #cnblogs_post_body h2 {
        font-family: Consolas, "Microsoft YaHei", monospace;
        font-size: 26px;
        font-weight: bold;
        line-height: 1.5;
        margin: 20px 0;
    }
    
    #cnblogs_post_body h3 {
        font-family: Consolas, "Microsoft YaHei", monospace;
        font-size: 20px;
        font-weight: bold;
        line-height: 1.5;
        margin: 10px 0;
    }
    
    #cnblogs_post_body h4 {
        font-family: Consolas, "Microsoft YaHei", monospace;
        font-size: 18px;
        font-weight: bold;
        margin: 10px 0;
    }
    /* 标题样式设置结束 */
    
    /* 去除双下划线斜体样式 */
    em {
        font-style: normal;
        color: #000;
    }
    
    /* 无序列表 */
    #cnblogs_post_body ul li {
        font-family: Consolas, "Microsoft YaHei", monospace;
        color: #000;
        font-size: 16px;
        list-style-type: disc;
    }
    
    /* 有序列表 */
    #cnblogs_post_body ol li {
        font-family: Consolas, "Microsoft YaHei", monospace;
        color: #000;
        font-size: 16px;
        list-style-type: decimal;
    }
    
    /* 超链接 */
    #cnblogs_post_body a:link {
        text-decoration: none;
        color: #002C99;
    }
    
    /* 引用背景 */
    #topics .postBody blockquote {
        background: #fff3d4;
        border: none;
        border-left: 5px solid #f6b73c;
        margin: 0;
        padding-left: 10px;
    }
    
    /* 单行代码 */
    .cnblogs-markdown code {
        font-family: Consolas, "Microsoft YaHei", monospace !important;
        font-size: 16px!important;
        line-height: 20px;
        background-color: #f5f5f5!important;
        border: 1px solid #ccc!important;
        padding: 0 5px!important;
        border-radius: 3px!important;
        line-height: 1.8;
        margin: 1px 5px;
        vertical-align: middle;
        display: inline-block;
    }
    
    /* 多行代码, 引用 */
    .cnblogs-markdown .hljs {
        font-family: Consolas, "Microsoft YaHei", monospace !important;
        font-size: 16px!important;
        line-height: 1.5!important;
        padding: 5px!important;
    }
    

    参考链接

    本文的markdown源代码在这里
    https://guides.github.com/features/mastering-markdown/
    https://help.github.com/articles/basic-writing-and-formatting-syntax/

    自定义博客园Markdown样式.超简单!
    https://www.cnblogs.com/asheng2016/p/7464296.html

  • 相关阅读:
    如何写成高性能的代码(三):巧用稀疏矩阵节省内存占用
    电子表格也能做购物车?简单三步就能实现
    数据可视化分析之新技能——魔数图
    Spring Boot框架下实现Excel服务端导入导出
    不只是负载均衡,活字格智能集群的架构与搭建方案
    React + Springboot + Quartz,从0实现Excel报表自动化
    基于纯前端类Excel表格控件实现在线损益表应用
    一篇解决 —— 报税系统的分析与解决方案
    万物皆可集成系列:低代码通过Web API对接百度AI服务
    数据可视化大屏酷炫秘籍之前端开发者自己动手
  • 原文地址:https://www.cnblogs.com/asheng2016/p/7462731.html
Copyright © 2020-2023  润新知