hugo-WonderMod/posts/markdown-syntax/index.html

38 lines
19 KiB
HTML
Raw Normal View History

<!doctype html><html lang=en><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><title>Markdown Syntax Guide - PaperMod</title><meta name=description content="This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme."><meta name=keywords content="/"><meta name=author content="Hugo Authors"><link rel=canonical href=https://adityatelange.github.io/hugo-PaperMod/posts/markdown-syntax/><link href=https://adityatelange.github.io/hugo-PaperMod/assets/css/stylesheet.min.511ea9c64ab64e8fa908d0df9fb0698db51776924a1b4fa703c989798dfadabd.css integrity="sha256-UR6pxkq2To+pCNDfn7BpjbUXdpJKG0+nA8mJeY362r0=" rel="preload stylesheet" as=style><link rel=apple-touch-icon href=https://adityatelange.github.io/hugo-PaperMod/apple-touch-icon.png><link rel=icon href=https://adityatelange.github.io/hugo-PaperMod/favicon.ico><meta name=generator content="Hugo 0.75.1"></head><body class=single id=top><script>if(window.matchMedia('(prefers-color-scheme: dark)').matches){document.body.classList.add('dark');}</script><header class=header><nav class=nav><p class=logo><a href=https://adityatelange.github.io/hugo-PaperMod/>PaperMod</a></p><ul class=menu id=menu onscroll=menu_on_scroll()><li><a href=https://adityatelange.github.io/hugo-PaperMod/archives/><span>Archives</span></a></li><li><a href=https://adityatelange.github.io/hugo-PaperMod/tags/><span>Tags</span></a></li><li><a href=https://adityatelange.github.io/hugo-PaperMod/series/><span>Series</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><h1 class=post-title>Markdown Syntax Guide</h1><div class=post-meta><time>March 11, 2019</time>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Hugo Authors</div></header><div class=toc><details open><summary><div class=details>Table of Contents</div></summary><blockquote><ul><ul><li><a href=#headings>Headings</a></li></ul><li><a href=#h1>H1</a><ul><li><a href=#h2>H2</a><ul><li><a href=#h3>H3</a><ul><li><a href=#h4>H4</a><ul><li><a href=#h5>H5</a><ul><li><a href=#h6>H6</a></li></ul></li></ul></li></ul></li></ul></li><li><a href=#paragraph>Paragraph</a></li><li><a href=#blockquotes>Blockquotes</a><ul><ul><li><a href=#blockquote-without-attribution>Blockquote without attribution</a></li><li><a href=#blockquote-with-attribution>Blockquote with attribution</a></li></ul></ul></li><li><a href=#tables>Tables</a><ul><ul><li><a href=#inline-markdown-within-tables>Inline Markdown within tables</a></li></ul></ul></li><li><a href=#code-blocks>Code Blocks</a><ul><ul><li><a href=#code-block-with-backticks>Code block with backticks</a></li><li><a href=#code-block-indented-with-four-spaces>Code block indented with four spaces</a></li><li><a href=#code-block-with-hugos-internal-highlight-shortcode>Code block with Hugo&rsquo;s internal highlight shortcode</a></li></ul></ul></li><li><a href=#list-types>List Types</a><ul><ul><li><a href=#ordered-list>Ordered List</a></li><li><a href=#unordered-list>Unordered List</a></li><li><a href=#nested-list>Nested list</a></li></ul></ul></li><li><a href=#other-elements--abbr-sub-sup-kbd-mark>Other Elements — abbr, sub, sup, kbd, mark</a></li></ul></li></ul></blockquote></details></div><div class=post-content><p>This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.</p><h2 id=headings>Headings</h2><p>The following HTML <code>&lt;h1></code><code>&lt;h6></code> elements represent six levels of section headings. <code>&lt;h1></code> is the highest section level while <code>&lt;h6></code> is the lowest.</p><h1 id=h1>H1</h1><h2 id=h2>H2</h2><h3 id=h3>H3</h3><h4 id=h4>H4</h4><h5 id=h5>H5</h5><h6 id=h6>H6</h6><h2 id=paragraph>Paragraph</h2><p>Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dol
<strong>Note</strong> that you can use <em>Markdown syntax</em> within a blockquote.</p></blockquote><h4 id=blockquote-with-attribution>Blockquote with attribution</h4><blockquote><p>Don&rsquo;t communicate by sharing memory, share memory by communicating.
— Rob Pike<sup id=fnref:1><a href=#fn:1 class=footnote-ref role=doc-noteref>1</a></sup></p></blockquote><h2 id=tables>Tables</h2><p>Tables aren&rsquo;t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.</p><table><thead><tr><th>Name</th><th>Age</th></tr></thead><tbody><tr><td>Bob</td><td>27</td></tr><tr><td>Alice</td><td>23</td></tr></tbody></table><h4 id=inline-markdown-within-tables>Inline Markdown within tables</h4><table><thead><tr><th>Italics</th><th>Bold</th><th>Code</th></tr></thead><tbody><tr><td><em>italics</em></td><td><strong>bold</strong></td><td><code>code</code></td></tr></tbody></table><h2 id=code-blocks>Code Blocks</h2><h4 id=code-block-with-backticks>Code block with backticks</h4><div class=highlight><pre style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-html data-lang=html><span style=color:#75715e>&lt;!doctype html&gt;</span>
&lt;<span style=color:#f92672>html</span> <span style=color:#a6e22e>lang</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;en&#34;</span>&gt;
&lt;<span style=color:#f92672>head</span>&gt;
&lt;<span style=color:#f92672>meta</span> <span style=color:#a6e22e>charset</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;utf-8&#34;</span>&gt;
&lt;<span style=color:#f92672>title</span>&gt;Example HTML5 Document&lt;/<span style=color:#f92672>title</span>&gt;
&lt;/<span style=color:#f92672>head</span>&gt;
&lt;<span style=color:#f92672>body</span>&gt;
&lt;<span style=color:#f92672>p</span>&gt;Test&lt;/<span style=color:#f92672>p</span>&gt;
&lt;/<span style=color:#f92672>body</span>&gt;
&lt;/<span style=color:#f92672>html</span>&gt;
</code></pre></div><h4 id=code-block-indented-with-four-spaces>Code block indented with four spaces</h4><pre><code>&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;title&gt;Example HTML5 Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;Test&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre><h4 id=code-block-with-hugos-internal-highlight-shortcode>Code block with Hugo&rsquo;s internal highlight shortcode</h4><div class=highlight><pre style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-html data-lang=html><span style=color:#75715e>&lt;!doctype html&gt;</span>
&lt;<span style=color:#f92672>html</span> <span style=color:#a6e22e>lang</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;en&#34;</span>&gt;
&lt;<span style=color:#f92672>head</span>&gt;
&lt;<span style=color:#f92672>meta</span> <span style=color:#a6e22e>charset</span><span style=color:#f92672>=</span><span style=color:#e6db74>&#34;utf-8&#34;</span>&gt;
&lt;<span style=color:#f92672>title</span>&gt;Example HTML5 Document&lt;/<span style=color:#f92672>title</span>&gt;
&lt;/<span style=color:#f92672>head</span>&gt;
&lt;<span style=color:#f92672>body</span>&gt;
&lt;<span style=color:#f92672>p</span>&gt;Test&lt;/<span style=color:#f92672>p</span>&gt;
&lt;/<span style=color:#f92672>body</span>&gt;
&lt;/<span style=color:#f92672>html</span>&gt;</code></pre></div><h2 id=list-types>List Types</h2><h4 id=ordered-list>Ordered List</h4><ol><li>First item</li><li>Second item</li><li>Third item</li></ol><h4 id=unordered-list>Unordered List</h4><ul><li>List item</li><li>Another item</li><li>And another item</li></ul><h4 id=nested-list>Nested list</h4><ul><li>Fruit<ul><li>Apple</li><li>Orange</li><li>Banana</li></ul></li><li>Dairy<ul><li>Milk</li><li>Cheese</li></ul></li></ul><h2 id=other-elements--abbr-sub-sup-kbd-mark>Other Elements — abbr, sub, sup, kbd, mark</h2><p>GIF is a bitmap image format.</p><p>H2O</p><p>Xn + Yn = Zn</p><p>Press CTRL+ALT+Delete to end the session.</p><p>Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.</p><section class=footnotes role=doc-endnotes><hr><ol><li id=fn:1 role=doc-endnote><p>The above quote is excerpted from Rob Pike&rsquo;s <a href="https://www.youtube.com/watch?v=PAAkCSZUG1c">talk</a> during Gopherfest, November 18, 2015. <a href=#fnref:1 class=footnote-backref role=doc-backlink>&#8617;&#xfe0e;</a></p></li></ol></section></div><footer class=post-footer><ul class=post-tags><li><a href=https://adityatelange.github.io/hugo-PaperMod/tags/markdown>markdown</a></li><li><a href=https://adityatelange.github.io/hugo-PaperMod/tags/css>css</a></li><li><a href=https://adityatelange.github.io/hugo-PaperMod/tags/html>html</a></li><li><a href=https://adityatelange.github.io/hugo-PaperMod/tags/themes>themes</a></li></ul><div class=share-buttons><a target=_blank rel="noopener noreferrer" aria-label="share Markdown Syntax Guide on twitter" href="https://twitter.com/intent/tweet/?text=Markdown%20Syntax%20Guide&url=https%3a%2f%2fadityatelange.github.io%2fhugo-PaperMod%2fposts%2fmarkdown-syntax%2f"><svg viewBox="0 0 512 512"><path d="M449.446.0C483.971.0 512 28.03 512 62.554v386.892C512 483.97 483.97 512 449.446 512h-386.892c-34.524.0-62.554-28.03-62.554-62.554v-386.892c0-34.524 28.029-62.554 62.554-62.554h386.892zm-253.927 424.544c135.939.0 210.268-112.643 210.268-210.268.0-3.218.0-6.437-.153-9.502 14.406-10.421 26.973-23.448 36.935-38.314-13.18 5.824-27.433 9.809-42.452 11.648 15.326-9.196 26.973-23.602 32.49-40.92-14.252 8.429-30.038 14.56-46.896 17.931-13.487-14.406-32.644-23.295-53.946-23.295-40.767.0-73.87 33.104-73.87 73.87.0 5.824.613 11.494 1.992 16.858-61.456-3.065-115.862-32.49-152.337-77.241-6.284 10.881-9.962 23.601-9.962 37.088.0 25.594 13.027 48.276 32.95 61.456-12.107-.307-23.448-3.678-33.41-9.196v.92c0 35.862 25.441 65.594 59.311 72.49-6.13 1.686-12.72 2.606-19.464 2.606-4.751.0-9.348-.46-13.946-1.38 9.349 29.426 36.628 50.728 68.965 51.341-25.287 19.771-57.164 31.571-91.8 31.571-5.977.0-11.801-.306-17.625-1.073 32.337 21.15 71.264 33.41 112.95 33.41z"/></svg></a><a target=_blank rel="noopener noreferrer" aria-label="share Markdown Syntax Guide on linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=https%3a%2f%2fadityatelange.github.io%2fhugo-PaperMod%2fposts%2fmarkdown-syntax%2f&title=Markdown%20Syntax%20Guide&summary=Markdown%20Syntax%20Guide&source=https%3a%2f%2fadityatelange.github.io%2fhugo-PaperMod%2fposts%2fmarkdown-syntax%2f"><svg viewBox="0 0 512 512"><path d="M449.446.0C483.971.0 512 28.03 512 62.554v386.892C512 483.97 483.97 512 449.446 512h-386.892c-34.524.0-62.554-28.03-62.554-62.554v-386.892c0-34.524 28.029-62.554 62.554-62.554h386.892zM160.461 423.278V197.561h-75.04v225.717h75.04zm270.539.0v-129.439c0-69.333-37.018-101.586-86.381-101.586-39.804.0-57.634 21.891-67.617 37.266v-31.958h-75.021c.995 21.181.0 225.717.0 225.717h75.02v-126.056c0-6.748.486-13.492 2.474-18.315 5.414-13.475 17.767-27.434 38.494-27.434 27.135.0 38.007 20.707 38.007 51.037v120.768h75.024zm-307.552-334.556c-25.674.0-42.448 16.879-42.448 39.002.0 21.658 16.264 39.002 41.455 39.002h.484c26.165.0 42.452-17.344 42.452-39.002-.485-22.092-16.241-38.954-41.943-39.002z"/></svg></a><a target=_blank rel="noopener noreferrer" aria-label="share Markdown Syntax Guide on reddit" href="https://reddit.com/submit?url=https%3a%2f%2fadityatelange.github.io%2fhugo-Pa
<span>&#183;</span>
<span>Powered by <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a></span>
<span>&#183;</span>
<span>Theme <a href=https://git.io/hugopapermod rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top"><button class=top-link id=top-link type=button><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg></button></a>
<script src=https://adityatelange.github.io/hugo-PaperMod/assets/js/highlight.min.e7afc2928c0925d65c4732dfebe147014d91299a98e819e4b42f25c4fa68e91c.js integrity="sha256-56/CkowJJdZcRzLf6+FHAU2RKZqY6BnktC8lxPpo6Rw="></script><script>hljs.initHighlightingOnLoad();</script><script>window.onload=function(){if(localStorage.getItem("menu-scroll-position")){document.getElementById('menu').scrollLeft=localStorage.getItem("menu-scroll-position");}}
document.querySelectorAll('a[href^="#"]').forEach(anchor=>{anchor.addEventListener("click",function(e){e.preventDefault();document.querySelector(this.getAttribute("href")).scrollIntoView({behavior:"smooth"});});});var mybutton=document.getElementById("top-link");window.onscroll=function(){if(document.body.scrollTop>800||document.documentElement.scrollTop>800){mybutton.style.visibility="visible";mybutton.style.opacity="1";}else{mybutton.style.visibility="hidden";mybutton.style.opacity="0";}};function menu_on_scroll(){localStorage.setItem("menu-scroll-position",document.getElementById('menu').scrollLeft);}</script></body></html>