mirror of https://github.com/jpanther/congo.git
276 lines
18 KiB
HTML
276 lines
18 KiB
HTML
<!doctype html><html lang=en-au><head>
|
|
<meta charset=utf-8>
|
|
<meta http-equiv=content-language content="en-AU">
|
|
<meta name=viewport content="width=device-width,initial-scale=1">
|
|
<meta http-equiv=x-ua-compatible content="ie=edge">
|
|
<title>Markdown Syntax Guide · Congo</title>
|
|
<meta name=title content="Markdown Syntax Guide · Congo">
|
|
<meta name=description content="Sample article showcasing basic Markdown syntax and formatting for HTML elements.">
|
|
<link rel=canonical href=https://jpanther.github.io/Congo/samples/markdown-syntax/>
|
|
<link type=text/css rel=stylesheet href=https://jpanther.github.io/Congo/css/main.css>
|
|
<link rel=apple-touch-icon sizes=180x180 href=https://jpanther.github.io/Congo/apple-touch-icon.png>
|
|
<link rel=icon type=image/png sizes=32x32 href=https://jpanther.github.io/Congo/favicon-32x32.png>
|
|
<link rel=icon type=image/png sizes=16x16 href=https://jpanther.github.io/Congo/favicon-16x16.png>
|
|
<link rel=manifest href=https://jpanther.github.io/Congo/site.webmanifest>
|
|
<meta property="og:title" content="Markdown Syntax Guide">
|
|
<meta property="og:description" content="Sample article showcasing basic Markdown syntax and formatting for HTML elements.">
|
|
<meta property="og:type" content="article">
|
|
<meta property="og:url" content="https://jpanther.github.io/Congo/samples/markdown-syntax/"><meta property="article:section" content="samples">
|
|
<meta property="article:published_time" content="2019-03-11T00:00:00+00:00">
|
|
<meta property="article:modified_time" content="2019-03-11T00:00:00+00:00">
|
|
<meta name=twitter:card content="summary">
|
|
<meta name=twitter:title content="Markdown Syntax Guide">
|
|
<meta name=twitter:description content="Sample article showcasing basic Markdown syntax and formatting for HTML elements.">
|
|
<script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","articleSection":"Content Samples","name":"Markdown Syntax Guide","headline":"Markdown Syntax Guide","description":"Sample article showcasing basic Markdown syntax and formatting for HTML elements.","inLanguage":"en-AU","author":{"@type":"Person","name":"Congo"},"creator":{"@type":"Person","name":"Congo"},"copyrightHolder":"Congo","copyrightYear":"2019","dateCreated":"2019-03-11T00:00:00\u002b00:00","datePublished":"2019-03-11T00:00:00\u002b00:00","dateModified":"2019-03-11T00:00:00\u002b00:00","url":"https:\/\/jpanther.github.io\/Congo\/samples\/markdown-syntax\/","wordCount":"467","keywords":["markdown","css","html","sample"]}</script>
|
|
<meta name=generator content="Hugo 0.87.0">
|
|
<meta name=author content="Congo">
|
|
<link href=https://twitter.com/ rel=me>
|
|
<link href=https://facebook.com/ rel=me>
|
|
<link href=https://linkedin.com/ rel=me>
|
|
<link href=https://youtube.com/ rel=me>
|
|
</head>
|
|
<body class="flex flex-col h-screen px-6 m-auto text-lg leading-7 bg-white text-grey-900 sm:px-14 md:px-24 lg:px-32 dark:bg-gray-800 dark:text-white max-w-7xl"><header class="flex justify-between py-6 font-semibold sm:py-10">
|
|
<div>
|
|
<a class="hover:underline underline-primary-500 underline-thickness-bold underline-offset-small" rel=me href=https://jpanther.github.io/Congo/>Congo</a>
|
|
</div>
|
|
<nav>
|
|
<ul class="flex flex-col list-none sm:flex-row">
|
|
<li class="text-right sm:mr-7 sm:last:mr-0">
|
|
<a class="hover:underline underline-primary-500 underline-thickness-bold underline-offset-small" href=https://jpanther.github.io/Congo/docs/ title=Documentation>Docs</a>
|
|
</li>
|
|
<li class="text-right sm:mr-7 sm:last:mr-0">
|
|
<a class="hover:underline underline-primary-500 underline-thickness-bold underline-offset-small" href=https://jpanther.github.io/Congo/samples/ title="Content Samples">Samples</a>
|
|
</li>
|
|
<li class="text-right sm:mr-7 sm:last:mr-0">
|
|
<a class="hover:underline underline-primary-500 underline-thickness-bold underline-offset-small" href=https://github.com/jpanther/Congo title>GitHub</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
<main class=flex-grow>
|
|
<article class=max-w-prose>
|
|
<header>
|
|
<ol class="text-sm text-gray-400 dark:text-gray-500">
|
|
<li class="inline hidden">
|
|
<a class="hover:underline underline-gray-300 dark:underline-gray-600" href=https://jpanther.github.io/Congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
|
|
</li>
|
|
<li class=inline>
|
|
<a class="hover:underline underline-gray-300 dark:underline-gray-600" href=https://jpanther.github.io/Congo/samples/>Content Samples</a><span class="px-1 text-primary-500">/</span>
|
|
</li>
|
|
<li class="inline hidden">
|
|
<a class="hover:underline underline-gray-300 dark:underline-gray-600" href=https://jpanther.github.io/Congo/samples/markdown-syntax/>Markdown Syntax Guide</a><span class="px-1 text-primary-500">/</span>
|
|
</li>
|
|
</ol>
|
|
<h1 class="mt-0 text-4xl font-extrabold">Markdown Syntax Guide</h1>
|
|
<div class="mt-8 mb-12 text-base text-gray-400 dark:text-gray-500">
|
|
<time datetime="2019-03-11 00:00:00 +0000 UTC">
|
|
11 March 2019
|
|
</time>
|
|
<span class="px-1 text-primary-500">·</span>
|
|
<span title="Reading time">
|
|
3 mins
|
|
</span>
|
|
</div>
|
|
</header>
|
|
<section class="prose dark:prose-light">
|
|
<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 <a class=heading-anchor href=#headings aria-label=Anchor>#</a></h2>
|
|
<p>The following HTML <code><h1></code>—<code><h6></code> elements represent six levels of section headings. <code><h1></code> is the highest section level while <code><h6></code> is the lowest.</p>
|
|
<h1 id=h1>H1 <a class=heading-anchor href=#h1 aria-label=Anchor>#</a></h1>
|
|
<h2 id=h2>H2 <a class=heading-anchor href=#h2 aria-label=Anchor>#</a></h2>
|
|
<h3 id=h3>H3 <a class=heading-anchor href=#h3 aria-label=Anchor>#</a></h3>
|
|
<h4 id=h4>H4 <a class=heading-anchor href=#h4 aria-label=Anchor>#</a></h4>
|
|
<h5 id=h5>H5 <a class=heading-anchor href=#h5 aria-label=Anchor>#</a></h5>
|
|
<h6 id=h6>H6 <a class=heading-anchor href=#h6 aria-label=Anchor>#</a></h6>
|
|
<h2 id=paragraph>Paragraph <a class=heading-anchor href=#paragraph aria-label=Anchor>#</a></h2>
|
|
<p>Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.</p>
|
|
<p>Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.</p>
|
|
<h2 id=blockquotes>Blockquotes <a class=heading-anchor href=#blockquotes aria-label=Anchor>#</a></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>
|
|
<h4 id=blockquote-without-attribution>Blockquote without attribution <a class=heading-anchor href=#blockquote-without-attribution aria-label=Anchor>#</a></h4>
|
|
<blockquote>
|
|
<p>Tiam, ad mint andaepu dandae nostion secatur sequo quae.
|
|
<strong>Note</strong> that you can use <em>Markdown syntax</em> within a blockquote.</p>
|
|
</blockquote>
|
|
<h4 id=blockquote-with-attribution>Blockquote with attribution <a class=heading-anchor href=#blockquote-with-attribution aria-label=Anchor>#</a></h4>
|
|
<blockquote>
|
|
<p>Don’t communicate by sharing memory, share memory by communicating.<br>
|
|
— <cite>Rob Pike<sup id=fnref:1><a href=#fn:1 class=footnote-ref role=doc-noteref>1</a></sup></cite></p>
|
|
</blockquote>
|
|
<h2 id=tables>Tables <a class=heading-anchor href=#tables aria-label=Anchor>#</a></h2>
|
|
<p>Tables aren’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 <a class=heading-anchor href=#inline-markdown-within-tables aria-label=Anchor>#</a></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 <a class=heading-anchor href=#code-blocks aria-label=Anchor>#</a></h2>
|
|
<h4 id=code-block-with-backticks>Code block with backticks <a class=heading-anchor href=#code-block-with-backticks aria-label=Anchor>#</a></h4>
|
|
<div class=highlight><pre tabindex=0 class=chroma><code class=language-html data-lang=html><span class=cp><!DOCTYPE html></span>
|
|
<span class=p><</span><span class=nt>html</span> <span class=na>lang</span><span class=o>=</span><span class=s>"en"</span><span class=p>></span>
|
|
<span class=p><</span><span class=nt>head</span><span class=p>></span>
|
|
<span class=p><</span><span class=nt>meta</span> <span class=na>charset</span><span class=o>=</span><span class=s>"utf-8"</span> <span class=p>/></span>
|
|
<span class=p><</span><span class=nt>title</span><span class=p>></span>Example HTML5 Document<span class=p></</span><span class=nt>title</span><span class=p>></span>
|
|
<span class=p></</span><span class=nt>head</span><span class=p>></span>
|
|
<span class=p><</span><span class=nt>body</span><span class=p>></span>
|
|
<span class=p><</span><span class=nt>p</span><span class=p>></span>Test<span class=p></</span><span class=nt>p</span><span class=p>></span>
|
|
<span class=p></</span><span class=nt>body</span><span class=p>></span>
|
|
<span class=p></</span><span class=nt>html</span><span class=p>></span>
|
|
</code></pre></div><h4 id=code-block-indented-with-four-spaces>Code block indented with four spaces <a class=heading-anchor href=#code-block-indented-with-four-spaces aria-label=Anchor>#</a></h4>
|
|
<pre><code><!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Example HTML5 Document</title>
|
|
</head>
|
|
<body>
|
|
<p>Test</p>
|
|
</body>
|
|
</html>
|
|
</code></pre>
|
|
<h4 id=code-block-with-hugos-internal-highlight-shortcode>Code block with Hugo’s internal highlight shortcode <a class=heading-anchor href=#code-block-with-hugos-internal-highlight-shortcode aria-label=Anchor>#</a></h4>
|
|
<div class=highlight><pre tabindex=0 class=chroma><code class=language-html data-lang=html><span class=cp><!doctype html></span>
|
|
<span class=p><</span><span class=nt>html</span> <span class=na>lang</span><span class=o>=</span><span class=s>"en"</span><span class=p>></span>
|
|
<span class=p><</span><span class=nt>head</span><span class=p>></span>
|
|
<span class=p><</span><span class=nt>meta</span> <span class=na>charset</span><span class=o>=</span><span class=s>"utf-8"</span><span class=p>></span>
|
|
<span class=p><</span><span class=nt>title</span><span class=p>></span>Example HTML5 Document<span class=p></</span><span class=nt>title</span><span class=p>></span>
|
|
<span class=p></</span><span class=nt>head</span><span class=p>></span>
|
|
<span class=p><</span><span class=nt>body</span><span class=p>></span>
|
|
<span class=p><</span><span class=nt>p</span><span class=p>></span>Test<span class=p></</span><span class=nt>p</span><span class=p>></span>
|
|
<span class=p></</span><span class=nt>body</span><span class=p>></span>
|
|
<span class=p></</span><span class=nt>html</span><span class=p>></span></code></pre></div>
|
|
<h2 id=list-types>List Types <a class=heading-anchor href=#list-types aria-label=Anchor>#</a></h2>
|
|
<h4 id=ordered-list>Ordered List <a class=heading-anchor href=#ordered-list aria-label=Anchor>#</a></h4>
|
|
<ol>
|
|
<li>First item</li>
|
|
<li>Second item</li>
|
|
<li>Third item</li>
|
|
</ol>
|
|
<h4 id=unordered-list>Unordered List <a class=heading-anchor href=#unordered-list aria-label=Anchor>#</a></h4>
|
|
<ul>
|
|
<li>List item</li>
|
|
<li>Another item</li>
|
|
<li>And another item</li>
|
|
</ul>
|
|
<h4 id=nested-list>Nested list <a class=heading-anchor href=#nested-list aria-label=Anchor>#</a></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 <a class=heading-anchor href=#other-elements--abbr-sub-sup-kbd-mark aria-label=Anchor>#</a></h2>
|
|
<p><abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.</p>
|
|
<p>H<sub>2</sub>O</p>
|
|
<p>X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup></p>
|
|
<p>Press <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> to end the session.</p>
|
|
<p>Most <mark>salamanders</mark> 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’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>↩︎</a></p>
|
|
</li>
|
|
</ol>
|
|
</section>
|
|
</section>
|
|
<footer class=pt-8>
|
|
<div class="flex items-center">
|
|
<img class="w-24 h-24 !mt-0 !mb-0 mr-4 rounded-full" src=https://jpanther.github.io/Congo/img/author.jpg>
|
|
<div>
|
|
<div class="text-[0.6rem] leading-3 text-gray-400 dark:text-gray-500 uppercase">
|
|
Author
|
|
</div>
|
|
<div class="font-semibold leading-6 text-gray-800 dark:text-gray-300">
|
|
Congo
|
|
</div>
|
|
<div class="flex flex-wrap text-gray-400 dark:text-gray-500">
|
|
<a class="px-1 hover:text-primary-700 dark:hover:text-primary-400" href=https://twitter.com/ target=_blank alt=Twitter rel=me><span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645.0 138.72-105.583 298.558-298.558 298.558-59.452.0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055.0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421.0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391.0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04.0-57.828 46.782-104.934 104.934-104.934 30.213.0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
|
|
</span>
|
|
</a>
|
|
<a class="px-1 hover:text-primary-700 dark:hover:text-primary-400" href=https://facebook.com/ target=_blank alt=Facebook rel=me><span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook" class="svg-inline--fa fa-facebook fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14.0 55.52 4.84 55.52 4.84v61h-31.28c-30.8.0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg>
|
|
</span>
|
|
</a>
|
|
<a class="px-1 hover:text-primary-700 dark:hover:text-primary-400" href=https://linkedin.com/ target=_blank alt=Linkedin rel=me><span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin" class="svg-inline--fa fa-linkedin fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentcolor" d="M416 32H31.9C14.3 32 0 46.5.0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6.0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3.0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2.0 38.5 17.3 38.5 38.5.0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6.0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2.0 79.7 44.3 79.7 101.9V416z"/></svg>
|
|
</span>
|
|
</a>
|
|
<a class="px-1 hover:text-primary-700 dark:hover:text-primary-400" href=https://youtube.com/ target=_blank alt=Youtube rel=me><span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="youtube" class="svg-inline--fa fa-youtube fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78.0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pt-8 article-pagination">
|
|
<hr class="border-gray-300 border-dotted dark:border-gray-600">
|
|
<div class="flex justify-between pt-3">
|
|
<span>
|
|
</span>
|
|
<span>
|
|
<a class="flex text-right" href=https://jpanther.github.io/Congo/samples/rich-content/>
|
|
<span class="flex flex-col">
|
|
<span class=article-pagination-title>Rich Content</span>
|
|
<time class="-mt-1 text-xs text-gray-400 dark:text-gray-500" datetime="2019-03-11 00:00:00 +0000 UTC">
|
|
11 March 2019
|
|
</time>
|
|
</span>
|
|
<span class="ml-3 article-pagination-direction">→</span>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
</main><footer class="py-10 text-sm">
|
|
<p class="text-gray-400 dark:text-gray-500">
|
|
©
|
|
2021
|
|
Congo
|
|
</p>
|
|
<p class="text-xs text-gray-300 dark:text-gray-600">
|
|
Powered by
|
|
<a class="hover:underline underline-primary-300 hover:text-primary-400" href=https://gohugo.io/ target=_blank>Hugo</a>
|
|
&
|
|
<a class="hover:underline underline-primary-300 hover:text-primary-400" href=https://git.io/hugo-congo target=_blank>Congo</a>
|
|
</p>
|
|
</footer>
|
|
</body>
|
|
</html> |