mirror of https://github.com/jpanther/congo.git
415 lines
34 KiB
HTML
415 lines
34 KiB
HTML
<!doctype html><html lang=en-au dir=ltr class=scroll-smooth data-auto-appearance=true><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 · Congo</title>
|
|
<meta name=title content="Markdown · Congo">
|
|
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
|
|
<link rel=canonical href=https://jpanther.github.io/congo/samples/markdown/>
|
|
<link type=text/css rel=stylesheet href=/congo/css/main.bundle.min.6054f483632be81a44c916d87de7b7e79ca9daed006df153ef132dcb6259142c1dfe59de56b79f91132e2079aa4b87bd4982cba5f1631e353082cf29417d443a.css integrity="sha512-YFT0g2Mr6BpEyRbYfee355yp2u0AbfFT7xMty2JZFCwd/lneVrefkRMuIHmqS4e9SYLLpfFjHjUwgs8pQX1EOg==">
|
|
<script defer type=text/javascript id=script-bundle src=/congo/js/main.bundle.min.fde17ba078f800524d6eab2ac173ba8fe5a928afc7c814f55e68e50f59909e51eaeded8e3464e460f50765057ecc8f0ad5393495b36a17be9dad3cb9c7c646e2.js integrity="sha512-/eF7oHj4AFJNbqsqwXO6j+WpKK/HyBT1XmjlD1mQnlHq7e2ONGTkYPUHZQV+zI8K1Tk0lbNqF76drTy5x8ZG4g==" data-copy=Copy data-copied=Copied></script>
|
|
<link rel=apple-touch-icon sizes=180x180 href=/congo/apple-touch-icon.png>
|
|
<link rel=icon type=image/png sizes=32x32 href=/congo/favicon-32x32.png>
|
|
<link rel=icon type=image/png sizes=16x16 href=/congo/favicon-16x16.png>
|
|
<link rel=manifest href=/congo/site.webmanifest>
|
|
<meta property="og:title" content="Markdown">
|
|
<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/"><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 property="og:site_name" content="Congo">
|
|
<meta name=twitter:card content="summary">
|
|
<meta name=twitter:title content="Markdown">
|
|
<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":"Article","articleSection":"Content Samples","name":"Markdown","headline":"Markdown","description":"Sample article showcasing basic Markdown syntax and formatting for HTML elements.","abstract":"\u003cp\u003eThis article offers a sample of basic Markdown formatting that can be used in Congo, also it shows how some basic HTML elements are decorated.\u003c\/p\u003e","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/samples\/markdown\/","author":{"@type":"Person","name":"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","keywords":["markdown","css","html","sample"],"mainEntityOfPage":"true","wordCount":"472"}]</script>
|
|
<meta name=generator content="Hugo 0.92.1">
|
|
<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-neutral text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-neutral max-w-7xl">
|
|
<div id=the-top class="absolute flex self-center">
|
|
<a class="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 dark:bg-neutral-600 focus:translate-y-0" href=#main-content><span class="font-bold ltr:pr-2 rtl:pl-2 text-primary-600 dark:text-primary-400">↓</span>Skip to main content</a>
|
|
</div><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
|
|
<div>
|
|
<a class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:underline-offset-2" rel=me href=/congo/>Congo</a>
|
|
</div>
|
|
<nav>
|
|
<ul class="flex flex-col list-none sm:flex-row">
|
|
<li class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
|
|
<a class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:underline-offset-2" href=/congo/docs/ title=Documentation>Docs</a>
|
|
</li>
|
|
<li class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
|
|
<a class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:underline-offset-2" href=/congo/samples/ title="Content Samples">Samples</a>
|
|
</li>
|
|
<li class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
|
|
<a class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:underline-offset-2" href=/congo/users/ title=Users>Users</a>
|
|
</li>
|
|
<li class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
|
|
<a class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:underline-offset-2" href=https://github.com/jpanther/congo title>GitHub</a>
|
|
</li>
|
|
<li class="ltr:text-right rtl:text-left ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
|
|
<button id=search-button class="text-base hover:text-primary-600 dark:hover:text-primary-400" title="Search (/)">
|
|
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9.0 208 0S0 93.1.0 208s93.1 208 208 208c48.3.0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9.0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7.0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7.0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
|
|
</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
<main id=main-content class=relative>
|
|
<article>
|
|
<header class=max-w-prose>
|
|
<ol class="text-sm text-neutral-500 dark:text-neutral-400">
|
|
<li class="inline hidden">
|
|
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
|
|
</li>
|
|
<li class=inline>
|
|
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/samples/>Content Samples</a><span class="px-1 text-primary-500">/</span>
|
|
</li>
|
|
<li class="inline hidden">
|
|
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/samples/markdown/>Markdown</a><span class="px-1 text-primary-500">/</span>
|
|
</li>
|
|
</ol>
|
|
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
|
|
Markdown
|
|
</h1>
|
|
<div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400">
|
|
<div class="flex flex-row flex-wrap items-center">
|
|
<time datetime="2019-03-11 00:00:00 +0000 UTC">11 March 2019</time><span class="px-2 text-primary-500">·</span><span title="Reading time">3 mins</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<section class="flex flex-col max-w-full mt-0 prose lg:flex-row dark:prose-invert">
|
|
<div class="order-first px-0 lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8 lg:order-last">
|
|
<div class="ltr:pl-5 rtl:pr-5 toc lg:sticky lg:top-10">
|
|
<details open class="mt-0 overflow-hidden rounded-lg rtl:pr-5 ltr:pl-5 ltr:-ml-5 rtl:-mr-5 lg:mt-3">
|
|
<summary class="block py-1 text-lg font-semibold cursor-pointer rtl:pr-5 ltr:pl-5 ltr:-ml-5 rtl:-mr-5 text-neutral-800 dark:text-neutral-100 lg:hidden bg-neutral-100 dark:bg-neutral-700">
|
|
Table of Contents
|
|
</summary>
|
|
<div class="py-2 border-dotted ltr:border-l rtl:border-r rtl:pr-5 ltr:pl-5 ltr:-ml-5 rtl:-mr-5 border-neutral-300 dark:border-neutral-600">
|
|
<nav id=TableOfContents>
|
|
<ul>
|
|
<li><a href=#headings>Headings</a></li>
|
|
</ul>
|
|
<ul>
|
|
<li><a href=#h2>H2</a>
|
|
<ul>
|
|
<li><a href=#h3>H3</a>
|
|
<ul>
|
|
<li><a href=#h4>H4</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li><a href=#paragraph>Paragraph</a></li>
|
|
<li><a href=#blockquotes>Blockquotes</a>
|
|
<ul>
|
|
<li><a href=#blockquote-without-attribution>Blockquote without attribution</a></li>
|
|
<li><a href=#blockquote-with-attribution>Blockquote with attribution</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href=#tables>Tables</a>
|
|
<ul>
|
|
<li><a href=#inline-markdown-within-tables>Inline Markdown within tables</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href=#code-blocks>Code Blocks</a>
|
|
<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’s internal highlight shortcode</a></li>
|
|
</ul>
|
|
</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>
|
|
</ul>
|
|
</li>
|
|
<li><a href=#other-elements--abbr-sub-sup-kbd-mark>Other Elements — abbr, sub, sup, kbd, mark</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
<div class="min-w-0 min-h-0 max-w-prose">
|
|
<p>This article offers a sample of basic Markdown formatting that can be used in Congo, also it shows how some basic HTML elements are decorated.</p>
|
|
<h2 id=headings class="relative group">Headings <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#headings aria-label=Anchor>#</a></span></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 class="relative group">H1 <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#h1 aria-label=Anchor>#</a></span></h1>
|
|
<h2 id=h2 class="relative group">H2 <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#h2 aria-label=Anchor>#</a></span></h2>
|
|
<h3 id=h3 class="relative group">H3 <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#h3 aria-label=Anchor>#</a></span></h3>
|
|
<h4 id=h4 class="relative group">H4 <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#h4 aria-label=Anchor>#</a></span></h4>
|
|
<h5 id=h5 class="relative group">H5 <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#h5 aria-label=Anchor>#</a></span></h5>
|
|
<h6 id=h6 class="relative group">H6 <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#h6 aria-label=Anchor>#</a></span></h6>
|
|
<h2 id=paragraph class="relative group">Paragraph <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#paragraph aria-label=Anchor>#</a></span></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 class="relative group">Blockquotes <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#blockquotes aria-label=Anchor>#</a></span></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>
|
|
<h3 id=blockquote-without-attribution class="relative group">Blockquote without attribution <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#blockquote-without-attribution aria-label=Anchor>#</a></span></h3>
|
|
<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>
|
|
<h3 id=blockquote-with-attribution class="relative group">Blockquote with attribution <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#blockquote-with-attribution aria-label=Anchor>#</a></span></h3>
|
|
<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 class="relative group">Tables <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#tables aria-label=Anchor>#</a></span></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>
|
|
<h3 id=inline-markdown-within-tables class="relative group">Inline Markdown within tables <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#inline-markdown-within-tables aria-label=Anchor>#</a></span></h3>
|
|
<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 class="relative group">Code Blocks <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#code-blocks aria-label=Anchor>#</a></span></h2>
|
|
<h3 id=code-block-with-backticks class="relative group">Code block with backticks <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#code-block-with-backticks aria-label=Anchor>#</a></span></h3>
|
|
<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><h3 id=code-block-indented-with-four-spaces class="relative group">Code block indented with four spaces <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#code-block-indented-with-four-spaces aria-label=Anchor>#</a></span></h3>
|
|
<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>
|
|
<h3 id=code-block-with-hugos-internal-highlight-shortcode class="relative group">Code block with Hugo’s internal highlight shortcode <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#code-block-with-hugos-internal-highlight-shortcode aria-label=Anchor>#</a></span></h3>
|
|
<div class=highlight><div class=chroma>
|
|
<table class=lntable><tr><td class=lntd>
|
|
<pre tabindex=0 class=chroma><code><span class=lnt> 1
|
|
</span><span class=lnt> 2
|
|
</span><span class=lnt> 3
|
|
</span><span class=hl><span class=lnt> 4
|
|
</span></span><span class=lnt> 5
|
|
</span><span class=lnt> 6
|
|
</span><span class=hl><span class=lnt> 7
|
|
</span></span><span class=hl><span class=lnt> 8
|
|
</span></span><span class=hl><span class=lnt> 9
|
|
</span></span><span class=lnt>10
|
|
</span></code></pre></td>
|
|
<td class=lntd>
|
|
<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=hl> <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> <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=hl><span class=p><</span><span class=nt>body</span><span class=p>></span>
|
|
</span><span class=hl> <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><span class=hl><span class=p></</span><span class=nt>body</span><span class=p>></span>
|
|
</span><span class=p></</span><span class=nt>html</span><span class=p>></span></code></pre></td></tr></table>
|
|
</div>
|
|
</div>
|
|
<h2 id=list-types class="relative group">List Types <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#list-types aria-label=Anchor>#</a></span></h2>
|
|
<h3 id=ordered-list class="relative group">Ordered List <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#ordered-list aria-label=Anchor>#</a></span></h3>
|
|
<ol>
|
|
<li>First item</li>
|
|
<li>Second item</li>
|
|
<li>Third item</li>
|
|
</ol>
|
|
<h3 id=unordered-list class="relative group">Unordered List <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#unordered-list aria-label=Anchor>#</a></span></h3>
|
|
<ul>
|
|
<li>List item</li>
|
|
<li>Another item</li>
|
|
<li>And another item</li>
|
|
</ul>
|
|
<h3 id=nested-list class="relative group">Nested list <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#nested-list aria-label=Anchor>#</a></span></h3>
|
|
<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 class="relative group">Other Elements — abbr, sub, sup, kbd, mark <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#other-elements--abbr-sub-sup-kbd-mark aria-label=Anchor>#</a></span></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 <code>about</code> nothing</a> during Gopherfest, November 18, 2015. <a href=#fnref:1 class=footnote-backref role=doc-backlink>↩︎</a></p>
|
|
</li>
|
|
</ol>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
<footer class="pt-8 max-w-prose">
|
|
<div class=flex>
|
|
<img class="w-24 h-24 !mt-0 !mb-0 ltr:mr-4 rtl:ml-4 rounded-full" width=96 height=96 alt=Author src=/congo/img/author_hu052d24d60828c1cca42a6aefe45b8b44_54195_192x192_fill_q75_box_smart1.jpg>
|
|
<div class=place-self-center>
|
|
<div class="text-[0.6rem] leading-3 text-neutral-500 dark:text-neutral-400 uppercase">
|
|
Author
|
|
</div>
|
|
<div class="font-semibold leading-6 text-neutral-800 dark:text-neutral-300">
|
|
Congo
|
|
</div>
|
|
<div class="text-sm text-neutral-700 dark:text-neutral-400">This is an example author bio, and although there’s a stock photo of a dog here, this article was actually created by a human. 🐶</div>
|
|
<div class="text-2xl sm:text-lg">
|
|
<div class="flex flex-wrap text-neutral-400 dark:text-neutral-500">
|
|
<a class="px-1 hover:text-primary-700 dark:hover:text-primary-400" href=https://twitter.com/ target=_blank aria-label=Twitter rel="me noopener noreferrer">
|
|
<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 aria-label=Facebook rel="me noopener noreferrer">
|
|
<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 aria-label=Linkedin rel="me noopener noreferrer">
|
|
<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 aria-label=Youtube rel="me noopener noreferrer">
|
|
<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>
|
|
<div class=pt-8>
|
|
<hr class="border-dotted border-neutral-300 dark:border-neutral-600">
|
|
<div class="flex justify-between pt-3">
|
|
<span>
|
|
<a class="flex group" href=/congo/samples/rich-content/>
|
|
<span class="mr-3 ltr:inline rtl:hidden text-neutral-700 dark:text-neutral group-hover:text-primary-600 dark:group-hover:text-primary-400">←</span>
|
|
<span class="ml-3 ltr:hidden rtl:inline text-neutral-700 dark:text-neutral group-hover:text-primary-600 dark:group-hover:text-primary-400">→</span>
|
|
<span class="flex flex-col">
|
|
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Rich Content</span>
|
|
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
|
|
<time datetime="2019-03-10 00:00:00 +0000 UTC">10 March 2019</time>
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</span>
|
|
<span>
|
|
<a class="flex text-right group" href=/congo/samples/icons/>
|
|
<span class="flex flex-col">
|
|
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Icons</span>
|
|
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
|
|
<time datetime="2020-08-14 00:00:00 +0000 UTC">14 August 2020</time>
|
|
</span>
|
|
</span>
|
|
<span class="ml-3 ltr:inline rtl:hidden text-neutral-700 dark:text-neutral group-hover:text-primary-600 dark:group-hover:text-primary-400">→</span>
|
|
<span class="mr-3 ltr:hidden rtl:inline text-neutral-700 dark:text-neutral group-hover:text-primary-600 dark:group-hover:text-primary-400">←</span>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
<div class="absolute top-[110vh] ltr:right-0 rtl:left-0 w-12 pointer-events-none bottom-[-5.5rem]">
|
|
<a href=#the-top class="w-12 h-12 sticky pointer-events-auto top-[calc(100vh-5rem)] bg-neutral/50 dark:bg-neutral-800/50 backdrop-blur rounded-full text-xl flex items-center justify-center text-neutral-700 dark:text-neutral hover:text-primary-600 dark:hover:text-primary-400" aria-label="Scroll to top" title="Scroll to top">
|
|
↑
|
|
</a>
|
|
</div>
|
|
</main>
|
|
<div id=search-wrapper class="fixed inset-0 z-50 flex flex-col p-4 sm:p-6 md:p-[10vh] lg:p-[12vh] w-screen h-screen cursor-default bg-neutral-500/50 backdrop-blur-sm dark:bg-neutral-900/50 invisible" data-url=https://jpanther.github.io/congo/>
|
|
<div id=search-modal class="flex flex-col w-full max-w-3xl min-h-0 mx-auto border rounded-md shadow-lg border-neutral-200 top-20 bg-neutral dark:bg-neutral-800 dark:border-neutral-700">
|
|
<header class="relative z-10 flex items-center justify-between flex-none px-2">
|
|
<form class="flex items-center flex-auto min-w-0">
|
|
<div class="flex items-center justify-center w-8 h-8 text-neutral-400">
|
|
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9.0 208 0S0 93.1.0 208s93.1 208 208 208c48.3.0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9.0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7.0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7.0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
|
|
</span>
|
|
</div>
|
|
<input type=search id=search-query class="flex flex-auto h-12 mx-1 bg-transparent appearance-none focus:outline-dotted focus:outline-transparent focus:outline-2" placeholder=Search tabindex=0>
|
|
</form>
|
|
<button id=close-search-button class="flex items-center justify-center w-8 h-8 text-neutral-700 dark:text-neutral hover:text-primary-600 dark:hover:text-primary-400" title="Close (Esc)">
|
|
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentcolor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19.0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48.0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48.0L9.21 111.45c-12.28 12.28-12.28 32.19.0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19.0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48.0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48.0l22.24-22.24c12.28-12.28 12.28-32.19.0-44.48L242.72 256z"/></svg>
|
|
</span>
|
|
</button>
|
|
</header>
|
|
<section class="flex-auto px-2 overflow-auto">
|
|
<ul id=search-results>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<footer class=py-10>
|
|
<div class="flex justify-between">
|
|
<div>
|
|
<p class="text-sm text-neutral-500 dark:text-neutral-400">
|
|
© 2022 Congo contributors
|
|
</p>
|
|
<p class="text-xs text-neutral-500 dark:text-neutral-400">
|
|
Powered by <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
|
|
</p>
|
|
</div>
|
|
<div class="text-sm cursor-pointer text-neutral-700 dark:text-neutral hover:text-primary-600 dark:hover:text-primary-400 ltr:mr-14 rtl:ml-14">
|
|
<button id=appearance-switcher class="w-12 h-12" type=button title="Switch to dark appearance">
|
|
<span class="inline dark:hidden">
|
|
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="moon" class="svg-inline--fa fa-moon fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M283.211 512c78.962.0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954.0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156.0 00283.211.0c-141.309.0-256 114.511-256 256 0 141.309 114.511 256 256 256z"/></svg>
|
|
</span>
|
|
</span>
|
|
<span class="hidden dark:inline">
|
|
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sun" class="svg-inline--fa fa-sun fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M256 160c-52.9.0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6.0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0s-49.9-131.1.0-181 131.1-49.9 181 0 49.9 131.1.0 181z"/></svg>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html> |