在Markdown中插入视听文件及其他

CCAlso published on S&C.


Google Analytics

先把Github Pages的一个填上。如果我们希望对自己的站点进行网站流量分析、统计,多数情况下是用Google Analytics。这个服务是05年的时候Google收购了它的前身Urchin,将收费服务开放免费使用。

它是把一段JS代码放入页面,每当运行该页面时,即会发送浏览者的国家、经由关键字等信息传递给站长。

我们先在Google Analytics开一个Account,设置property,Google Analytics就会给出Tracking Info,包括你的Tracking ID,和Website Tracking的JS代码。

页面可以是在_includes下新建的一个analytics.html文件,单独在里面放置代码。

Markdown插入视听文件

事实上Markdown并不支持插入音频、视频,但是,Markdown支持html语法,我们可以通过html语句插入视听文件。用到的html标签是iframe,代码解释如下:

注意1:

音频和视频在默认情况下是会自动循环播放的,可以修改链接的值进行修改;

在src域中,auto值表示是否自动播放,当值为1时为自动播放,0则不是;

在src域中,有些链接会附有height或width值,其表示表示播放框的基本宽高,可以更换其值以获得想要的播放框大小,此时可以不用填写外部的width及height。

注意2:

有的Markdown解析不支持直接在markdown中直接贴iframe语句。我们的解决办法是,在_includes里建一个单独的html文件。

例子

我们用一个例子来说明一下:

  1. 先在_includes中新建youtube.html文件,里面放入youtube给的embed语句。ID部分用``代替;
<iframe width="560" height="315" src="https://www.youtube.com/embed/{{ include.id }}" frameborder="0" allowfullscreen></iframe>
  1. 在你撰写的markdown文件,需要插入视频的地方,插入语句:
{% include youtube.html id="IlkBLwl4aBM" %}

效果是这样的:

如果贴的是音频,道理一样,获取外链,同样操作即可。以网易云为例:

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

上述是网易云生成的外链,不过要把widthheight的值,用引号包起来,才能被kramdown解析。

163music音频测试:

对于Youtube存在与否的问题,请自行解决。

Markdown 折叠

其实这也是通过html语法实现的功能,你可以测试一下(拒绝IE,它不支持):

我有些话想跟你说

等等,让我想想是什么话。

哎呀,忘记了。

实现上述折叠效果的代码如下:

<details>
  <summary>我有些话想跟你说</summary>
    <p> 等等,让我想想是什么话。</p>
      <p> 哎呀,忘记了。</p>
      </details>

Markdown插入表格

终于是一个Markdown本身就支持的功能了。表格制表是我们在写作当中常用的一个功能。我们先看一个例子,看看在Markdown里用几行代码插入表格的效果是怎么样的:

   | 一个普通标题 | 一个普通标题 | 一个普通标题 |
   | ------| ------ | ------ |
   | 短文本 | 中等文本 | 稍微长一点的文本 |
   | 稍微长一点的文本 | 短文本 | 中等文本 |

效果如下:

一个普通标题 一个普通标题 一个普通标题
短文本 中等文本 稍微长一点的文本
稍微长一点的文本 短文本 中等文本

稍微再加一点要求,例如:对齐

   | 左对齐标题 | 右对齐标题 | 居中对齐标题 |
   | :------| ------: | :------: |
   | 短文本 | 中等文本 | 稍微长一点的文本 |
   | 稍微长一点的文本 | 短文本 | 中等文本 |

出来的表格样式则是这样:

左对齐标题 右对齐标题 居中对齐标题
短文本 中等文本 稍微长一点的文本
稍微长一点的文本 短文本 中等文本

从上面的例子我们可以看到:

表格内支持插入其他Markdown行内标记,例如加粗斜体链接等等。

SO