添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

以下记录了markdown额外的小技巧,markdown基本语法指路: Markdown编辑器常用语法使用指南

Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行。

1.1 语法格式:

|  表头  | 表头  |
|  ---- | ---- |
| 单元格 | 单元格 |
| 单元格 | 单元格 |

方法一:

  • 从word或excel中复制表格
  • 打开链接: No-Cruft Excel to HTML TableConverter
  • 贴上复制的文字,然后按convert,就会得到这个表格的html代码
  • 将html代码贴到markdown编辑器
  • 方法二(嵌入HTML代码):

  • 可以先用Markdown语法生成未合并单元格的HTML代码
  • 进行修改, 增加rowspan或colspan属性来实现合并单元格
  • 再把更改后的HTML代码粘贴到markdown文件中
  • 2.1 文字缩进

    「Markdown 语言」不负责实现段首缩进,所以我们只能手写,添加空格转义符,前端HTML空格转义符总结

    `Math.abs(x)`
      返回一个数的绝对值。`在这里插入代码片`
    

    效果如下,成功缩进两字符

    Math.abs(x)
      返回一个数的绝对值。

    2.2 文字对齐(居中、左对齐、右对齐)

    对于标准的markdown文本,是不支持居中对齐的。不过markdown支持html语言,所以我们采用html语法格式书写即可。 居中:

    <center>此行居中</center>
    // or
    <p align="center">align居中</p>
      

    align居中

    左对齐:

    <p align="left">左对齐</p>
    

    右对齐:

    <p align="right">右对齐</p>
    

    2.3 文字的字体及颜色

    2.3.1 字体更换

    同样我们也需要遵照其标准的语法格式

    <font face="黑体">我是黑体字</font>
    <font face="微软雅黑">我是微软雅黑</font>
    <font face="STCAIYUN">我是华文彩云</font>
      我是黑体字
    我是微软雅黑
    我是华文彩云
    2.3.2 大小更换

    大小的属性名为size,Size规定文本的尺寸大小,取值从 1 到 7,浏览器默认值是 3。

    <font face="黑体" size=2>我是黑体2号字</font>
    <font face="黑体" size=3>我是黑体3号字</font>
    <font face="黑体" size=7>我是黑体7号字</font>
      我是黑体2号字
    我是黑体3号字
    我是黑体7号字
    2.3.3 颜色替换

    在html语言中,颜色属性名为color,所以可以表示如下

    <font color=red size=72>红色</font>
    

    2.4 文字添加下划线

    使用html标签:<hr/>

    用爱劈开黑暗,像一道曙光,
    是非真假无法判断,不如坚强。
    

    用爱劈开黑暗,像一道曙光,

    是非真假无法判断,不如坚强。
  • 使用u标签
  • <u>下划线文本</u>
    下划线文本

    3.1 背景色

    <table>
      <tbody>
        <th>颜色名</th>
        <th>十六进制颜色值</th>
        <th>颜色</th>
        <td><font color="AliceBlue">AliceBlue</font></td>
        <td><font color="AliceBlue">F0F8FF</font></td>
        <td bgcolor="AliceBlue">rgb(240, 248, 255)</td>
        <td><font color="AntiqueWhite">AntiqueWhite</font></td>
        <td><font color="AntiqueWhite">#FAEBD7</font></td>
        <td bgcolor="AntiqueWhite">rgb(250, 235, 215)</td>
        <td><font color="Lavender">Lavender</font></td>
        <td><font color="Lavender">#E6E6FA</font></td>
        <td bgcolor="Lavender">rgb(230, 230, 250)</td>
        <td><font color="LavenderBlush">LavenderBlush</font></td>
        <td><font color="LavenderBlush">#FFF0F5</font></td>
        <td bgcolor="LavenderBlush">rgb(255, 240, 245)</td>
        <td><font color=" LightPink"> LightPink</font></td>
        <td><font color=" LightPink">#FFB6C1</font></td>
        <td bgcolor=" LightPink">rgb(255, 182, 193)</td>
        <td><font color="LightSalmon">LightSalmon</font></td>
        <td><font color="LightSalmon">#FFA07A</font></td>
        <td bgcolor="LightSalmon">rgb(255, 160, 122)</td>
        <td><font color="MintCream">MintCream</font></td>
        <td><font color="MintCream">#F5FFFA</font></td>
        <td bgcolor="MintCream">rgb(245, 255, 250)</td>
        <td><font color="MistyRose">MistyRose</font></td>
        <td><font color="MistyRose">#FFE4E1</font></td>
        <td bgcolor="MistyRose">rgb(255, 228, 225)</td>
        <td><font color="Moccasin">Moccasin</font></td>
        <td><font color="Moccasin">#FFE4B5</font></td>
        <td bgcolor="Moccasin">rgb(255, 228, 181)</td>
        <td><font color="MintCream">MintCream</font></td>
        <td><font color="MintCream">#F5FFFA</font></td>
        <td bgcolor="MintCream">rgb(245, 255, 250)</td>
        <td><font color="PaleVioletRed">PaleVioletRed</font></td>
        <td><font color="PaleVioletRed">#D87093</font></td>
        <td bgcolor="PaleVioletRed">rgb(216, 112, 147)</td>
    </table>
        十六进制颜色值
        AliceBlue
        F0F8FF
        rgb(240, 248, 255)
        AntiqueWhite
        #FAEBD7
        rgb(250, 235, 215)
        Lavender
        #E6E6FA
        rgb(230, 230, 250)
        LavenderBlush
        #FFF0F5
        rgb(255, 240, 245)
         LightPink
        #FFB6C1
        rgb(255, 182, 193)
        LightSalmon
        #FFA07A
        rgb(255, 160, 122)
        MintCream
        #F5FFFA
        rgb(245, 255, 250)
        MistyRose
        #FFE4E1
        rgb(255, 228, 225)
        Moccasin
        #FFE4B5
        rgb(255, 228, 181)
        MintCream
        #F5FFFA
        rgb(245, 255, 250)
        PaleVioletRed
        #D87093
        rgb(216, 112, 147)
    

    4.1 设置图片大小

    markdown默认情况下图片是自适应大小的,宽度充满,类似于max-width: 100%。你一定在插入图片的时候,遇到图片太大,影响观感的问题,或者遇到过我们需要将图片只显示半边的需求。 Markdown中,图片大小的设定方式有两种 不通过[](url)这种格式上传图片,用<img>标签替换。

  • 设置zoom
  • <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595307552342&di=f5567b6e4490ee2ac89555ceaefeaf67&imgtype=0&src=http%3A%2F%2Ffile.mumayi.com%2Fforum%2F201401%2F16%2F231735cfp4046206r4i705.jpg"  style="zoom: 33%;" />
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595307552342&di=f5567b6e4490ee2ac89555ceaefeaf67&imgtype=0&src=http%3A%2F%2Ffile.mumayi.com%2Fforum%2F201401%2F16%2F231735cfp4046206r4i705.jpg"  style="zoom: 25%;" />
    这种方式,是通过html标签引入,通过指定css样式来实现调整图片尺寸的的,你还可以通过内联样式.
    
  • 设置style中的width
  • <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595307552342&di=f5567b6e4490ee2ac89555ceaefeaf67&imgtype=0&src=http%3A%2F%2Ffile.mumayi.com%2Fforum%2F201401%2F16%2F231735cfp4046206r4i705.jpg" width="200px" />
    

    或者这样的css样式

    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595307552342&di=f5567b6e4490ee2ac89555ceaefeaf67&imgtype=0&src=http%3A%2F%2Ffile.mumayi.com%2Fforum%2F201401%2F16%2F231735cfp4046206r4i705.jpg" style="width:200px" />
    

    4.2 多张图片并排显示

    在markdown中,目前,让图片像这样并排居中的方式主要是两种:

  • ![](url1)![](url1)![](url1)...多个图片链接綴加写,无换行,无空格。
  • 这种方式,似乎并不能够每一次都生效。但在CSDN是可以生效的,如下:

    <center>
    ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/21/17371fdd6dac7a73~tplv-t2oaga2asx-image.image)![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/21/17371fdd6dac7a73~tplv-t2oaga2asx-image.image)
    </center>
    
    <center>
    <figure>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595307533075&di=6f4081a42a6dd1ef3ada1eef2f86f2fb&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F56%2F12%2F01300000164151121576126282411.jpg" width="30%"/>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595307533075&di=6f4081a42a6dd1ef3ada1eef2f86f2fb&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F56%2F12%2F01300000164151121576126282411.jpg"  width="30%"/>
    </figure>
    </center>
    
  • 在掘金中写博客时,代码块和上方文字要空一行才会生效,如下: 在这里插入图片描述
  • 当你使用<center>标签单独居中一张图片的时候,开标签和图片代码不要空一行,才会正常显示居中(掘金中),否则会居左 不差
  • 当你在应用这种方式不成功的时候,很可能是图片过大,这时候你需要在图片的链接中加入图片参数以设定合适的尺寸。比如我在上面的图片中添加了width="30%",否则一行只能显示一张图片。
  • 本文使用 mdnice 排版

    如果你觉得这篇文章有用,动动小手给我点个赞吧🍀