Markdown 语法进阶 (Advanced Markdown Tips)

Overview

本文主要介绍markdown嵌入html标签的用法。(有些markdown render不支持内嵌html) - <summary> - <img>

tips

折叠块 <summary>

你和猪,打一种动物
点击展开答案

源码:

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

click事件

图片样式

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

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

所以可采用<img>标签

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

=

文本对齐

学而不思则罔,思而不学则殆
-- 《论语》
1
<div style="text-align:right" >-- 《论语》</div>

写注释

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

  • 方式一: 采用html注释标签 <!-- 这里不会显示 -->
  • 方式二: 直接采用<标签 `<这里不会显示="">`

推荐方式一

code block

正确上设置code block的highlight。

常用的 bash

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,link的复用

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

1
2
3
4
5
You can also put the [link URL][1] below the doc
like [this][2].

[1]: http://url
[2]: http://another.url "A funky title"
1
2
3
4
Or you can use a [shortcut][] reference, which links the text
"shortcut" to the link named "[shortcut]" on the next paragraph.

[shortcut]: http://goes/with/the/link/name/text
  • 马克飞象支持footnote,它采用的MultiMarkdown,已经停止开发了。

  • https://github.com/kchen0x/hexo-reference

1
2
3
basic footnote[^demo]

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

总结

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

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

问题

是否支持嵌入js?

是否支持Markdown Inside HTML Blocks?

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

部分支持

  • [x] <div> *Emphasized* text. </div>
  • [ ] <div> ## dfd </div>

参考