hugo-theme-more-contentful/articles/markdown-syntax-guide/index.html

535 lines
20 KiB
HTML

<!DOCTYPE html>
<html lang="en-us">
<head><title>Markdown Syntax Guide | More Contentful</title>
<link rel="stylesheet" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/css/main.min.f1121c040b0aa510fb90a5e6ff2389d0944483dd2515d61c36d0b599f873b72b.css" />
<link rel="shortcut icon" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/favicon.png" /><meta name="generator" content="Hugo 0.96.0" />
<meta charset="utf-8">
<meta name="author" content="John Doe" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="referrer" content="no-referrer" />
<meta name="description" content="The main purpose of this article is to make sure that all basic HTML Elements are decorated with CSS so as to not miss any possible elements when creating new themes for Hugo." /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Markdown Syntax Guide"/>
<meta name="twitter:description" content="The main purpose of this article is to make sure that all basic HTML Elements are decorated with CSS so as to not miss any possible elements when creating new themes for Hugo."/>
<meta property="og:title" content="Markdown Syntax Guide" />
<meta property="og:description" content="The main purpose of this article is to make sure that all basic HTML Elements are decorated with CSS so as to not miss any possible elements when creating new themes for Hugo." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://foo-dogsquared.github.io/hugo-theme-more-contentful/articles/markdown-syntax-guide/" /><meta property="article:section" content="articles" />
<meta property="article:published_time" content="2019-08-26T00:08:27+08:00" />
<meta property="article:modified_time" content="2023-02-27T13:27:15+08:00" />
<meta itemprop="name" content="Markdown Syntax Guide">
<meta itemprop="description" content="The main purpose of this article is to make sure that all basic HTML Elements are decorated with CSS so as to not miss any possible elements when creating new themes for Hugo."><meta itemprop="datePublished" content="2019-08-26T00:08:27+08:00" />
<meta itemprop="dateModified" content="2023-02-27T13:27:15+08:00" />
<meta itemprop="wordCount" content="523">
<meta itemprop="keywords" content="markdown,guide," /><link rel="canonical" type="text/html" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/articles/markdown-syntax-guide/" />
<script>
let theme = window.localStorage.getItem('theme');
if (theme) {
document.documentElement.dataset.theme = theme;
}
</script>
</head>
<body><header aria-label="Site header">
<nav>
<a class="site__title" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful">More Contentful</a>
<div class="list site__links">
<a href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/about/">About</a>
<a href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/categories/">Categories</a>
<a href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/">Recipes</a>
<a href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/tags/">Tags</a>
</div>
</nav>
<div class="site__theme-btn" aria-label="Theme toggle" aria-hidden="true">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/swatch.svg#swatch"></use>
</svg>
<div class="site__theme-dropdown">
<div class="site__theme-dropdown-list">
<div class="site__theme-item"
data-theme="Default Dark"
data-theme-dark
>Dark</div>
<div class="site__theme-item"
data-theme="Default Light"
data-theme-light
>Light</div>
<div class="site__theme-item"
data-theme="Dracula"
>Dracula</div>
<div class="site__theme-item"
data-theme="Gruvbox dark, hard"
>Gruvbox dark, hard</div>
<div class="site__theme-item"
data-theme="Gruvbox light, hard"
>Gruvbox light, hard</div>
<div class="site__theme-item"
data-theme="Nord"
>Nord</div>
<div class="site__theme-item"
data-theme="Solarized Dark"
>Solarized Dark</div>
<div class="site__theme-item"
data-theme="Solarized Light"
>Solarized Light</div>
<div class="site__theme-item" data-theme-system>
OS default
</div>
</div>
</div>
</div>
<script>
function styleTheme() {
const selectedTheme = window.localStorage.getItem("theme");
for (const el of document.querySelectorAll(".site__theme-item")) {
if (el.dataset.theme == selectedTheme) {
el.classList.add("site__theme-item--selected");
} else {
el.classList.remove("site__theme-item--selected");
}
}
}
const themeDropdown = document.querySelector('.site__theme-btn');
themeDropdown.addEventListener('click', (event) => {
const { target } = event;
if (target.classList.contains("site__theme-item")) {
if (target.dataset.theme) {
theme = target.dataset.theme;
window.localStorage.setItem("theme", theme);
document.documentElement.dataset.theme = theme;
} else {
window.localStorage.removeItem("theme");
delete document.documentElement.dataset.theme;
}
}
styleTheme();
});
styleTheme();
</script>
</header>
<hr aria-hidden="true"/>
<div class="post--single">
<main>
<article>
<header>
<h1>Markdown Syntax Guide</h1>
<div class="list post__meta" aria-hidden="true"><span>
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/calendar.svg#calendar"></use>
</svg>
<time datetime="2019-08-26T00:08:27&#43;08:00" title="Created" style="margin-left: 0.5em;">
2019-08-26
</time>
</span>
<span>
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/arrow-path.svg#arrow-path"></use>
</svg>
<time datetime="2023-02-27T13:27:15&#43;08:00" title="Updated" style="margin-left: 0.5em;">
2023-02-27
</time>
</span>
</div>
</header>
<style>
#TableOfContents:not(:empty)::before {
content: "Table of contents";
font-weight: bold;
}
</style>
<nav id="TableOfContents">
<ul>
<li><a href="#headings">Headings</a></li>
</ul>
<ul>
<li><a href="#heading-2">Heading 2</a>
<ul>
<li><a href="#heading-3">Heading 3</a></li>
</ul>
</li>
<li><a href="#paragraph">Paragraph</a></li>
<li><a href="#list-types">List Types</a>
<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>
<li><a href="#definition-list">Definition List</a></li>
</ul>
</li>
<li><a href="#blockquotes">Blockquotes</a></li>
<li><a href="#tables">Tables</a></li>
<li><a href="#code">Code</a></li>
<li><a href="#other-stuff--abbr-sub-sup-kbd-etc">Other stuff — abbr, sub, sup, kbd, etc.</a></li>
</ul>
</nav>
<p>The main purpose of this article is to make sure that all basic HTML Elements are decorated with CSS so as to not miss any possible elements when creating new themes for Hugo.</p>
<h2 id="headings">Headings</h2>
<p>Let&rsquo;s start with all possible headings. The HTML <code>&lt;h1&gt;</code><code>&lt;h6&gt;</code> elements represent six levels of section headings. <code>&lt;h1&gt;</code> is the highest section level and <code>&lt;h6&gt;</code> is the lowest.</p>
<h1 id="heading-1">Heading 1</h1>
<h2 id="heading-2">Heading 2</h2>
<h3 id="heading-3">Heading 3</h3>
<h4 id="heading-4">Heading 4</h4>
<h5 id="heading-5">Heading 5</h5>
<h6 id="heading-6">Heading 6</h6>
<h2 id="paragraph">Paragraph</h2>
<p>According to the <a href="https://www.w3.org/TR/html5/dom.html#elements">HTML5 specification</a> by <a href="https://www.w3.org/">W3C</a>, <strong>HTML documents consist of a tree of elements and text</strong>. Each element is denoted in the source by a <a href="https://www.w3.org/TR/html5/syntax.html#syntax-start-tags">start tag</a>, such as <code>&lt;body&gt;</code>, and an <a href="https://www.w3.org/TR/html5/syntax.html#syntax-end-tags">end tag</a>, such as <code>&lt;/body&gt;</code>. (<em>Certain start tags and end tags can in certain cases be omitted and are implied by other tags.</em>)</p>
<p>Elements can have attributes, which control how the elements work. For example, hyperlink are formed using the <code>a</code> element and its <code>href</code> attribute.</p>
<h2 id="list-types">List Types</h2>
<h3 id="ordered-list">Ordered List</h3>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h3 id="unordered-list">Unordered List</h3>
<ul>
<li>List item</li>
<li>Another item</li>
<li>And another item</li>
</ul>
<h3 id="nested-list">Nested list</h3>
<ul>
<li>First item</li>
<li>Second item
<ul>
<li>Second item First subitem</li>
<li>Second item second subitem
<ul>
<li>Second item Second subitem First sub-subitem</li>
<li>Second item Second subitem Second sub-subitem</li>
<li>Second item Second subitem Third sub-subitem</li>
</ul>
</li>
<li>Second item Third subitem
<ol>
<li>Second item Third subitem First sub-subitem</li>
<li>Second item Third subitem Second sub-subitem</li>
<li>Second item Third subitem Third sub-subitem</li>
</ol>
</ul>
</li>
<li>Third item</li>
</ul>
<h3 id="definition-list">Definition List</h3>
<p>HTML also supports definition lists.</p>
<dl>
<dt>Blanco tequila</dt>
<dd>The purest form of the blue agave spirit...</dd>
<dt>Reposado tequila</dt>
<dd>Typically aged in wooden barrels for between two and eleven months...</dd>
</dl>
<h2 id="blockquotes">Blockquotes</h2>
<p>The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a <code>footer</code> or <code>cite</code> element, and optionally with in-line changes such as annotations and abbreviations.</p>
<blockquote>
<p>Quoted text.
This line is part of the same quote.
Also you can <em>put</em> <strong>Markdown</strong> into a blockquote.</p>
</blockquote>
<p>Blockquote with a citation.</p>
<blockquote>
<p>My goal wasn't to make a ton of money. It was to build good computers. I only started the company when I realized I could be an engineer forever.</p>
<footer><cite>Steve Wozniak</cite></footer>
</blockquote>
<p>According to Mozilla&rsquo;s website, <q cite="https://www.mozilla.org/en-US/about/history/details/">Firefox 1.0 was released in 2004 and became a big success.</q></p>
<h2 id="tables">Tables</h2>
<p>Tables aren&rsquo;t part of the core Markdown spec, but Hugo supports them.</p>
<table>
<thead>
<tr>
<th>ID</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
</tbody>
</table>
<p>Colons can be used to align columns.</p>
<table>
<thead>
<tr>
<th style="text-align:left">Tables</th>
<th style="text-align:center">Are</th>
<th style="text-align:right">Cool</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">align: left</td>
<td style="text-align:center">align: center</td>
<td style="text-align:right">align: right</td>
</tr>
<tr>
<td style="text-align:left">align: left</td>
<td style="text-align:center">align: center</td>
<td style="text-align:right">align: right</td>
</tr>
<tr>
<td style="text-align:left">align: left</td>
<td style="text-align:center">align: center</td>
<td style="text-align:right">align: right</td>
</tr>
</tbody>
</table>
<p>You can also use inline Markdown.</p>
<table>
<thead>
<tr>
<th>Inline</th>
<th>Markdown</th>
<th>In</th>
<th>Table</th>
</tr>
</thead>
<tbody>
<tr>
<td><em>italics</em></td>
<td><strong>bold</strong></td>
<td><del>strikethrough</del></td>
<td><code>code</code></td>
</tr>
</tbody>
</table>
<h2 id="code">Code</h2>
<div class="highlight"><pre tabindex="0" 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="display:flex;"><span><span style="color:#75715e">&lt;!DOCTYPE html&gt;</span>
</span></span><span style="display:flex;"><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;
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">head</span>&gt;
</span></span><span style="display:flex;"><span> &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;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">title</span>&gt;Example HTML5 Document&lt;/<span style="color:#f92672">title</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">head</span>&gt;
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">body</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">p</span>&gt;Test&lt;/<span style="color:#f92672">p</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">body</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">html</span>&gt;
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" 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="display:flex;"><span><span style="color:#75715e">&lt;!DOCTYPE html&gt;</span>
</span></span><span style="display:flex;"><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;
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">head</span>&gt;
</span></span><span style="display:flex;"><span> &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;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">title</span>&gt;Example HTML5 Document&lt;/<span style="color:#f92672">title</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">head</span>&gt;
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">body</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">p</span>&gt;Test&lt;/<span style="color:#f92672">p</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">body</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">html</span>&gt;</span></span></code></pre></div>
<h2 id="other-stuff--abbr-sub-sup-kbd-etc">Other stuff — abbr, sub, sup, kbd, etc.</h2>
<p><abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.</p>
<p>H<sub>2</sub>O</p>
<p>C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></p>
<p>X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup></p>
<p>Press <kbd>X</kbd> to win. Or press <kbd>CTRL+ALT+F</kbd> to show FPS counter.</p>
<p><mark>As a unit of information in information theory, the bit has alternatively been called a shannon</mark>, named after Claude Shannon, the founder of field of information theory.</p>
</article>
</main>
<hr aria-hidden="true"/>
<div class="post__meta--single" aria-hidden="true">
<p data-content-publication-date="2019-08-26T00:08:27&#43;08:00">Created: <time datetime="2019-08-26T00:08:27&#43;08:00">2019-08-26</time></p>
<p data-content-modification-date="2023-02-27T13:27:15&#43;08:00">Updated: <time datetime="2023-02-27T13:27:15&#43;08:00">2023-02-27</time></p>
</div>
</div>
<hr aria-hidden="true"/><footer aria-label="Site footer">
<a href="#top">Back to top</a>
<p>Available in other languages:
<span class="list site__languages">
<a href="/hugo-theme-more-contentful/en" hreflang="en">English</a>
<a href="/hugo-theme-more-contentful/tl" hreflang="tl">Tagalog</a>
</span>
</p>
<ul class="list site__socials">
<li>
<a class="site__social-icon" rel="me" href="https://example.org/gmail" aria-label="E-mail">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/gmail.svg#gmail"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/keybase" aria-label="Keybase">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/keybase.svg#keybase"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/devdotto" aria-label="Dev.to">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/devdotto.svg#devdotto"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/github/" aria-label="GitHub">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/github.svg#github"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/gitlab" aria-label="GitLab">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/gitlab.svg#gitlab"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/lichess" aria-label="Lichess">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/lichess.svg#lichess"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/picartodottv" aria-label="Picarto.tv">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/picartodottv.svg#picartodottv"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/pixiv" aria-label="Pixiv">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/pixiv.svg#pixiv"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/twitch" aria-label="Twitch">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/twitch.svg#twitch"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/twitter" aria-label="Twitter">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/twitter.svg#twitter"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/youtube" aria-label="YouTube">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/youtube.svg#youtube"></use>
</svg>
</a>
</li></ul>
<p>© 2023 More Contentful</p>
</footer>
</body>
</html>