https://www.cnsre.cn/tags/markdown/ Recent content in Markdown on SRE运维博客 Hugo -- gohugo.io zh Tue, 16 Mar 2021 10:03:54 +0800 daily daily https://www.cnsre.cn/posts/210316100350/ Tue, 16 Mar 2021 10:03:54 +0800 Thu, 20 Mar 2025 11:15:50 +0800 https://www.cnsre.cn/posts/210316100350/ Markdown语法完全指南 Markdown是一种轻量级标记语言，广泛用于文档编写、博客创作和技术文档。本文将全面介绍Markdown的语法 <h1 id="markdown语法完全指南">Markdown语法完全指南</h1> <p>Markdown是一种轻量级标记语言，广泛用于文档编写、博客创作和技术文档。本文将全面介绍Markdown的语法规则，通过实例演示帮助你快速掌握Markdown写作技巧。</p> <h2 id="1-标题headings">1. 标题（Headings）</h2> <p>Markdown使用<code>#</code>符号来定义标题，<code>#</code>的数量代表标题的层级，最多支持六级标题。每个<code>#</code>后需要添加一个空格，这是Markdown的标准语法。</p> <pre tabindex="0"><code># 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 </code></pre><ul> <li>示例</li> </ul> <h1 id="一级标题">一级标题</h1> <h2 id="二级标题">二级标题</h2> <h3 id="三级标题">三级标题</h3> <h4 id="四级标题">四级标题</h4> <h5 id="五级标题">五级标题</h5> <h6 id="六级标题">六级标题</h6> <h2 id="2-文本格式text-formatting">2. 文本格式（Text Formatting）</h2> <p>Markdown提供了多种文本格式设置方式，包括加粗、斜体、删除线等，让文本更具表现力。</p> <h3 id="加粗">加粗</h3> <p>前后两个*将文字包裹起来</p> <ul> <li>示例</li> </ul> <pre tabindex="0"><code>**这是加粗的文字** </code></pre><p><strong>这是加粗的文字</strong></p> <h3 id="斜体">斜体</h3> <p>前后一个*将文字包裹起来</p> <ul> <li>示例</li> </ul> <pre tabindex="0"><code>*这是斜体的文字* </code></pre><p><em>这是斜体的文字</em></p> <h3 id="斜体加粗">斜体加粗</h3> <p>前后三个*将文字包裹起来</p> <ul> <li>示例</li> </ul> <pre tabindex="0"><code>***这是斜体加粗的文字*** </code></pre><p><em><strong>这是斜体加粗的文字</strong></em></p> <h3 id="删除线">删除线</h3> <p>添加删除线</p> <ul> <li>示例</li> </ul> <pre tabindex="0"><code>~~这是添加删除线的文字~~ </code></pre><p><del>这是添加删除线的文字</del></p> <h2 id="3-引用blockquotes">3. 引用（Blockquotes）</h2> <p>使用<code>&gt;</code>符号可以创建引用块，支持多级嵌套。引用常用于突出重要内容或引用他人观点。</p> <h3 id="不加嵌套的引用">不加嵌套的引用</h3> <ul> <li>示例</li> </ul> <pre tabindex="0"><code>&gt;引用1 &gt;引用2 &gt;引用3 </code></pre><blockquote> <p>引用1<br /> 引用2<br /> 引用3</p> </blockquote> <h3 id="添加嵌套的引用">添加嵌套的引用</h3> <ul> <li>示例</li> </ul> <pre tabindex="0"><code>&gt;引用1 &gt;&gt;引用2 &gt;&gt;&gt; 引用3 </code></pre><blockquote> <p>引用1</p> <blockquote> <p>引用2</p> <blockquote> <p>引用3</p> </blockquote> </blockquote> </blockquote> <h2 id="4-分割线horizontal-rules">4. 分割线（Horizontal Rules）</h2> <div class="alert alert-warning" role="alert" data-dir="ltr">需要注意的是至少需要三个同样的符号以上</div> <ul> <li>以下几种都可以</li> <li>示例</li> </ul> <pre tabindex="0"><code>--- ---- *** ***** </code></pre><hr /> <hr /> <hr /> <hr /> <h2 id="5-图片images">5. 图片（Images）</h2> <p>Markdown支持插入图片，并可以添加替代文本和标题。正确的图片格式能提升文档的可读性和SEO效果。</p> <ul> <li>示例</li> </ul> <pre tabindex="0"><code> </code></pre><p><img alt="cnsre运维博客|Linux系统运维|自动化运维|云计算|运维监控" src="https://cdn.jsdelivr.net/gh/zops/ImagesHosting/cnsre/20210421130359.png" title="SRE运维博客|Linux系统运维|自动化运维|云计算|运维监控|"></p> <h2 id="6-链接links">6. 链接（Links）</h2> <ul> <li>示例</li> </ul> <pre tabindex="0"><code>[SRE运维博客](https://cnsre.cn) 行内链接[SRE](https://cnsre.cn) </code></pre><p><a href="https://cnsre.cn">SRE运维博客</a><br /> 行内链接<a href="https://cnsre.cn">SRE运维博客</a></p> <h2 id="7-代码code">7. 代码（Code）</h2> <p>Markdown对代码的支持是其一大特色，支持行内代码和代码块，是技术文档写作的利器。</p> <h3 id="代码块">代码块</h3> <ul> <li>示例</li> </ul> <pre tabindex="0"><code>这是`代码块` </code></pre><p>这是<code>代码块</code></p> <h3 id="单窗口代码">单窗口代码</h3> <ul> <li>示例</li> </ul> <p>```<br /> hello SRE运维博客<br /> ```</p> <pre tabindex="0"><code>hello SRE运维博客 </code></pre><h3 id="多窗口代码块">多窗口代码块</h3> <div class="alert alert-warning" role="alert" data-dir="ltr">！注意<br /> 次格式仅适用于本博客</div> <ul> <li>示例<br /> {{&lt; codes python shell&gt;}}<br /> {{&lt;code&gt;}}<br /> ``` python<br /> #!/usr/bin/env python<br /> #coding=utf-8<br /> print &ldquo;hello SRE运维博客&rdquo;<br /> ```<br /> {{&lt;/code&gt;}}<br /> {{&lt;code&gt;}}<br /> ``` shell<br /> #!/bin/bash<br /> echo &ldquo;hello SRE运维博客&rdquo;<br /> ```<br /> {{&lt;/code&gt;}}<br /> {{&lt;/codes&gt;}}</li> </ul> <div id="fda116ec40662497" class="codetab"> <div class="codetab__links"> <button class="codetab__link" aria-label="Tab link">python</button> <button class="codetab__link" aria-label="Tab link">shell</button> </div> <div id="a8ee6281787cf96e" class="codetab__content"> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="ch">#!/usr/bin/env python</span> </span></span><span class="line"><span class="cl"><span class="c1">#coding=utf-8</span> </span></span><span class="line"><span class="cl"><span class="nb">print</span> <span class="s2">&#34;hello SRE运维博客&#34;</span> </span></span></code></pre></td></tr></table> </div> </div> </div> <div id="722d7849f25224c4" class="codetab__content"> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl"><span class="cp">#!/bin/bash </span></span></span><span class="line"><span class="cl"><span class="cp"></span><span class="nb">echo</span> <span class="s2">&#34;hello SRE运维博客&#34;</span> </span></span></code></pre></td></tr></table> </div> </div> </div> </div> <script> 'use strict'; var containerId = JSON.parse("\"fda116ec40662497\""); var containerElem = document.getElementById(containerId); var codetabLinks = null; var codetabContents = null; var ids = []; if (containerElem) { codetabLinks = containerElem.querySelectorAll('.codetab__link'); codetabContents = containerElem.querySelectorAll('.codetab__content'); } for (var i = 0; i < codetabContents.length; i++) { ids = ids.concat(codetabContents[i].getAttribute('id')); codetabContents[i].style.display = 'none'; if (0 === parseInt(i, 10) && !codetabContents[i].classList.contains('active')) { codetabContents[i].classList.add('active'); } } for (var i = 0; i < codetabLinks.length; i++) { codetabLinks[i].setAttribute('id', ids[i]); if (0 === parseInt(i, 10) && !codetabLinks[i].classList.contains('active')) { codetabLinks[i].classList.add('active'); } else { codetabLinks[i].classList.remove('active'); } } if (codetabContents.length > 0) { codetabContents[0].style.display = 'block'; } </script> <h3 id="多窗口代码2">多窗口代码2</h3> <ul> <li>示例</li> </ul> <p>{{&lt; tabs 内容1 内容2 内容3 &gt;}}<br /> {{&lt; tab &gt;}}<br /> ### 内容1<br /> ```shell<br /> Hello SRE运维博客!<br /> ```<br /> ⚠️内容描述<br /> {{&lt; /tab &gt;}}<br /> {{&lt; tab &gt;}}<br /> ### 内容2<br /> ```shell<br /> Hello SRE运维博客!<br /> ```<br /> {{&lt; /tab &gt;}}<br /> {{&lt; tab &gt;}}<br /> ### 内容3<br /> ```shell<br /> Hello SRE运维博客!<br /> ```<br /> {{&lt; /tab &gt;}}<br /> {{&lt; /tabs &gt;}}</p> <div id="9ee809fcea2bf15a" class="tab"> <div class="tab__links"> <button class="tab__link" aria-label="Tab link">内容1</button> <button class="tab__link" aria-label="Tab link">内容2</button> <button class="tab__link" aria-label="Tab link">内容3</button> </div> <div id="76d9aebaed7071d9" class="tab__content"> <h3 id="内容1">内容1</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">Hello SRE运维博客! </span></span></code></pre></td></tr></table> </div> </div><p>⚠️内容描述</p> </div> <div id="dc31a03be9798cd6" class="tab__content"> <h3 id="内容2">内容2</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">Hello SRE运维博客! </span></span></code></pre></td></tr></table> </div> </div> </div> <div id="682fe98f68c51d05" class="tab__content"> <h3 id="内容3">内容3</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">Hello SRE运维博客! </span></span></code></pre></td></tr></table> </div> </div> </div> </div> <script> 'use strict'; var containerId = JSON.parse("\"9ee809fcea2bf15a\""); var containerElem = document.getElementById(containerId); var tabLinks = null; var tabContents = null; var ids = []; if (containerElem) { tabLinks = containerElem.querySelectorAll('.tab__link'); tabContents = containerElem.querySelectorAll('.tab__content'); } for (var i = 0; i < tabContents.length; i++) { ids = ids.concat(tabContents[i].getAttribute('id')); tabContents[i].style.display = 'none'; if (0 === parseInt(i, 10) && !tabContents[i].classList.contains('active')) { tabContents[i].classList.add('active'); } } for (var i = 0; i < tabLinks.length; i++) { tabLinks[i].setAttribute('id', ids[i]); if (0 === parseInt(i, 10) && !tabLinks[i].classList.contains('active')) { tabLinks[i].classList.add('active'); } else { tabLinks[i].classList.remove('active'); } } if (tabContents.length > 0) { tabContents[0].style.display = 'block'; } </script> <h3 id="内容折叠">内容折叠</h3> <ul> <li>示例<br /> {{&lt; expand &ldquo;点击查看&rdquo; &gt;}}<br /> #### 标题<br /> 内容<br /> {{&lt; /expand &gt;}}</li> </ul> <p>{{&lt; expand &ldquo;点击查看 2&rdquo; &gt;}}<br /> #### 标题2<br /> ``` shell<br /> Hello SRE运维博客!<br /> ```<br /> {{&lt; /expand &gt;}}</p> <p><div class="expand"> <button type="button" class="expand__button" aria-label="Expand Button"> <span class="expand-icon expand-icon__right"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z"/></svg> </span> 点击查看 </button> <div class="expand__content"> <h4 id="标题">标题</h4> <p>内容</p> </div> </div><br /> <div class="expand"> <button type="button" class="expand__button" aria-label="Expand Button"> <span class="expand-icon expand-icon__right"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z"/></svg> </span> 点击查看 2 </button> <div class="expand__content"> <h4 id="标题2">标题2</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">Hello SRE运维博客! </span></span></code></pre></td></tr></table> </div> </div> </div> </div></p> <h2 id="8-列表lists">8. 列表（Lists）</h2> <h3 id="无序列表">无序列表</h3> <p>无序列表用 - + * 任何一种都可以，注意文字前加空格</p> <ul> <li>示例</li> </ul> <pre tabindex="0"><code>* 列表1 * 列表2 * 列表3 </code></pre><ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> <h3 id="有序列表">有序列表</h3> <div class="alert alert-warning" role="alert" data-dir="ltr">数字加点，注意文字前加空格</div> <ul> <li>示例</li> </ul> <pre tabindex="0"><code>1. 列表1 2. 列表2 3. 列表3 </code></pre><ol> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ol> <h2 id="图标">图标</h2> <p>文档引用<code>libraries: &quot;mermaid&quot;</code>可以用饼图</p> <pre tabindex="0"><code class="language-mermaid" data-lang="mermaid">pie &#34;python&#34; : 20 &#34;shell&#34; : 10 &#34;go&#34; : 70 </code></pre><h2 id="9-表格tables">9. 表格（Tables）</h2> <p>文字默认居左<br /> -两边加：表示文字居中<br /> -右边加：表示文字居右</p> <ul> <li>示例</li> </ul> <pre tabindex="0"><code>表头|表头|表头 ---|:--:|---: 内容|内容|内容 内容|内容|内容 </code></pre><table> <thead> <tr> <th>表头</th> <th align="center">表头</th> <th align="right">表头</th> </tr> </thead> <tbody> <tr> <td>内容</td> <td align="center">内容</td> <td align="right">内容</td> </tr> <tr> <td>内容</td> <td align="center">内容</td> <td align="right">内容</td> </tr> </tbody> </table> <p>表格换行:加<code>&lt;br&gt;</code></p> <ul> <li>示例</li> </ul> <pre tabindex="0"><code>表头|表头|表头 ---|:--:|---: 内容|内容 &lt;br&gt; 内容|内容 内容|内容|内容 </code></pre><table> <thead> <tr> <th>表头</th> <th align="center">表头</th> <th align="right">表头</th> </tr> </thead> <tbody> <tr> <td>内容</td> <td align="center">内容 <br> 内容</td> <td align="right">内容</td> </tr> <tr> <td>内容</td> <td align="center">内容</td> <td align="right">内容</td> </tr> </tbody> </table> <h2 id="10-转义字符escaping-characters">10. 转义字符（Escaping Characters）</h2> <p>用\来实现转义字符的效果</p> <ul> <li>示例</li> </ul> <pre tabindex="0"><code>\\ 反斜线 \` 反引号 \* 星号 \_ 底线 \{ 左花括号 \} 右花括号 \[ 左方括号 \] 右方括号 </code></pre><p>\ 反斜线<br /> ` 反引号<br /> * 星号<br /> _ 底线<br /> { 左花括号<br /> } 右花括号<br /> [ 左方括号<br /> ] 右方括号</p> <h2 id="11-自动链接automatic-links">11. 自动链接（Automatic Links）</h2> <p>自动链接只要是用尖括号包起来，就会自动被转成链接。一般网址的链接文字就和链接地址一样。<br /> 另外一种添加描述的链接示例如下，不显示链接地址</p> <ul> <li>示例</li> </ul> <pre tabindex="0"><code>&lt;https://zops.github.io&gt; // 添加描述的链接 [Zops](https://zops.github.io &#34;超链接title&#34;) </code></pre><p><a href="https://zops.github.io">https://zops.github.io</a><br /> 添加描述的链接<br /> <a href="https://zops.github.io" title="超链接title">Zops</a></p> <h2 id="12-高级功能advanced-features">12. 高级功能（Advanced Features）</h2> <div class="notices warning" data-title="注意"> 次格式只适合本博客 </div> <ul> <li>实例</li> </ul> <p>{{&lt; notice success &ldquo;这是成功的通知类型&rdquo; &gt;}}<br /> success, info, warning, error<br /> success text<br /> {{&lt; /notice &gt;}}</p> <h3 id="成功类型通知">成功类型通知</h3> <div class="notices success" data-title="这是成功的通知类型"> success, info, warning, error<br /> success text </div> <h3 id="信息类型通知">信息类型通知</h3> <div class="notices info" data-title="这是通知的信息类型"> success, info, warning, error<br /> success text </div> <h3 id="告警类型通知">告警类型通知</h3> <div class="notices warning" data-title="这是警告类型的通知"> success, info, warning, error<br /> success text </div> <ul> <li>示例</li> </ul> <p>{{&lt; notice error &ldquo;这是通知的错误类型&rdquo; &gt;}}<br /> success, info, warning, error<br /> success text<br /> {{&lt; /notice &gt;}}</p> <p><strong>这是通知的错误类型</strong><br /> <div class="notices error" data-title="这是通知的错误类型"> success, info, warning, error<br /> success text </div></p> <p><strong>彩色告警文本框</strong></p> <div class="alert alert-warning" role="alert" data-dir="ltr">warning, success, info, danger<br /> <em><strong>this is a text</strong></em></div> <div class="alert alert-success" role="alert" data-dir="ltr">warning, success, info, danger<br /> <em><strong>this is a text</strong></em></div> <p><div class="alert alert-danger" role="alert" data-dir="ltr">warning, success, info, danger<br /> <em><strong>this is a text</strong></em></div><br /> <a href="https://www.cnsre.cn/posts/210316100350/">文章链接</a><br /> <a href="https://www.cnsre.cn/posts/210316100350/">https://www.cnsre.cn/posts/210316100350/</a></p> Wenlong featured image markdown blog blog