Markdown的使用学习

Markdown字体颜色大小设置

    • 一、更改字体、颜色、大小
      • 1、Markdown语法
      • 2、一些常用颜色
      • 3、文字底色
    • 二、some tips
      • 1、强调
      • 2、放大加粗字体(类似于标题)
      • 3、分割线
      • 4、文章转载
      • 5、文字加上粉色矩形框
    • 附录:颜色列表

一、更改字体、颜色、大小

1、Markdown语法

黑体字
微软雅黑
华文彩云
蓝色
绿色
红色
尺寸

  
  
    
    
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
黑体,绿色,尺寸为5(任意内容)

  
  
    
    
    
    
  • 1

效果如下
黑体字
微软雅黑
华文彩云
蓝色
绿色
红色
尺寸
黑体,绿色,尺寸为5(任意内容)


    如果不需要改变输入内容的其他属性,比如加粗,斜体等,可以在内容前面加上即可。例如语句

    某一种绿色

    效果如下:某一种绿色

    2、一些常用颜色

    color=NavajoWhite
    color=Feldspar
    color=SandyBrown
    color=LightSalmon
    color=Salmon
    color=LightCoral

    color=Pink
    color=PaleVioletRed
    color=HotPink

    color=silver
    color=LightSlateGray
    color=SlateGray
    color=grey
    color=RosyBrown
    color=maroon

    color=DarkSeaGreen
    color=LightSeaGreen
    color=SeaGreen

    color=PowderBlue
    color=LightSteelBlue
    color=CadetBlue
    color=navy

    color=Thistle
    color=Plum
    color=MediumPurple
    color=Purple


      3、文字底色

      借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色。将那一整行看作一个表格,更改整个格子的背景色(bgcolor)。

      Markdown语法:

      这里的背景色是:DarkSeaGreen,此处输入任意想输入的内容
      • 1

      现象:

      这里的背景色是:DarkSeaGreen,此处输入任意想输入的内容
      这里的背景色是:Beige,此处输入任意想输入的内容
      这里的背景色是:MistyRose,此处输入任意想输入的内容
      这里的背景色是:MistyRose,此处输入任意想输入的内容

      二、some tips

      1、强调

      *号或者_都可以,单个是斜体,双个是加粗。

      **凡有所学,皆成性格。**
      __凡有所学,皆成性格。__
      

      凡有所学,皆成性格。
      凡有所学,皆成性格。

      • 1
      • 2
      • 3
      • 4
      • 5

      凡有所学,皆成性格。
      凡有所学,皆成性格。
      凡有所学,皆成性格。
      凡有所学,皆成性格。

      2、放大加粗字体(类似于标题)

      Markdown语法

      想要放大的字体

      //h后面数字越大,字体越小

      想要放大的字体

      想要放大的字体

      想要放大的字体

      想要放大的字体
      • 1
      • 2
      • 3
      • 4
      • 5

      效果如下:

      在这里插入图片描述

      3、分割线

      简单直接的方法:三个及以上-_*,必须单独一行,可含空格

      ---
      ***
      ___
      
       
       
         
         
         
         
      • 1
      • 2
      • 3

      效果如下:




      Markdown语法


        • 1

      效果如下


        如果想自带标号(1,2,3等):
        Markdown语法


        1. 想输入的内容①
        2. 想输入的内容②
        3. 想输入的内容③
          • 1
          • 2
          • 3

        效果如下:


        1. 想输入的内容①
        2. 想输入的内容②
        3. 想输入的内容③

        4、文章转载

        • Markdown语法
        文章作者(任意想输入的汉字), 转载文章的名称
        
         
         
           
           
           
           
        • 1

        效果如下:

        Ω snow , 单片机学习(3)——数码管的显示+定时器+中断 ↩

        • 如果想加上↩,Markdown语法 如下:
        文章作者(任意想输入的汉字), 转载文章的名称 
         
         
           
           
           
           
        • 1

        效果如下:

        Ω snow , 单片机学习(3)——数码管的显示+定时器+中断 ↩

        • 结合加上横线,文章转载。Markdown语法
          
        
         
         
           
           
           
           
        • 1
        • 2
        • 3
        • 4

        效果如下:


        1. 文章作者1(任意想输入的汉字), 转载文章的名称. ↩
        2. 文章作者2, 文章名称 ↩
        3. 文章作者3, 文章名称 ↩

        如果想继续增加标号,只需要重复这一段代码即可:

      1. 文章作者3, 文章名称
        • 1

        5、文字加上粉色矩形框

        给文字或者代码加上粉色矩形框算是我本人写博客时比较偏爱的一种方式啦,尤其是在一堆文字里写上一句代码时,或者特地突出哪句话时,加上粉色矩形框就比较nice了,既能起到突出强调的作用,方便阅读,并且也比较美观(相比较黄色的高亮好太多了~)!

        首先输入模式改成英文的,然后 用两个反单引号`包裹需要粉色高亮的字体即可。反单引号在键盘的左上角,ESC键下方,Tab键上方。具体位置如下图:

        在这里插入图片描述

        附录:颜色列表

        附上转载自 CSDN-markdown编辑器语法——字体、字号与颜色 的颜色列表,按颜色名排序。

        颜色名 十六进制颜色值 颜色
        AliceBlue #F0F8FF rgb(240, 248, 255)
        AntiqueWhite #FAEBD7 rgb(250, 235, 215)
        Aqua #00FFFF rgb(0, 255, 255)
        Aquamarine #7FFFD4 rgb(127, 255, 212)
        Azure #F0FFFF rgb(240, 255, 255)
        Beige #F5F5DC rgb(245, 245, 220)
        Bisque #FFE4C4 rgb(255, 228, 196)
        Black #000000 rgb(0, 0, 0)
        BlanchedAlmond #FFEBCD rgb(255, 235, 205)
        Blue #0000FF rgb(0, 0, 255)
        BlueViolet #8A2BE2 rgb(138, 43, 226)
        Brown #A52A2A rgb(165, 42, 42)
        BurlyWood #DEB887 rgb(222, 184, 135)
        CadetBlue #5F9EA0 rgb(95, 158, 160)
        Chartreuse #7FFF00 rgb(127, 255, 0)
        Chocolate #D2691E rgb(210, 105, 30)
        Coral #FF7F50 rgb(255, 127, 80)
        CornflowerBlue #6495ED rgb(100, 149, 237)
        Cornsilk #FFF8DC rgb(255, 248, 220)
        Crimson #DC143C rgb(220, 20, 60)
        Cyan #00FFFF rgb(0, 255, 255)
        DarkBlue #00008B rgb(0, 0, 139)
        DarkCyan #008B8B rgb(0, 139, 139)
        DarkGoldenRod #B8860B rgb(184, 134, 11)
        DarkGray #A9A9A9 rgb(169, 169, 169)
        DarkGreen #006400 rgb(0, 100, 0)
        DarkKhaki #BDB76B rgb(189, 183, 107)
        DarkMagenta #8B008B rgb(139, 0, 139)
        DarkOliveGreen #556B2F rgb(85, 107, 47)
        Darkorange #FF8C00 rgb(255, 140, 0)
        DarkOrchid #9932CC rgb(153, 50, 204)
        DarkRed #8B0000 rgb(139, 0, 0)
        DarkSalmon #E9967A rgb(233, 150, 122)
        DarkSeaGreen #8FBC8F rgb(143, 188, 143)
        DarkSlateBlue #483D8B rgb(72, 61, 139)
        DarkSlateGray #2F4F4F rgb(47, 79, 79)
        DarkTurquoise #00CED1 rgb(0, 206, 209)
        DarkViolet #9400D3 rgb(148, 0, 211)
        DeepPink #FF1493 rgb(255, 20, 147)
        DeepSkyBlue #00BFFF rgb(0, 191, 255)
        DimGray #696969 rgb(105, 105, 105)
        DodgerBlue #1E90FF rgb(30, 144, 255)
        Feldspar #D19275 rgb(209, 146, 117)
        FireBrick #B22222 rgb(178, 34, 34)
        FloralWhite #FFFAF0 rgb(255, 250, 240)
        ForestGreen #228B22 rgb(34, 139, 34)
        Fuchsia #FF00FF rgb(255, 0, 255)
        Gainsboro #DCDCDC rgb(220, 220, 220)
        GhostWhite #F8F8FF rgb(248, 248, 255)
        Gold #FFD700 rgb(255, 215, 0)
        GoldenRod #DAA520 rgb(218, 165, 32)
        Gray #808080 rgb(128, 128, 128)
        Green #008000 rgb(0, 128, 0)
        GreenYellow #ADFF2F rgb(173, 255, 47)
        HoneyDew #F0FFF0 rgb(240, 255, 240)
        HotPink #FF69B4 rgb(255, 105, 180)
        IndianRed #CD5C5C rgb(205, 92, 92)
        Indigo #4B0082 rgb(75, 0, 130)
        Ivory #FFFFF0 rgb(255, 255, 240)
        Khaki #F0E68C rgb(240, 230, 140)
        Lavender #E6E6FA rgb(230, 230, 250)
        LavenderBlush #FFF0F5 rgb(255, 240, 245)
        LawnGreen #7CFC00 rgb(124, 252, 0)
        LemonChiffon #FFFACD rgb(255, 250, 205)
        LightBlue #ADD8E6 rgb(173, 216, 230)
        LightCoral #F08080 rgb(240, 128, 128)
        LightCyan #E0FFFF rgb(224, 255, 255)
        LightGoldenRodYellow #FAFAD2 rgb(250, 250, 210)
        LightGrey #D3D3D3 rgb(211, 211, 211)
        LightGreen #90EE90 rgb(144, 238, 144)
        LightPink #FFB6C1 rgb(255, 182, 193)
        LightSalmon #FFA07A rgb(255, 160, 122)
        LightSeaGreen #20B2AA rgb(32, 178, 170)
        LightSkyBlue #87CEFA rgb(135, 206, 250)
        LightSlateBlue #8470FF rgb(132, 112, 255)
        LightSlateGray #778899 rgb(119, 136, 153)
        LightSteelBlue #B0C4DE rgb(176, 196, 222)
        LightYellow #FFFFE0 rgb(255, 255, 224)
        Lime #00FF00 rgb(0, 255, 0)
        LimeGreen #32CD32 rgb(50, 205, 50)
        Linen #FAF0E6 rgb(250, 240, 230)
        Magenta #FF00FF rgb(255, 0, 255)
        Maroon #800000 rgb(128, 0, 0)
        MediumAquaMarine #66CDAA rgb(102, 205, 170)
        MediumBlue #0000CD rgb(0, 0, 205)
        MediumOrchid #BA55D3 rgb(186, 85, 211)
        MediumPurple #9370D8 rgb(147, 112, 216)
        MediumSeaGreen #3CB371 rgb(60, 179, 113)
        MediumSlateBlue #7B68EE rgb(123, 104, 238)
        MediumSpringGreen #00FA9A rgb(0, 250, 154)
        MediumTurquoise #48D1CC rgb(72, 209, 204)
        MediumVioletRed #C71585 rgb(199, 21, 133)
        MidnightBlue #191970 rgb(25, 25, 112)
        MintCream #F5FFFA rgb(245, 255, 250)
        MistyRose #FFE4E1 rgb(255, 228, 225)
        Moccasin #FFE4B5 rgb(255, 228, 181)
        NavajoWhite #FFDEAD rgb(255, 222, 173)
        Navy #000080 rgb(0, 0, 128)
        OldLace #FDF5E6 rgb(253, 245, 230)
        Olive #808000 rgb(128, 128, 0)
        OliveDrab #6B8E23 rgb(107, 142, 35)
        Orange #FFA500 rgb(255, 165, 0)
        OrangeRed #FF4500 rgb(255, 69, 0)
        Orchid #DA70D6 rgb(218, 112, 214)
        PaleGoldenRod #EEE8AA rgb(238, 232, 170)
        PaleGreen #98FB98 rgb(152, 251, 152)
        PaleTurquoise #AFEEEE rgb(175, 238, 238)
        PaleVioletRed #D87093 rgb(216, 112, 147)
        PapayaWhip #FFEFD5 rgb(255, 239, 213)
        PeachPuff #FFDAB9 rgb(255, 218, 185)
        Peru #CD853F rgb(205, 133, 63)
        Pink #FFC0CB rgb(255, 192, 203)
        Plum #DDA0DD rgb(221, 160, 221)
        PowderBlue #B0E0E6 rgb(176, 224, 230)
        Purple #800080 rgb(128, 0, 128)
        Red #FF0000 rgb(255, 0, 0)
        RosyBrown #BC8F8F rgb(188, 143, 143)
        RoyalBlue #4169E1 rgb(65, 105, 225)
        SaddleBrown #8B4513 rgb(139, 69, 19)
        Salmon #FA8072 rgb(250, 128, 114)
        SandyBrown #F4A460 rgb(244, 164, 96)
        SeaGreen #2E8B57 rgb(46, 139, 87)
        SeaShell #FFF5EE rgb(255, 245, 238)
        Sienna #A0522D rgb(160, 82, 45)
        Silver #C0C0C0 rgb(192, 192, 192)
        SkyBlue #87CEEB rgb(135, 206, 235)
        SlateBlue #6A5ACD rgb(106, 90, 205)
        SlateGray #708090 rgb(112, 128, 144)
        Snow #FFFAFA rgb(255, 250, 250)
        SpringGreen #00FF7F rgb(0, 255, 127)
        SteelBlue #4682B4 rgb(70, 130, 180)
        Tan #D2B48C rgb(210, 180, 140)
        Teal #008080 rgb(0, 128, 128)
        Thistle #D8BFD8 rgb(216, 191, 216)
        Tomato #FF6347 rgb(255, 99, 71)
        Turquoise #40E0D0 rgb(64, 224, 208)
        Violet #EE82EE rgb(238, 130, 238)
        VioletRed #D02090 rgb(208, 32, 144)
        Wheat #F5DEB3 rgb(245, 222, 179)
        White #FFFFFF rgb(255, 255, 255)
        WhiteSmoke #F5F5F5 rgb(245, 245, 245)
        Yellow #FFFF00 rgb(255, 255, 0)
        YellowGreen #9ACD32 rgb(154, 205, 50)
        # 欢迎使用Markdown编辑器

        你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。

        新的改变

        我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:

        1. 全新的界面设计 ,将会带来全新的写作体验;
        2. 在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进行展示;
        3. 增加了 图片拖拽 功能,你可以将本地的图片直接拖拽到编辑区域直接展示;
        4. 全新的 KaTeX数学公式 语法;
        5. 增加了支持甘特图的mermaid语法1 功能;
        6. 增加了 多屏幕编辑 Markdown文章功能;
        7. 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能,功能按钮位于编辑区域与预览区域中间;
        8. 增加了 检查列表 功能。

        功能快捷键

        撤销:Ctrl/Command + Z
        重做:Ctrl/Command + Y
        加粗:Ctrl/Command + B
        斜体:Ctrl/Command + I
        标题:Ctrl/Command + Shift + H
        无序列表:Ctrl/Command + Shift + U
        有序列表:Ctrl/Command + Shift + O
        检查列表:Ctrl/Command + Shift + C
        插入代码:Ctrl/Command + Shift + K
        插入链接:Ctrl/Command + Shift + L
        插入图片:Ctrl/Command + Shift + G
        查找:Ctrl/Command + F
        替换:Ctrl/Command + G

        合理的创建标题,有助于目录的生成

        直接输入1次#,并按下space后,将生成1级标题。
        输入2次#,并按下space后,将生成2级标题。
        以此类推,我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

        如何改变文本的样式

        强调文本 强调文本

        加粗文本 加粗文本

        标记文本

        删除文本

        引用文本

        H2O is是液体。

        210 运算结果是 1024.

        插入链接与图片

        链接: link.

        图片: Alt

        带尺寸的图片: Alt

        居中的图片: Alt

        居中并且带尺寸的图片: Alt

        当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。

        如何插入一段漂亮的代码片

        去博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片.

        // An highlighted block
        var foo = 'bar';
        

        生成一个适合你的列表

        • 项目
          • 项目
            • 项目
        1. 项目1
        2. 项目2
        3. 项目3
        • 计划任务
        • 完成任务

        创建一个表格

        一个简单的表格是这么创建的:

        项目 Value
        电脑 $1600
        手机 $12
        导管 $1

        设定内容居中、居左、居右

        使用:---------:居中
        使用:----------居左
        使用----------:居右

        第一列 第二列 第三列
        第一列文本居中 第二列文本居右 第三列文本居左

        SmartyPants

        SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如:

        TYPE ASCII HTML
        Single backticks 'Isn't this fun?' ‘Isn’t this fun?’
        Quotes "Isn't this fun?" “Isn’t this fun?”
        Dashes -- is en-dash, --- is em-dash – is en-dash, — is em-dash

        创建一个自定义列表

        Markdown
        Text-to- HTML conversion tool
        Authors
        John
        Luke

        如何创建一个注脚

        一个具有注脚的文本。2

        注释也是必不可少的

        Markdown将文本转换为 HTML

        KaTeX数学公式

        您可以使用渲染LaTeX数学表达式 KaTeX:

        Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n1)!nN 是通过欧拉积分

        Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t   . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=0tz1etdt.

        你可以找到更多关于的信息 LaTeX 数学表达式here.

        新的甘特图功能,丰富你的文章

        Mon 06 Mon 13 Mon 20 已完成 进行中 计划一 计划二 现有任务 Adding GANTT diagram functionality to mermaid
        • 关于 甘特图 语法,参考 这儿,

        UML 图表

        可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图:

        张三 李四 王五 你好!李四, 最近怎么样? 你最近怎么样,王五? 我很好,谢谢! 我很好,谢谢! 李四想了很长时间, 文字太长了 不适合放在一行. 打量着王五... 很好... 王五, 你怎么样? 张三 李四 王五

        这将产生一个流程图。:

        链接
        长方形
        圆角长方形
        菱形
        • 关于 Mermaid 语法,参考 这儿,

        FLowchart流程图

        我们依旧会支持flowchart的流程图:

        Created with Raphaël 2.3.0 开始 我的操作 确认? 结束 yes no
        • 关于 Flowchart流程图 语法,参考 这儿.

        导出与导入

        导出

        如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ,生成一个.md文件或者.html文件进行本地保存。

        导入

        如果你想加载一篇你写过的.md文件,在上方工具栏可以选择导入功能进行对应扩展名的文件导入,
        继续你的创作。


        1. mermaid语法说明 ↩︎

        2. 注脚的解释 ↩︎

        你可能感兴趣的:(Markdown,前端)