2018-02-04

CS►tools►formatting►markdown

【Markdown系列】语法进阶 (Advanced Markdown Tips)

Overview

markdown语法简单方便，但要实现复杂的样式仍然要借助html标签。本文介绍常用的html标签，用于对markdown原生格式的增强。

常用的标签

折叠块 `<summary>`

你和猪，打一种动物

点击展开答案

象

源码：

<details>
  <summary>点击展开答案</summary>
  <p> 象</p>
</details>

通常用于FAQ页面。

图片 `<img>`

markdown的语法不支持图片大小，位置等样式。

1	![Alt text](图片链接 "optional title")

所以可采用<img>标签

1	<img align="middle" alt="="alternate_text"" src="http://img5.2345.com/duoteimg/zixunImg/local/2016/03/18/14582940693488.gif" title="hover" width="20%" />

图片样式

对齐 (align)

学而不思则罔，思而不学则殆
—— 《论语》

1	<div style="text-align:right" >-- 《论语》</div>

注释 (comment)

不在页面显示，一般写给自己看，或者写给编辑者看(比如提交issue的模板中附带的注释)

方式一: 采用html注释标签 
方式二: 直接采用<标签 <这里不会显示>

推荐方式一

代码块 (code block)

个性化设置`code block`的样式

1	<pre>sample <b>sample</b> sample</pre>

sample sample sample

1
2
3

<pre>
<i><a href="http://manpages.ubuntu.com/manpages/dapper/man1/prename.1.html">rename</a></i> sfds
</pre>

rename sfds

<pre>标签更灵活。但是，不能显示行号，需要自定义每个元素的格式。

code block不常用的语言

diff样式用的不多，但比较实用。

public class Hello1
{
   public static void Main()
   {
-      System.Console.WriteLine("Hello, World!");
+      System.Console.WriteLine("Rock all night long!");
   }
}

动态链接 (link)

这部分属于需要动态link，需要借助javascript。因此需要markdown render支持（比如MultiMarkdown），或者利用插件（比如hexo-reference）

链接的集中管理

对link的集中管理，方便复用。

这是[链接一][1]，这是[链接二][2]。多次引用更方便、更简洁，[链接一][1]。

   [1]: http://url1
   [2]: http://url2 "这是2的标题，可以试着把指针移到链接二上"

这是链接一，这是链接二。多次引用更方便、更简洁，链接一。

脚注 (footnote)

马克飞象支持footnote，它采用的MultiMarkdown，已经停止开发了。
https://github.com/kchen0x/hexo-reference

1
2
3

basic footnote[^demo]

[^demo]: basic footnote content [title](http://link)

link总结

集中link和脚注link最好都放在文档末尾。区别是，前者只提供link，后者明文显示参考文献。我更倾向于后者。

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。 —— 维基百科

问题

是否支持嵌入js？

是否支持Markdown Inside HTML Blocks?

Markdown in HTML does not work very well –来自官方文档

部分支持

<div> *Emphasized* text. </div>
<div> ## dfd </div>