Markdown扩展语法

目录

• Markdown 语法补充
  • 一、快速生成 HTML 表格代码
    • 在线表格编辑器——TablesGenerator
  • 二、 插入视频、音频或GIF
  • 1. 视频
  • 2. 音频
    • 方法一
    • 方法二
    • 方法三
  • 3.GIF同理
  • 三、脚注
  • 左右显示图片
    • 第一种方案
    • 第二种方案

Markdown 语法补充

一、快速生成 HTML 表格代码

在线表格编辑器——TablesGenerator

表格制作工具TablesGenerator是一个在线制作 LaTeX、HTML、Markdown 格式的表格代码工具，支持在表格中填充数据，修改字体/背景颜色，对齐方式等等，还支持从 Excel、Google Docs 里直接复制粘贴数据，以及多个 HTML 表格样式。Tables Generator 支持四种格式:LaTeX、HTML、Markdown、TEXT，先在 Table > Set size 中设置表格大小，然后填充数据，设置格式，就能在页面下面找到代码了。

简直是神器！

生成的代码由两部分组成： <style>标签和<table>标签。第一个应该被复制并放在 </head>您网站的标签之前，而后者（即表格代码）应该放在所需的位置。

二、 插入视频、音频或GIF

在Typora中可以显示文档的源代码，可以看到，很多处理Markdown实际就是在Html上进行了加工。

所以只要通过在Markdown文档中插入HTML的Iframe标签就可以完成了。

材料

• HTML中的Iframe，可以参考w3c或者码农教程

具体步骤

1. 视频

使用<iframe src="视频之地" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

<iframe height=498 width=510 src="视频地址">

---

<iframe height=498 width=510 src="视频地址" frameborder=0 allowfullscreen></iframe>

如果是Bilbil的视频网页中，可以点击分享，下面可以直接复制嵌入代码，非常方便

<iframe src="//player.bilibili.com/player.html?aid=59317437&bvid=BV1Pt411G7qh&cid=103365806&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

2. 音频

方法一

同理可以通过更改上面的url即刻，同时你还可以通过添加属性" style="VISIBILITY: hidden"来做到隐藏这个iframe，看上去就像是背景音乐一样

例如：以网易云音乐为例 1.首先在网易云音乐播放界面，点击生成外链播放器

---

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

方法二

1. 获取 歌曲ID

   

2. 替换ID链接

   

代码示例：

<iframe name="music" src="http://link.hhtjim.com/163/463157222.mp3" marginwidth="1px" marginheight="20px" width=100% height="80px" frameborder=1 　scrolling="yes">
</iframe>

详情见如下：

方法三

HTML5 <audio> 元素 废弃

<audio src="http://link.hhtjim.com/163/463157222.mp3">   你的浏览器不支持 audio 标签。 </audio>

你的浏览器不支持 audio 标签。

3.GIF同理

• 缺点

  都是通过网络图库或者图床链接来获取的，因为如果本地链接的话，需要配置其他的东西非常不方便

三、脚注

正文条目[^注脚]

[^注脚]: 引用描述

正文条目1^[1]

正文条目2^[2]

左右显示图片

第一种方案

<table><tr>
<td><img src="http://pics0.baidu.com/feed/3801213fb80e7bec8452feb4ec529d3e9a506b5a.jpeg?token=d894eb7dbd20433ef1f32cee1417c72c&s=38925CDEC41259D4C69FBAB90300101A" border=0></td>
<td><img src="https://img1.imgtp.com/2022/07/14/b8IjQaDE.png" border=0></td>
<td><img src="https://img1.imgtp.com/2022/07/14/s6lOXoNq.png" border=0></td>
</tr></table>

第二种方案

<table class="tg">
<thead>
  <tr>
    <td class="tg-0pky"><img src="https://img1.imgtp.com/2022/07/14/8b3WlRNF.png" alt="这是测试表达式描述语言" width="600" height="300"></td>
    <td class="tg-0pky"><img src="https://img1.imgtp.com/2022/07/14/ZnZDFLrI.png" alt="这是测试表达式描述语言2" width="600" height="300"></td>
  </tr>
</thead>
</table>

---

1. 引用描述 ︎

2. 引用描述 ︎