0%

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

Overview

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

常用的标签

折叠块 <summary>

你和猪,打一种动物

点击展开答案

源码:

1
2
3
4
<details>
<summary>点击展开答案</summary>
<p> 象</p>
</details>

通常用于FAQ页面。

图片 <img>

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

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

所以可采用<img>标签

1
<img align="middle" alt="=&quot;alternate_text&quot;" 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样式用的不多,但比较实用。

1
2
3
4
5
6
7
8
public class Hello1
{
public static void Main()
{
- System.Console.WriteLine("Hello, World!");
+ System.Console.WriteLine("Rock all night long!");
}
}

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

链接的集中管理

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

1
2
3
4
这是[链接一][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>

参考

  • Github-Markdown | 官方文档
  • Hexo-Markdown | 官方文档