Markdown实用小技巧 | 春田花花疯人院

1.文字标题

编辑字体、字号和颜色的代码如下：

markdown


<font face="黑体"> 我是黑体字 </font>
<font face="微软雅黑"> 我是微软雅黑 </font>
<font color=gray size=7> color=gray </font>
<font color=#00ffff size=7> color=#00ffff </font>
<font color=#0099ff size=7 face="黑体"> color=#0099ff size=7 face="黑体" </font>
// Size：规定文本的尺寸大小。可能的值：从 1 到 7 的数字。浏览器默认值是 3。

font 是一对常规标签，font 标签内设置 color=”对应颜色值” 即可设置对象内字体的颜色：

markdown


<font color="red"> 我是红色字体 </font> 或者 <font color="#FF0000"> 我也是红色字体 </font>

另外，还可以这样设置字体颜色：

markdown


$\color{green}{绿色} $

文字居中：

markdown


<center>文字居中</center>

添加背景色：

markdown


<table><tr><td bgcolor=#FF4500>
    这里的背景色是：OrangeRed，十六进制颜色值：#FF4500，rgb(255, 69, 0)
</td></tr></table>

2.图片

markdown


![图片描述](图片链接)

[ ]内为图片描述，（）内为图片链接

markdown


![示例图片](https://example.com/images/sample.jpg)

插入网络图片：

markdown


![本地图片](./images/local.jpg)

插入本地图片:

通过 img 标签控制宽高

markdown


<img src="http://pic15.photophoto.cn/20100615/0006019058815826_b.jpg"  height="330" width="495">

通过 <div> 标签和 align 属性控制对齐方式

单张图片：

markdown


<div align=center>![alt text](/path/to/img.jpg "Title")
<div align=right>![alt text](/path/to/img.jpg "Title")

多张图片可以这样写：

markdown


<div align="center">
<img src="http://pp.myapp.com/ma_pic2/0/shot_42391053_1_1488499316/550" height="330" width="190" >
<img src="http://pp.myapp.com/ma_pic2/0/shot_42391053_2_1488499316/550" height="330" width="190" >
<img src="http://pp.myapp.com/ma_pic2/0/shot_42391053_3_1488499316/550" height="330" width="190" >
 </div>

3.链接

markdown


[链接文字](链接地址)

基本语法：

markdown


[Google](https://www.google.com/)

插入网页链接：

markdown


[本地文件](./docs/readme.pdf)

插入本地文件链接：

markdown


[1](<https://www.google.com/>)

如果链接过长，可以用<>包裹起来

行内形式：

markdown


[链接文字](链接网址 "标题")
This is an [example link](http://example.com/ "With a Title").

参考形式：

markdown


[链接文字][name]
[name]: link "Title"

为参考形式的链接定一个 [name] 方便我们在文章中多次引用（name 可以用字母、数字和空格，且不分大小写

自动链接：

markdown


<http://example.com/>
<[email protected]>

Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱，只需用 < > 包起来，Markdown 就会自动把它转成链接。一般网址的链接文字就和链接地址一样，邮址的自动链接也很类似。

4.插入音频

语法如下：

markdown


<audio id="audio" controls="" preload="auto" loop>
      <source id="mp3" src="/upload/时光旅行.m4a">
</audio>

插入网络音乐：

markdown


<iframe
    frameborder="no"
    border="0"
    marginwidth="0"
    marginheight="0"
    width=330
    height=86
    src="//music.163.com/outchain/player?type=2&id=393697&auto=1&height=66">
</iframe>

网易云音乐：

markdown


<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=32507038&auto=0&height=66"></iframe>

如果设置 auto=1 ，则会自动播放

5.插入视频

markdown


<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
  你的浏览器不支持 <code>video</code> 标签。
</video>

markdown


<video width="320" controls loop>
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.webm" type="video/webm">
  <source src="myVideo.ogv" type="video/ogg" />
  <p>Your browser doesn't support HTML5 video. Here is
     a <a href="myVideo.mp4">link to the video</a> instead.</p>
</video>

嵌入网络视频：

markdown


<iframe 
    src="https://v.miaopai.com/iframe?scid=SvyHaHOczsp7B6ftW86oqMMz62-h5ai6~Fwp8A__"
    width="800" 
    height="450" 
    frameborder="0" 
    allowfullscreen>
</iframe>

B站通用代码：

markdown


<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"src="//player.bilibili.com/player.html?aid=632650247&bvid=BV1bb4y1m73h&cid=398488643&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" ></iframe>
</div>

自定义视频代码

不自动播放：

markdown


<div style="position: relative; padding: 30% 45%;">
<video style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" controls>
    <source src="https://files.guguge.ga/video/Water%20Rocket%20-%20Data%20Visualizer%20Demo%20%281%29.mp4" type="video/mp4">
</video>
</div>

自动播放：

markdown


<div style="position: relative; padding: 30% 45%;">
<video style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" controls autoplay>
    <source src="https://files.guguge.ga/video/Water%20Rocket%20-%20Data%20Visualizer%20Demo%20%281%29.mp4" type="video/mp4">
</video>
</div>