markdown

来源:互联网 发布:my little pony 知乎 编辑:程序博客网 时间:2024/06/14 17:59

目录


<code class="hljs css has-numbering">您可以使用<span class="hljs-attr_selector">[TOC]</span>在文章的任何位置插入目录,甚至插入多个目录。</code><ul style="" class="pre-numbering"><li>1</li></ul><ul style="" class="pre-numbering"><li>1</li></ul>

呈现效果:


  • 目录
    • 呈现效果
  • 标题
    • 呈现效果
  • 这是一级标题相当于HTML中的H1标签
    • This is an H2
            • This is an H6
  • 段落
    • 呈现效果
  • 字符样式
    • 呈现效果
  • 无序的列表
    • 呈现效果
  • 排序的列表
    • 呈现效果
  • 在列表中的列表
    • 呈现效果
  • 引号或引文
    • 呈现效果
  • 内联代码字符
    • 呈现效果
  • 行内代码及代码块
    • 呈现效果
  • 外部网站链接
    • 呈现效果
  • 图像
    • 呈现效果
  • 表格
    • 呈现效果
  • 反斜杠转义符

标题


<code class="hljs vala has-numbering"><span class="hljs-preprocessor"># 这是一级标题,相当于HTML中的H1标签</span><span class="hljs-preprocessor">## This is an H2</span><span class="hljs-preprocessor">###### This is an H6</span></code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li></ul>

呈现效果:


这是一级标题,相当于HTML中的H1标签

This is an H2

This is an H6

段落


每个段落从一个新行开始,段落前最好有一个空行。只需按下回车键<Enter>开始一个新行。例如,像下面这样。你需要在段落和任何以下的内容之间保留一个空行如有序或无序的列表,像下面这样:* 项目 1 * 项目 2

呈现效果:


每个段落从一个新行开始,段落前最好有一个空行。只需按下回车键<Enter>开始一个新行。

例如,
像下面这样。

你需要在段落和任何以下的内容之间保留一个空行
如有序或无序的列表,像下面这样:

  • 项目 1
  • 项目 2

字符样式


<code class="hljs markdown has-numbering"><span class="hljs-emphasis">*&nbsp;&nbsp;斜体字符*</span><span class="hljs-strong">**粗体字符**</span>~~删除线的文字~~</code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li></ul>

注意:*号与内容之间不要有空格,如果确实需要使用空格,请使用&nbsp;

呈现效果:


  斜体字符
粗体字符
删除线的文字

无序的列表


<code class="hljs mathematica has-numbering">* <span class="hljs-keyword">Item</span> <span class="hljs-number">1</span>* <span class="hljs-keyword">Item</span> <span class="hljs-number">2</span>* <span class="hljs-keyword">Item</span> <span class="hljs-number">3</span>    * <span class="hljs-keyword">Item</span> <span class="hljs-number">3</span>a    * <span class="hljs-keyword">Item</span> <span class="hljs-number">3</span>b    * <span class="hljs-keyword">Item</span> <span class="hljs-number">3</span>c</code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>

注意:*号与内容之间需要有空格

呈现效果:


  • Item 1
  • Item 2
  • Item 3
    • Item 3a
    • Item 3b
    • Item 3c

排序的列表


<code class="hljs vbnet has-numbering"><span class="hljs-number">1.</span> <span class="hljs-keyword">Step</span> <span class="hljs-number">1</span><span class="hljs-number">2.</span> <span class="hljs-keyword">Step</span> <span class="hljs-number">2</span><span class="hljs-number">3.</span> <span class="hljs-keyword">Step</span> <span class="hljs-number">3</span>    a. <span class="hljs-keyword">Step</span> <span class="hljs-number">3</span>a    b. <span class="hljs-keyword">Step</span> <span class="hljs-number">3</span>b    c. <span class="hljs-keyword">Step</span> <span class="hljs-number">3</span>c</code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>

注意:.号与内容之间需要有空格

呈现效果:


  1. Step 1
  2. Step 2
  3. Step 3
    a. Step 3a
    b. Step 3b
    c. Step 3c

在列表中的列表


<code class="hljs markdown has-numbering"><span class="hljs-bullet">1. </span>Step 1<span class="hljs-bullet">2. </span>Step 2<span class="hljs-bullet">3. </span>Step 3<span class="hljs-code">    * Item 3a</span><span class="hljs-code">    * Item 3b</span><span class="hljs-code">    * Item 3c</span></code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>

呈现效果:


  1. Step 1
  2. Step 2
  3. Step 3
    • Item 3a
    • Item 3b
    • Item 3c

引号或引文


<code class="hljs  has-numbering">这是一段引用的内容>引用的内容>引用的内容>引用的内容</code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>

呈现效果:


这是一段引用的内容

引用的内容
引用的内容
引用的内容

内联代码字符


<code class="hljs autohotkey has-numbering">使用反撇号 <span class="hljs-escape">`f</span>unction()<span class="hljs-escape">` </span>是指。这里有一个字符 <span class="hljs-escape">``</span> 引号 (<span class="hljs-escape">`)</span><span class="hljs-escape">``</span>。</code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li></ul>

呈现效果:


使用反撇号 function() 是指。

这里有一个字符 引号 (`)

行内代码及代码块


<code class="hljs coffeescript has-numbering">缩进每一行由至少 <span class="hljs-number">4</span> 个空格或 <span class="hljs-number">1</span> 个制表符Tab。这是一个正常的段落:    这是一个代码块。    包含多行。或者,您可以使用 <span class="hljs-number">3</span> 个反引号在代码块之前和之后,像这样: `<span class="javascript"></span>``<span class="javascript">这是一个代码块 </span>``<span class="javascript"></span>`若要使添加的代码块高亮,将代码语言的名称添加到紧随反引号之后: `<span class="javascript"></span>``<span class="javascript">javascript<span class="hljs-keyword">var</span> oldUnload = window.onbeforeunload;window.onbeforeunload = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> {</span>    saveCoverage();    <span class="hljs-keyword">if</span> (oldUnload) {        <span class="hljs-keyword">return</span> oldUnload.apply(<span class="hljs-keyword">this</span>, <span class="hljs-built_in">arguments</span>);    }}; </span>``<span class="javascript"></span>`        </code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li></ul>

注意:在代码块中插入代码块的Markdown格式时,需要在反引号之前添加空格,否则呈现的布局会超出你的预期。

支持所有常见的编码语言,包括 C、 c++、 Java、 Scala,Python 和JavaScript。

呈现效果:


缩进每一行由至少 4 个空格或 1 个制表符Tab。

这是一个正常的段落:

这是一个代码块。包含多行。

或者,您可以使用 3 个反引号在代码块之前和之后,像这样:

<code class="hljs  has-numbering">这是一个代码块</code><ul style="" class="pre-numbering"><li>1</li></ul><ul style="" class="pre-numbering"><li>1</li></ul>

若要使添加的代码块高亮,将代码语言的名称添加到紧随反引号之后:

<code class="language-javascript hljs  has-numbering"><span class="hljs-keyword">var</span> oldUnload = window.onbeforeunload;window.onbeforeunload = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> {</span>    saveCoverage();    <span class="hljs-keyword">if</span> (oldUnload) {        <span class="hljs-keyword">return</span> oldUnload.apply(<span class="hljs-keyword">this</span>, <span class="hljs-built_in">arguments</span>);    }};</code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>

外部网站链接


<code class="hljs markdown has-numbering">这是 [<span class="hljs-link_label">一个例子</span>](<span class="hljs-link_url">http://blog.csdn.net/column/details/markdown.html "标题"</span>) 的内联链接。[<span class="hljs-link_label">这个链接</span>](<span class="hljs-link_url">http://blog.csdn.net/testcs_dn</span>) 没有标题属性。</code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li></ul>

注意:括号必需要是英文半角的。

呈现效果:


这是 一个例子 的内联链接。

这个链接 没有标题属性。

图像


图像及图像链接语法如下所示:

<code class="hljs markdown has-numbering">![<span class="hljs-link_label">我的头像</span>](<span class="hljs-link_url">http://avatar.csdn.net/D/1/B/1_testcs_dn.jpg</span>)![<span class="hljs-link_label">专家图标</span>](<span class="hljs-link_url">http://c.csdnimg.cn/jifen/images/xunzhang/xunzhang/bokezhuanjiamiddle.png "专家图标"</span>)[<span class="hljs-link_label">![专栏图标</span>](<span class="hljs-link_url">http://avatar.csdn.net/blogpic/20150309232245583.jpg</span>)](<span class="hljs-link_url">http://blog.csdn.net/column/details/markdown.html "CSDN-Markdown专栏"</span>)</code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li></ul>

呈现效果:


我的头像
专家图标
专栏图标

表格


<code class="hljs 1c has-numbering"><span class="hljs-string">|每天 |主食 |价格 |</span><span class="hljs-string">|--------|---------|-------|</span><span class="hljs-string">|周一 |面<br>食 |$6 |</span><span class="hljs-string">|周二 |鸡 |$8 |</span></code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

呈现效果:


每天主食价格周一面
食$6周二鸡$8

注意:表格中的“面<br>食”,如果想指定某个位置换行的话,需要使用“<br>”标签,直接使用<Enter>回车键是不行的。

反斜杠转义符


Markdown 可以利用反斜杠来插入一些在语法中有其它意义的符号,例如:如果你想要用星号加在文字旁边的方式来做出强调效果(但不用 <em> 标签),你可以在星号的前面加上反斜杠:

\* 字符星号 \*

Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号:

<code class="hljs markdown has-numbering">\   反斜线`   反引号<span class="hljs-bullet">*   </span>星号_   底线{}  花括号[]  方括号()  括弧<span class="hljs-header">#   井字号</span><span class="hljs-bullet">+   </span>加号<span class="hljs-bullet">-   </span>减号.   英文句点!   惊叹号</code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul>

这里再插入一个目录:

  • 目录
    • 呈现效果
  • 标题
    • 呈现效果
  • 这是一级标题相当于HTML中的H1标签
    • This is an H2
            • This is an H6
  • 段落
    • 呈现效果
  • 字符样式
    • 呈现效果
  • 无序的列表
    • 呈现效果
  • 排序的列表
    • 呈现效果
  • 在列表中的列表
    • 呈现效果
  • 引号或引文
    • 呈现效果
  • 内联代码字符
    • 呈现效果
  • 行内代码及代码块
    • 呈现效果
  • 外部网站链接
    • 呈现效果
  • 图像
    • 呈现效果
  • 表格
    • 呈现效果
  • 反斜杠转义符
0 0
原创粉丝点击