codecamp

第07节 Markdown列表

  列表有两种:无序列表、有序列表。

无序列表

  以-+*这三个字符开头的行是无序列表项。这三个字符使用任意一个字符都可以,编译后的结果是一样的。

  但是使用*作为列表开头会与加粗、倾斜这两种效果冲突,所以尽可能不要用!!!如果实在必须在一行开头使用*来表示无序列表,要注意必须在后面跟一个空格(全、半角均可);或者格式化一下。

  例如:

  以+号开头:

+ 无序列表
+ 无序列表
+ 无序列表

  或者:

  以-号开头:

- 无序列表
- 无序列表
- 无序列表

  转译后都会显示为:

  • 无序列表

  • 无序列表

  • 无序列表

注意:无序列表与加粗可能冲突!!!

如下面这种写法会出问题:

* **想加粗显示的文本**普通文本

  编译后会呈现下面的效果(视浏览器不同而不同):

      • 想加粗显示的文本**普通文本

  在 IE 浏览器中看起来在文本上面会出现一个很大的空行,而且位置还更偏右了。稍有点网页制作知识的用户可能以为 CSS 文件出了问题。——但这实际上是因为开头的三个*被解释成了三级无序列表!!!有些浏览器会显示前两级的标志(经常是圆点),但也有些浏览器因为前面两级列表没有文本,不显示这个标志——于是看起来就是一个好大的空白。

  麻烦的还不止如此:双内核浏览器(例如猎豹)的IE兼容模式与 IE11 的效果就不一样;Lunar Markdown Editor 自带的预览界面应该是调用IE内核,但是它的显示效果又是另一个样式。而猎豹的另一个内核又呈现一种样式!!!

  各家浏览器、同一家浏览器的不同版本之间对列表的处理竟然如此不同!这真是令人不知道该说什么了!

  那么,碰到这个情况怎么处理呢?

  答案很简单——别在列表开头用加粗效果就成了。

有序列表

  有序列表由数字开头,后跟句点(或.,也可以是、)。

  例如:

11.有序列表项1
1.有序列表项2
1.有序列表项3

  数字不能省略,但顺序可以是乱的,编译后顺序自然就是正确的了。

  转译后会显示为:

  1. 有序列表项1

  2. 有序列表项2

  3. 有序列表项3

如何防止出现意外的有序列表?

  下面这行 Markdown 文本:

1986.04,发生了一件事情...

  会被解释为有序列表:

  1. 04,发生了一件事情...

  但是显然,这并不是个列表项。怎么才能避免它被解释为有序列表项呢?对.进行一下转义即可:

1986\.04,发生了一件事情...

  这样就会显示成:

1986.04,发生了一件事情...

嵌套列表

列表可以嵌套,例如:

+ 嵌套列表项1  
    + 嵌套列表项2  
+ 嵌套列表项3  
    + 嵌套列表项4  
        + 嵌套列表项5  

转译后会显示为:

  • 嵌套列表项1

    • 嵌套列表项2
  • 嵌套列表项3

    • 嵌套列表项4

      • 嵌套列表项5

3.1.注意

嵌套列表、引用、代码块都涉及 Tab 符或空格缩进,很容易混淆,高亮显示也是不准确的。因此建议不要同时使用这三种元素。

第06节 Markdown代码块
第08节 Markdown链接
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }