gitea-yuany3721/vuepress-theme-plume
1
0
Fork 1
mirror of https://github.com/pengzhanbo/vuepress-theme-plume.git synced 2026-04-23 10:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity
vuepress-theme-plume/assets/basic-CvvQTYxL.js

161 lines
121 KiB
JavaScript
Raw Blame History

import{P as e,f as t,h as n}from"./runtime-core.esm-bundler-TY2dTQsQ.js";import{t as r}from"./plugin-vue_export-helper-PrwMxFSs.js";var i=JSON.parse(`{"path":"/en/guide/markdown/basic/","title":"Basic | Guide","lang":"en-US","frontmatter":{"title":"Basic","icon":"fluent:markdown-20-filled","createTime":"2025/03/03 13:55:19","permalink":"/en/guide/markdown/basic/","tags":["Guide","markdown"],"description":"This document is forked from vuepress-theme-hope, following the MIT license. Markdown is a markup language that can be written using a plain text editor. Through simple syntax, ...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"Basic\\",\\"image\\":[\\"https://theme-plume.vuejs.press/path/to/img.jpg\\",\\"https://theme-plume.vuejs.press/path/to/img.jpg \\\\\\"Optional title\\\\\\"\\"],\\"dateModified\\":\\"2025-10-07T15:13:09.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/en/guide/markdown/basic/"}],["meta",{"property":"og:site_name","content":"Plume Theme"}],["meta",{"property":"og:title","content":"Basic"}],["meta",{"property":"og:description","content":"This document is forked from vuepress-theme-hope, following the MIT license. Markdown is a markup language that can be written using a plain text editor. Through simple syntax, ..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:image","content":"https://theme-plume.vuejs.press/path/to/img.jpg"}],["meta",{"property":"og:locale","content":"en-US"}],["meta",{"property":"og:locale:alternate","content":"zh-CN"}],["meta",{"property":"og:updated_time","content":"2025-10-07T15:13:09.000Z"}],["meta",{"property":"article:tag","content":"markdown"}],["meta",{"property":"article:tag","content":"Guide"}],["meta",{"property":"article:modified_time","content":"2025-10-07T15:13:09.000Z"}],["link",{"rel":"alternate","hreflang":"zh-cn","href":"https://theme-plume.vuejs.press/guide/markdown/basic/"}]]},"readingTime":{"minutes":11.45,"words":3434},"git":{"createdTime":1741490087000,"updatedTime":1759849989000,"contributors":[{"name":"zhenghaoyang24","username":"zhenghaoyang24","email":"95458562+zhenghaoyang24@users.noreply.github.com","commits":2,"avatar":"https://avatars.githubusercontent.com/zhenghaoyang24?v=4","url":"https://github.com/zhenghaoyang24"},{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":4,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"4d2361a7046214fe0f4e4af01831107fd00e38ad","time":1759849989000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme)!: add collections support (#704)"},{"hash":"9f99ae3ca72b3085c6cd383a9084f42be299c400","time":1743080813000,"email":"95458562+zhenghaoyang24@users.noreply.github.com","author":"zhenghaoyang24","message":"docs: add en <code>markdown</code> doc (#538)","coAuthors":[{"name":"pengzhanbo","email":"volodymyr@foxmail.com"}]},{"hash":"0fd6cac57412002f4d72dc10378789b529adc357","time":1742063370000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"refactor(theme): improve types and flat config (#524)"},{"hash":"a4ac3a30e0b74175b3cd4fd82c52b2321b013926","time":1741490087000,"email":"95458562+zhenghaoyang24@users.noreply.github.com","author":"zhenghaoyang24","message":"docs: add en-US docs (#514)","coAuthors":[{"name":"pengzhanbo","email":"volodymyr@foxmail.com"}]}]},"autoDesc":true,"filePathRelative":"en/guide/markdown/basic.md","headers":[],"bulletin":false}`),a={name:`basic.md`};function o(r,i,a,o,s,c){return e(),t(`div`,null,[...i[0]||=[n(`<div class="hint-container note"><p class="hint-container-title">This document is forked from <a href="https://theme-hope.vuejs.press/zh/cookbook/markdown/" target="_blank" rel="noopener noreferrer">vuepress-theme-hope</a>, following the <a href="https://github.com/vuepress-theme-hope/vuepress-theme-hope/blob/main/LICENSE" target="_blank" rel="noopener noreferrer">MIT</a> license.</p></div><p>Markdown is a markup language that can be written using a plain text editor. Through simple syntax, it allows regular text content to have formatting capabilities.</p><p>The goal of Markdown is to achieve「readability and writability」.</p><h2 id="overview" tabindex="-1"><a class="header-anchor" href="#overview"><span>Overview</span></a></h2><p>The most emphasized aspect is its readability. A document written in Markdown should be directly publishable as plain text, and should not appear to be composed of tags or formatting instructions. Markdown syntax is influenced by several existing text-to-HTML formats, including <a href="http://docutils.sourceforge.net/mirror/setext.html" target="_blank" rel="noopener noreferrer">Setext</a>, <a href="http://www.aaronsw.com/2002/atx/" target="_blank" rel="noopener noreferrer">atx</a>, <a href="http://textism.com/tools/textile/" target="_blank" rel="noopener noreferrer">Textile</a>, <a href="http://docutils.sourceforge.net/rst.html" target="_blank" rel="noopener noreferrer">reStructuredText</a>, <a href="http://www.triptico.com/software/grutatxt.html" target="_blank" rel="noopener noreferrer">Grutatxt</a>, and <a href="http://ettext.taint.org/doc/" target="_blank" rel="noopener noreferrer">EtText</a>, with the primary inspiration coming from plain text email formatting.</p><p>Thus, Markdown syntax consists entirely of punctuation marks, carefully selected to visually represent their meaning. For example, adding asterisks around text looks like *emphasis*. Markdown lists look like lists. If you&#39;ve used email, blockquotes resemble quoted text.</p><p>Markdown has various derivatives to extend its functionality (e.g., tables, footnotes, embedded HTML), features not originally available in basic Markdown. These enable conversion to formats like LaTeX, Docbook. Notable enhanced versions include Markdown Extra, MultiMarkdown, and Maruku. These derivatives are either tool-based (e.g., Pandoc) or website-based (e.g., GitHub, Wikipedia), maintaining basic syntax compatibility but modifying rendering effects.</p><h2 id="usage" tabindex="-1"><a class="header-anchor" href="#usage"><span>Usage</span></a></h2><p>Markdown&#39;s syntax has a primary purpose: to serve as a writing language for web content. Markdown focuses on making documents easier to read and write, thus its syntax only covers what plain text can represent.</p><p>Markdown&#39;s syntax is simple, easy to learn, and more powerful than plain text, making it popular for blogging. WordPress, the world&#39;s most popular blogging platform, supports Markdown well.</p><p>It&#39;s used for documentation, typically saved as <code>README.md</code> in software directories.</p><p>Additionally, Markdown can quickly convert to presentation slides, Word documents, LaTeX papers, or even minimal viable prototypes with minimal code. In data science, Markdown has become essential for dynamic reproducible research.</p><h3 id="inline-html" tabindex="-1"><a class="header-anchor" href="#inline-html"><span>Inline HTML</span></a></h3><p>Any HTML tags not covered by Markdown can be directly written in the document. No special annotation is needed; simply include the tags.</p><p>Block-level elements like <code>&lt;div&gt;</code>, <code>&lt;table&gt;</code>, <code>&lt;pre&gt;</code>, and <code>&lt;p&gt;</code> must be separated by blank lines. These tags cannot be indented with tabs or spaces. Markdown&#39;s parser intelligently avoids adding unnecessary <code>&lt;p&gt;</code> tags around block elements.</p><p>For example, adding an HTML table in a Markdown file:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">This is a regular paragraph.</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">table</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Foo</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">table</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">This is another regular paragraph.</span></span></code></pre></div><p>Note that Markdown syntax is not processed within HTML blocks. For instance, you cannot use <code>*emphasis*</code> inside HTML blocks.</p><h3 id="special-character-auto-conversion" tabindex="-1"><a class="header-anchor" href="#special-character-auto-conversion"><span>Special Character Auto-Conversion</span></a></h3><p>In HTML files, two characters require special handling: <code>&lt;</code> and <code>&amp;</code>. The <code>&lt;</code> character starts a tag, and <code>&amp;</code> marks an HTML entity. If you want to use these characters literally, you must use their entity forms, like <code>&amp;lt;</code> and <code>&amp;amp;</code>.</p><p>The <code>&amp;</code> character can be problematic for those writing web documents. If you want to write &quot;AT&amp;T,&quot; you must write &quot;AT&amp;T.&quot; You also need to escape the <code>&amp;</code> in URLs. For example, if you want to link to <code>http://images.google.com/images?num=30&amp;q=larry+bird</code></p><p>you must convert the URL to:</p><div class="language-html" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">http://images.google.com/images?num=30</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">amp</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">q=larry+bird</span></span></code></pre></div><p>to place it in the <code>href</code> attribute of a link tag. It&#39;s easy to forget this, and it might be the most common error detected by HTML validators.</p><p>Markdown allows you to use these characters directly, but you need to be careful with escape characters. If you use <code>&amp;</code> in an HTML entity, it won&#39;t be converted. In other cases, it will be converted to <code>&amp;amp;</code>. So, if you want to insert a copyright symbol in your text, you can write:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">copy</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span></code></pre></div><p>Markdown will not modify this text. However, if you write:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">AT&amp;T</span></span></code></pre></div><p>Markdown will convert it to:</p><div class="language-html" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">AT</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">amp</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">T</span></span></code></pre></div><p>Similar behavior occurs with the <code>&lt;</code> character. Since Markdown supports <a href="#inline-html">inline HTML</a>, if you use <code>&lt;</code> as an HTML tag, Markdown won&#39;t convert it. But if you write:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">4 &lt; 5</span></span></code></pre></div><p>Markdown will convert it to:</p><div class="language-html" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">4 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">lt</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 5</span></span></code></pre></div><p>Note that within code spans, whether inline or block, both <code>&lt;</code> and <code>&amp;</code> are always converted to HTML entities. This feature allows you to easily write HTML code in Markdown, as you don&#39;t have to convert all <code>&lt;</code> and <code>&amp;</code> in HTML syntax to HTML entities to write HTML code.</p><hr><h2 id="block-elements" tabindex="-1"><a class="header-anchor" href="#block-elements"><span>Block Elements</span></a></h2><h3 id="paragraphs-and-line-breaks" tabindex="-1"><a class="header-anchor" href="#paragraphs-and-line-breaks"><span>Paragraphs and Line Breaks</span></a></h3><p>A paragraph is composed of one or more connected lines, and one or more blank lines separate different paragraphs. (A blank line is defined as a line that appears empty; for example, a line with only spaces and tabs is also considered a blank line.) Generally, paragraphs do not require indentation with spaces or tabs.</p><p>The phrase &quot;composed of one or more connected lines&quot; implies that Markdown allows forced line breaks within paragraphs. This differs from other text-to-HTML formats (including MovableType&#39;s &quot;Convert Line Breaks&quot; option), which convert every line break into a <code>&lt;br /&gt;</code> tag.</p><p>If you really want to insert a <code>&lt;br /&gt;</code> tag, add two or more spaces (<code></code>) or a slash (<code>/</code>) at the end of the line, then press Enter.</p><p>Yes, this requires more effort to insert a <code>&lt;br /&gt;</code>, but the method of converting every line break to <code>&lt;br /&gt;</code> is not suitable for Markdown. In Markdown, email-style <a href="#blockquotes">block quotes</a> and multi-paragraph <a href="#lists">lists</a> are more usable and readable when using line breaks for formatting.</p><h3 id="headings" tabindex="-1"><a class="header-anchor" href="#headings"><span>Headings</span></a></h3><p>Headings indicate the structure of an article.</p><p>Markdown supports two heading syntax styles: <a href="http://docutils.sourceforge.net/mirror/setext.html" target="_blank" rel="noopener noreferrer">Setext</a> and <a href="http://www.aaronsw.com/2002/atx/" target="_blank" rel="noopener noreferrer">atx</a>.</p><p>The Setext style uses underlines with <code>=</code> (for first-level headings) and <code>-</code> (for second-level headings), like:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-light-font-weight:bold;--shiki-dark:#666666;--shiki-dark-font-weight:bold;">#</span><span style="--shiki-light:#1C6B48;--shiki-light-font-weight:bold;--shiki-dark:#4D9375;--shiki-dark-font-weight:bold;"> This is an H1</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-light-font-weight:bold;--shiki-dark:#666666;--shiki-dark-font-weight:bold;">##</span><span style="--shiki-light:#1C6B48;--shiki-light-font-weight:bold;--shiki-dark:#4D9375;--shiki-dark-font-weight:bold;"> This is an H2</span></span></code></pre></div><p>Any number of <code>=</code> or <code>-</code> characters can be used.</p><p>The Atx style (recommended) involves placing 1 to 6 <code>#</code> characters at the beginning of a line, corresponding to heading levels 1 to 6, like:</p><ul><li>H1: <code># Header 1</code></li><li>H2: <code>## Header 2</code></li><li>H3: <code>### Header 3</code></li><li>H4: <code>#### Header 4</code></li><li>H5: <code>##### Header 5</code></li><li>H6: <code>###### Header 6</code></li></ul><h3 id="blockquotes" tabindex="-1"><a class="header-anchor" href="#blockquotes"><span>Blockquotes</span></a></h3><p>Markdown uses email-style block quotes. If you&#39;re familiar with quoting in emails, you&#39;ll know how to create a block quote in a Markdown file. It looks like a forced line break with <code>&gt;</code> at the beginning of each line:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#2E808F;--shiki-dark:#5D99A9;"> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#2E808F;--shiki-dark:#5D99A9;"> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#2E808F;--shiki-dark:#5D99A9;"> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#2E808F;--shiki-dark:#5D99A9;"> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#2E808F;--shiki-dark:#5D99A9;"> id sem consectetuer libero luctus adipiscing.</span></span></code></pre></div><p>Markdown also allows you to place <code>&gt;</code> only at the beginning of the first line of a paragraph:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#2E808F;--shiki-dark:#5D99A9;"> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#2E808F;--shiki-dark:#5D99A9;"> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#2E808F;--shiki-dark:#5D99A9;"> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#2E808F;--shiki-dark:#5D99A9;"> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#2E808F;--shiki-dark:#5D99A9;"> id sem consectetuer libero luctus adipiscing.</span></span></code></pre></div><p>Block quotes can have levels (e.g., quotes within quotes) by adding more <code>&gt;</code> characters according to the level:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#2E808F;--shiki-dark:#5D99A9;"> This is the first level of quoting.</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &gt;</span><span style="--shiki-light:#2E808F;--shiki-dark:#5D99A9;"> This is nested blockquote.</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#2E808F;--shiki-dark:#5D99A9;"> Back to the first level.</span></span></code></pre></div><p>Other Markdown syntax, including headings, lists, and code blocks, can be used within block quotes:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#999999;--shiki-light-font-weight:bold;--shiki-dark:#666666;--shiki-dark-font-weight:bold;"> ##</span><span style="--shiki-light:#1C6B48;--shiki-light-font-weight:bold;--shiki-dark:#4D9375;--shiki-dark-font-weight:bold;"> This is a header.</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;"> 1.</span><span style="--shiki-light:#2E808F;--shiki-dark:#5D99A9;"> This is the first list item.</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;"> 1.</span><span style="--shiki-light:#2E808F;--shiki-dark:#5D99A9;"> This is the second list item.</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#2E808F;--shiki-dark:#5D99A9;"> Here&#39;s some example code:</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#1C6B48;--shiki-dark:#4D9375;"> return shell_exec(&quot;echo $input | $markdown_script&quot;);</span></span></code></pre></div><p>Any standard text editor can easily create email-style quotes. For example, in BBEdit, you can select text and choose &quot;Increase Quote Level&quot; from the menu.</p><h3 id="lists" tabindex="-1"><a class="header-anchor" href="#lists"><span>Lists</span></a></h3><p>Markdown supports ordered and unordered lists.</p><p>Unordered lists use hyphens as list markers (you can also use asterisks or plus signs):</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Red</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Green</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Blue</span></span></code></pre></div><p>You can also (though not recommended):</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Red</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Green</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Blue</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">*</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Red</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">*</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Green</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">*</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Blue</span></span></code></pre></div><p>Ordered lists use numbers followed by a period:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">1.</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Bird</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">2.</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> McHale</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">3.</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Parish</span></span></code></pre></div><p>Importantly, the numbers you use for list markers do not affect the HTML output. The HTML for the above list would be:</p><div class="language-html" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">ol</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Bird</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">McHale</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Parish</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">ol</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre></div><p>If you write the list markers as:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">1.</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Bird</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">1.</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> McHale</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">1.</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Parish</span></span></code></pre></div><p>You&#39;ll still get the same HTML output. The key point is that you can make the list numbers in the Markdown file match the output, or just use <code>1</code> and not worry about the numbering.</p><p>List markers are typically placed at the left margin but can be indented by up to three spaces, with at least one space or tab after the marker.</p><p>To make lists look neater, you can align the content with consistent indentation:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> viverra nec, fringilla in, laoreet vitae, risus.</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Donec sit amet nisl. Aliquam semper ipsum sit amet velit.</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Suspendisse id sem consectetuer libero luctus adipiscing.</span></span></code></pre></div><p>However, if you&#39;re lazy, you don&#39;t have to:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> viverra nec, fringilla in, laoreet vitae, risus.</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Donec sit amet nisl. Aliquam semper ipsum sit amet velit.</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Suspendisse id sem consectetuer libero luctus adipiscing.</span></span></code></pre></div><p>If list items are separated by blank lines, Markdown will wrap the item content in <code>&lt;p&gt;</code> tags. For example:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Bird</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Magic</span></span></code></pre></div><p>Would be converted to:</p><div class="language-html" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">ul</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Bird</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Magic</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">ul</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre></div><p>But this:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Bird</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Magic</span></span></code></pre></div><p>Would be converted to:</p><div class="language-html" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">ul</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Bird</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Magic</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">ul</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre></div><p>List items can contain multiple paragraphs, with each paragraph indented by 4 spaces or one tab:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">1.</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> This is a list item with two paragraphs. Lorem ipsum dolor</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> sit amet, consectetuer adipiscing elit. Aliquam hendrerit</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> mi posuere lectus.</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Vestibulum enim wisi, viverra nec, fringilla in, laoreet</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> vitae, risus. Donec sit amet nisl. Aliquam semper ipsum</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> sit amet velit.</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">2.</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Suspendisse id sem consectetuer libero luctus adipiscing.</span></span></code></pre></div><p>If every line is indented, it looks better, but again, if you&#39;re lazy, Markdown allows:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> This is a list item with two paragraphs.</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> This is the second paragraph in the list item. You&#39;re</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> only required to indent the first line. Lorem ipsum dolor</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> sit amet, consectetuer adipiscing elit.</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Another item in the same list.</span></span></code></pre></div><p>To include a quote within a list item, the <code>&gt;</code> needs to be indented:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> A list item with a blockquote:</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &gt;</span><span style="--shiki-light:#2E808F;--shiki-dark:#5D99A9;"> This is a blockquote</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &gt;</span><span style="--shiki-light:#2E808F;--shiki-dark:#5D99A9;"> inside a list item.</span></span></code></pre></div><p>Accidental lists can occur with syntax like:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">1986.</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> What a great season.</span></span></code></pre></div><p>To avoid this, place a backslash before the period:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">1986</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">\\.</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> What a great season.</span></span></code></pre></div><h3 id="code-blocks" tabindex="-1"><a class="header-anchor" href="#code-blocks"><span>Code Blocks</span></a></h3><p>For code writing or raw code of markup languages, you often need preformatted code blocks that shouldn&#39;t be formatted like regular paragraphs but displayed as-is. Markdown wraps these code blocks with <code>&lt;pre&gt;</code> and <code>&lt;code&gt;</code> tags.</p><p>Creating a code block in Markdown is simple: indent every line with 4 spaces or one tab. For example:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">This is a normal paragraph:</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">This is a code block.</span></span></code></pre></div><p>Markdown converts this to:</p><div class="language-html" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">This is a normal paragraph:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">pre</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">code</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">This is a code block.</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">code</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">pre</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre></div><p>The indentation (4 spaces or one tab) is removed, so:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Here is an example of AppleScript:</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">tell application &quot;Foo&quot;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">beep</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">end tell</span></span></code></pre></div><p>Becomes:</p><div class="language-html" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Here is an example of AppleScript:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">pre</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">code</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">tell application &quot;Foo&quot;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> beep</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">end tell</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">code</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">pre</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre></div><p>A code block continues until a line with no indentation (or the end of the file).</p><p>Within code blocks, <code>&lt;</code>, <code>&amp;</code>, and <code>&gt;</code> are automatically converted to HTML entities, making it easy to insert HTML code examples. Just copy, paste, and indent, and Markdown handles the rest. For example:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">html</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> class</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">footer</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">copy</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 2004 Foo Corporation</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span></span></code></pre></div><p>Is converted to:</p><div class="language-html" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">pre</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">code</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">lt</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">div class=&quot;footer&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">gt</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">amp</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">copy; 2004 Foo Corporation</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">lt</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">/div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">gt</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">code</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">pre</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre></div><p>In code blocks, regular Markdown syntax isn&#39;t processed, so asterisks remain asterisks. This allows you to easily write about Markdown syntax.</p><p>If you want to include Markdown-formatted code libraries within a code block, you can nest them.</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">md</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">js</span></span>
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">\`\`\`</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`\`</span></span></code></pre></div><p>Renders as</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">js</span></span>
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span></span></code></pre></div><h3 id="horizontal-rules" tabindex="-1"><a class="header-anchor" href="#horizontal-rules"><span>Horizontal Rules</span></a></h3><p>You can create a horizontal rule by placing three or more asterisks, hyphens, or underscores on a line. No other content should be on the line. You can also add spaces between the characters. Any of the following will create a horizontal rule:</p><div class="language-html" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">---(recommended) * * * *** ***** - - - ---------------------------------------</span></span></code></pre></div><h2 id="inline-elements" tabindex="-1"><a class="header-anchor" href="#inline-elements"><span>Inline Elements</span></a></h2><h3 id="links" tabindex="-1"><a class="header-anchor" href="#links"><span>Links</span></a></h3><p>Markdown supports two types of link syntax: <em>inline</em> and <em>reference</em>.</p><p>In both cases, link text is marked with <code>[square brackets]</code>.</p><p>For an inline link, immediately after the square brackets, add parentheses with the URL. You can also include a title in quotes, like:</p><div class="language-html" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">This is [an example](http://example.com/ &quot;Title&quot;) inline link. [This</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">link](http://example.net/ ) has no title attribute.</span></span></code></pre></div><p>This produces:</p><div class="language-html" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> This is </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">http://example.com/ </span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Title</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> an example</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> inline</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> link.</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">http://example.net/ </span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">This link</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> has no title attribute.</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre></div><p>For linking to resources on the same host, you can use relative paths:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">See my </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">About</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">/about/</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> page for details.</span></span></code></pre></div><p>Reference-style links use another set of square brackets after the link text, with an identifier for the link:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">This is </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">an example</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">][</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">id</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> reference-style link.</span></span></code></pre></div><p>Then, define the link identifier anywhere in the document:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">id</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]:</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;"> http://example.com/</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> &quot;Optional Title Here&quot;</span></span></code></pre></div><p>The link definition consists of:</p><ul><li>Square brackets with the link ID</li><li>A colon</li><li>One or more spaces or a tab</li><li>The URL</li><li>An optional title in single quotes, double quotes, or parentheses</li></ul><p>These three link definitions are equivalent:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">foo</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]:</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;"> http://example.com/</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> &quot;Optional Title Here&quot;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">foo</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]:</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;"> http://example.com/</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> &quot;Optional Title Here&quot;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">foo</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]:</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;"> http://example.com/</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> &quot;Optional Title Here&quot;</span></span></code></pre></div><p><strong>Note:</strong> A known issue is that Markdown.pl 1.0.1 ignores single-quoted link titles.</p><p>URLs in link definitions can be enclosed in square brackets:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">id</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]:</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;"> http://example.com/</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> &quot;Optional Title Here&quot;</span></span></code></pre></div><p>You can also place the title on a new line with indentation for better readability with long URLs:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">id</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]:</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;"> http://example.com/longish/path/to/resource/here</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> &quot;Optional Title Here&quot;</span></span></code></pre></div><p>Link identifiers are case-insensitive and can include letters, numbers, spaces, and punctuation. These two links are the same:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">link text</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">][</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">link text</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">][</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]</span></span></code></pre></div><p>The <em>default link ID</em> feature allows you to omit the link ID, making it the same as the link text. To use this, add empty square brackets after the link text. For example:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Google</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">][]</span></span></code></pre></div><p>Then define the link:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">google</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]:</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;"> http://google.com/</span></span></code></pre></div><p>Since link text can contain spaces, the simplified ID can also include multiple words:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Visit </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Daring Fireball</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">][]</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> for more information.</span></span></code></pre></div><p>Then define the link:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">daring fireball</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]:</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;"> http://daringfireball.net/</span></span></code></pre></div><p>Link definitions can be placed anywhere in the document, either after the paragraph where the link appears or at the end like annotations.</p><p>Here&#39;s an example of reference-style links:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">I get 10 times more traffic from </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Google</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">][</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> than from</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Yahoo</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">][</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> or </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">MSN</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">][</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">3</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">.</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]:</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;"> http://google.com/</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> &quot;Google&quot;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]:</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;"> http://search.yahoo.com/</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> &quot;Yahoo Search&quot;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">3</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]:</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;"> http://search.msn.com/</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> &quot;MSN Search&quot;</span></span></code></pre></div><p>Using link names instead:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">I get 10 times more traffic from </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Google</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">][]</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> than from</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Yahoo</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">][]</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> or </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">MSN</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">][]</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">.</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">google</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]:</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;"> http://google.com/</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> &quot;Google&quot;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">yahoo</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]:</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;"> http://search.yahoo.com/</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> &quot;Yahoo Search&quot;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">msn</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]:</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;"> http://search.msn.com/</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> &quot;MSN Search&quot;</span></span></code></pre></div><p>Both methods produce the same HTML:</p><div class="language-html" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> I get 10 times more traffic from</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">http://google.com/ </span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Google</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Google</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> than from</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">http://search.yahoo.com/ </span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Yahoo Search</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Yahoo</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> or </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">http://search.msn.com/ </span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">MSN Search</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">MSN</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">.</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre></div><p>For comparison, here&#39;s the inline-style version of the same content:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">I get 10 times more traffic from </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Google</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">http://google.com/</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> &quot;Google&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">than from </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Yahoo</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">http://search.yahoo.com/</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> &quot;Yahoo Search&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> or</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">MSN</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">http://search.msn.com/</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> &quot;MSN Search&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">.</span></span></code></pre></div><p>Reference-style links are more readable. The reference-style version has 81 characters, while the inline-style version has 176, and pure HTML would have 234. In HTML, tags outnumber text.</p><p>Using Markdown&#39;s reference-style links makes the document resemble the final browser output, allowing you to keep markup details separate from the main text for uninterrupted reading.</p><h3 id="emphasis" tabindex="-1"><a class="header-anchor" href="#emphasis"><span>Emphasis</span></a></h3><p>Markdown uses asterisks (<code>*</code>) and underscores (<code>_</code>) to mark emphasis. Text surrounded by <code>*</code> or <code>_</code> is wrapped in <code>&lt;em&gt;</code>, while text surrounded by double <code>*</code> or <code>_</code> is wrapped in <code>&lt;strong&gt;</code>, like:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-light-font-weight:bold;--shiki-dark:#666666;--shiki-dark-font-weight:bold;">**</span><span style="--shiki-light:#393A34;--shiki-light-font-weight:bold;--shiki-dark:#DBD7CAEE;--shiki-dark-font-weight:bold;">double asterisks</span><span style="--shiki-light:#999999;--shiki-light-font-weight:bold;--shiki-dark:#666666;--shiki-dark-font-weight:bold;">**</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> (recommended)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-light-font-weight:bold;--shiki-dark:#666666;--shiki-dark-font-weight:bold;">**</span><span style="--shiki-light:#393A34;--shiki-light-font-weight:bold;--shiki-dark:#DBD7CAEE;--shiki-dark-font-weight:bold;">double underscores</span><span style="--shiki-light:#999999;--shiki-light-font-weight:bold;--shiki-dark:#666666;--shiki-dark-font-weight:bold;">**</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> (recommended)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-light-font-style:italic;--shiki-dark:#666666;--shiki-dark-font-style:italic;">_</span><span style="--shiki-light:#393A34;--shiki-light-font-style:italic;--shiki-dark:#DBD7CAEE;--shiki-dark-font-style:italic;">single asterisks</span><span style="--shiki-light:#999999;--shiki-light-font-style:italic;--shiki-dark:#666666;--shiki-dark-font-style:italic;">_</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-light-font-style:italic;--shiki-dark:#666666;--shiki-dark-font-style:italic;">_</span><span style="--shiki-light:#393A34;--shiki-light-font-style:italic;--shiki-dark:#DBD7CAEE;--shiki-dark-font-style:italic;">single underscores</span><span style="--shiki-light:#999999;--shiki-light-font-style:italic;--shiki-dark:#666666;--shiki-dark-font-style:italic;">_</span></span></code></pre></div><p>This converts to:</p><div class="language-html" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">em</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">single asterisks</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">em</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">em</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">single underscores</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">em</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">strong</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">double asterisks</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">strong</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">strong</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">double underscores</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">strong</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre></div><p>You can choose your preferred style, as long as you use the same character to open and close.</p><p>Emphasis can be added in the middle of words:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">un</span><span style="--shiki-light:#999999;--shiki-light-font-style:italic;--shiki-dark:#666666;--shiki-dark-font-style:italic;">*</span><span style="--shiki-light:#393A34;--shiki-light-font-style:italic;--shiki-dark:#DBD7CAEE;--shiki-dark-font-style:italic;">frigging</span><span style="--shiki-light:#999999;--shiki-light-font-style:italic;--shiki-dark:#666666;--shiki-dark-font-style:italic;">*</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">believable</span></span></code></pre></div><p>However, if <code>*</code> or <code>_</code> has spaces on both sides, it will be treated as regular text.</p><p>To insert literal asterisks or underscores, use a backslash:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">\\*</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">this text is surrounded by literal asterisks</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">\\*</span></span></code></pre></div><h3 id="code" tabindex="-1"><a class="header-anchor" href="#code"><span>Code</span></a></h3><p>To mark inline code, wrap it in backticks (<code>\`</code>), like:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Use the </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">printf()</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> function.</span></span></code></pre></div><p>This produces:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Use the </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">code</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">printf()</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">code</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> function.</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre></div><p>To include a backtick within the code, use multiple backticks to open and close the inline code:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">There is a literal backtick (\`) here.</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`</span></span></code></pre></div><p>This renders as:</p><div class="language-html" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">code</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">There is a literal backtick (\`) here.</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">code</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre></div><p>You can add a space at the start or end of the code span to include a backtick at the beginning:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">A single backtick in a code span: </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> \` </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">A backtick-delimited string in a code span: </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> \`foo\` </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`</span></span></code></pre></div><p>This results in:</p><div class="language-html" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">A single backtick in a code span: </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">code</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">\`</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">code</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">A backtick-delimited string in a code span: </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">code</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">\`foo\`</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">code</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre></div><p>Within code spans, <code>&amp;</code> and brackets are converted to HTML entities, making it easier to insert HTML code. Markdown converts:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Please don&#39;t use any </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">&lt;blink&gt;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> tags.</span></span></code></pre></div><p>To:</p><div class="language-html" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Please don&#39;t use any </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">code</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">lt</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">blink</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">gt</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">code</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> tags.</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre></div><p>You can also write:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">&amp;#8212;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> is the decimal-encoded equivalent of </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">&amp;mdash;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">.</span></span></code></pre></div><p>Which produces:</p><div class="language-html" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">code</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">amp</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">#8212;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">code</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> is the decimal-encoded equivalent of</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">code</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">amp</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">mdash;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">code</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">.</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre></div><h3 id="images" tabindex="-1"><a class="header-anchor" href="#images"><span>Images</span></a></h3><p>Creating a natural syntax for inserting images in plain text is challenging.</p><p>Markdown uses a syntax similar to links for images, supporting both <em>inline</em> and <em>reference</em> styles.</p><p>The inline image syntax looks like:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">![</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Alt text</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">/path/to/img.jpg</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">![</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Alt text</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">/path/to/img.jpg</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> &quot;Optional title&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><p>This consists of:</p><ul><li>An exclamation mark <code>!</code></li><li>Square brackets containing the image&#39;s alt text</li><li>Parentheses containing the image URL, optionally followed by a quoted title.</li></ul><p>Reference-style image syntax looks like:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">![</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Alt text</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">][</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">id</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]</span></span></code></pre></div><p>Where <code>id</code> is the image reference name, defined like:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">id</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]:</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;"> url/to/image</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> &quot;Optional title attribute&quot;</span></span></code></pre></div><p>Currently, Markdown doesn&#39;t support specifying image width and height. For that, use the regular <code>&lt;img&gt;</code> tag.</p><h3 id="other-text-styles" tabindex="-1"><a class="header-anchor" href="#other-text-styles"><span>Other Text Styles</span></a></h3><ul><li>Delete: <code>~~delete~~</code></li><li>Paragraphs: Leave a blank line between paragraphs</li><li>Line breaks: Add two spaces at the end of a line</li></ul><hr><h2 id="other" tabindex="-1"><a class="header-anchor" href="#other"><span>Other</span></a></h2><h3 id="automatic-links" tabindex="-1"><a class="header-anchor" href="#automatic-links"><span>Automatic Links</span></a></h3><p>Markdown supports concise automatic link syntax for URLs and email addresses. Enclosing text in brackets automatically converts it to a link. For example:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">http://example.com/</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre></div><p>Markdown converts this to:</p><div class="language-html" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">http://example.com/</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">http://example.com/</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre></div><p>Automatic email links are similar, but Markdown encodes characters as hexadecimal HTML entities to confuse address-harvesting bots. For example:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">address@example.com</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre></div><p>Markdown converts this to:</p><div class="language-html" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#x6D;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#x61;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">i</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#x6C;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#x74;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#x6F;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#x61;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#x64;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#x64;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#x72;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#x65;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#115;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#115;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#64;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#101;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#120;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#x61;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#109;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#x70;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#x6C;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">e</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#x2E;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#99;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#111;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#109;</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &gt;&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#x61;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#x64;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#x64;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#x72;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#x65;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#115;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#115;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#64;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#101;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#120;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#x61;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#109;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#x70;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#x6C;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">e</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#x2E;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#99;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#111;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&amp;</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">#109;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre></div><p>This creates a clickable <a href="mailto:address@example.com" target="_blank" rel="noopener noreferrer">address@example.com</a> link in the browser.</p><h3 id="escape-characters" tabindex="-1"><a class="header-anchor" href="#escape-characters"><span>Escape Characters</span></a></h3><p>Markdown uses backslashes to insert characters that have special meaning in its syntax. For example, to use asterisks for emphasis without <code>&lt;em&gt;</code> tags, precede them with a backslash:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">\\*</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">literal asterisks</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">\\*</span></span></code></pre></div><p>Markdown supports escaping the following characters:</p><ul><li><code>\\</code> backslash</li><li><code>\`</code> backtick</li><li><code>*</code> asterisk</li><li><code>_</code> underscore</li><li><code>{}</code> curly braces</li><li><code>[]</code> square brackets</li><li><code>()</code> parentheses</li><li><code>#</code> hash</li><li><code>+</code> plus</li><li><code>-</code> minus</li><li><code>.</code> period</li><li><code>!</code> exclamation mark</li></ul><h2 id="keyboard-shortcuts" tabindex="-1"><a class="header-anchor" href="#keyboard-shortcuts"><span>Keyboard Shortcuts</span></a></h2><table><thead><tr><th>Rendered Effect</th><th>Markdown Syntax</th><th>Shortcut Key</th></tr></thead><tbody><tr><td><strong>Bold</strong></td><td><code>**text**</code></td><td>Ctrl/⌘ + B</td></tr><tr><td><em>Emphasize</em></td><td><code>*text*</code></td><td>Ctrl/⌘ + I</td></tr><tr><td><code>Inline Code</code></td><td>\`code\`</td><td>Select then <code>\`</code></td></tr></tbody></table><h2 id="tables" tabindex="-1"><a class="header-anchor" href="#tables"><span>Tables</span></a></h2><table><thead><tr><th style="text-align:center;">Center</th><th style="text-align:right;">Right Aligned</th><th style="text-align:left;">Left Aligned</th></tr></thead><tbody><tr><td style="text-align:center;">Use <code>:-:</code></td><td style="text-align:right;">Use <code>-:</code></td><td style="text-align:left;">Use <code>:-</code></td></tr><tr><td style="text-align:center;">b</td><td style="text-align:right;">aaaaaaaaa</td><td style="text-align:left;">aaaa</td></tr><tr><td style="text-align:center;">c</td><td style="text-align:right;">aaaa</td><td style="text-align:left;">a</td></tr></tbody></table>`,230)]])}var s=r(a,[[`render`,o]]);export{i as _pageData,s as default};
Reference in New Issue View Git Blame Copy Permalink