foodogsquared/hugo-theme-contentful
1
0
Fork 0
mirror of https://github.com/foo-dogsquared/hugo-theme-contentful.git synced 2025-01-31 04:58:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
gh-pages
hugo-theme-contentful/articles/asciidoctor-syntax-guide/index.html

455 lines
17 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en-us"><title>Asciidoctor Syntax Guide</title>
<link rel="stylesheet" href="https://foo-dogsquared.github.io/hugo-theme-contentful/css/index.min.11618edd7e3b000c8d9629ad7f78c9229d907cb12f420c0242dfb9185eb5ff8e.css" /><meta name="generator" content="Hugo 0.98.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.
Headings Let’s start with all possible headings. The HTML &lt;h1&gt;—&lt;h6&gt; elements represent six levels of section headings. &lt;h1&gt; is the highest section level and &lt;h6&gt; is the lowest.
Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Paragraph According to the HTML5 specification by W3C, HTML documents consist of a tree of elements and text." /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Asciidoctor 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.
Headings Let’s start with all possible headings. The HTML &lt;h1&gt;—&lt;h6&gt; elements represent six levels of section headings. &lt;h1&gt; is the highest section level and &lt;h6&gt; is the lowest.
Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Paragraph According to the HTML5 specification by W3C, HTML documents consist of a tree of elements and text."/>
<meta property="og:title" content="Asciidoctor 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.
Headings Let’s start with all possible headings. The HTML &lt;h1&gt;—&lt;h6&gt; elements represent six levels of section headings. &lt;h1&gt; is the highest section level and &lt;h6&gt; is the lowest.
Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Paragraph According to the HTML5 specification by W3C, HTML documents consist of a tree of elements and text." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://foo-dogsquared.github.io/hugo-theme-contentful/articles/asciidoctor-syntax-guide/" /><meta property="article:section" content="articles" />
<meta property="article:published_time" content="2019-08-27T01:03:09+08:00" />
<meta property="article:modified_time" content="2022-05-13T18:08:06+08:00" />
<meta itemprop="name" content="Asciidoctor 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.
Headings Let’s start with all possible headings. The HTML &lt;h1&gt;—&lt;h6&gt; elements represent six levels of section headings. &lt;h1&gt; is the highest section level and &lt;h6&gt; is the lowest.
Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Paragraph According to the HTML5 specification by W3C, HTML documents consist of a tree of elements and text."><meta itemprop="datePublished" content="2019-08-27T01:03:09+08:00" />
<meta itemprop="dateModified" content="2022-05-13T18:08:06+08:00" />
<meta itemprop="wordCount" content="543">
<meta itemprop="keywords" content="asciidoctor,guide," /><link rel="canonical" type="text/html" href="https://foo-dogsquared.github.io/hugo-theme-contentful/articles/asciidoctor-syntax-guide/" />
<body><nav aria-label="Primary navigation">
<a class="site__title" href="https://foo-dogsquared.github.io/hugo-theme-contentful/">Contentful</a>
<div class="site__links">
|
<a href="https://foo-dogsquared.github.io/hugo-theme-contentful/about/">About</a> |
<a href="https://foo-dogsquared.github.io/hugo-theme-contentful/categories/">Categories</a> |
<a href="https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/">Recipes</a> |
<a href="https://foo-dogsquared.github.io/hugo-theme-contentful/tags/">Tags</a> |
</div>
</nav>
<article>
<header>
<h1>Asciidoctor Syntax Guide</h1>
</header>
<div class="post__meta--single">
<p data-content-publication-date="2019-08-27 01:03:09 &#43;0800 &#43;0800">Created: <time datetime="2019-08-27">2019-08-27</time></p>
<p data-content-modification-date="2022-05-13 18:08:06 &#43;0800 &#43;0800">Updated: <time datetime="2022-05-13">2022-05-13</time></p>
</div>
<hr>
<main>
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<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>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_headings">Headings</h2>
<div class="sectionbody">
<div class="paragraph">
<p>Let’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>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_heading_2">Heading 2</h2>
<div class="sectionbody">
<div class="sect2">
<h3 id="_heading_3">Heading 3</h3>
<div class="sect3">
<h4 id="_heading_4">Heading 4</h4>
<div class="sect4">
<h5 id="_heading_5">Heading 5</h5>
<div class="sect5">
<h6 id="_heading_6">Heading 6</h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_paragraph">Paragraph</h2>
<div class="sectionbody">
<div class="paragraph">
<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>.
(<strong>Certain start tags and end tags can in certain cases be omitted and are implied by other tags.</strong>)</p>
</div>
<div class="paragraph">
<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>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_list_types">List Types</h2>
<div class="sectionbody">
<div class="sect2">
<h3 id="_ordered_list">Ordered List</h3>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>First item</p>
</li>
<li>
<p>Second item</p>
</li>
<li>
<p>Third item</p>
</li>
</ol>
</div>
</div>
<div class="sect2">
<h3 id="_unordered_list">Unordered List</h3>
<div class="ulist">
<ul>
<li>
<p>List item</p>
</li>
<li>
<p>Another item</p>
</li>
<li>
<p>And another item</p>
</li>
</ul>
</div>
</div>
<div class="sect2">
<h3 id="_nested_list">Nested list</h3>
<div class="ulist">
<ul>
<li>
<p>First item</p>
</li>
<li>
<p>Second item</p>
<div class="ulist">
<ul>
<li>
<p>Second item First subitem</p>
</li>
<li>
<p>Second item second subitem</p>
<div class="ulist">
<ul>
<li>
<p>Second item Second subitem First sub-subitem</p>
</li>
<li>
<p>Second item Second subitem Second sub-subitem</p>
</li>
<li>
<p>Second item Second subitem Third sub-subitem</p>
</li>
</ul>
</div>
</li>
<li>
<p>Second item Third subitem</p>
<div class="olist lowerroman">
<ol class="lowerroman" type="i">
<li>
<p>Second item Third subitem First sub-subitem</p>
</li>
<li>
<p>Second item Third subitem Second sub-subitem</p>
</li>
<li>
<p>Second item Third subitem Third sub-subitem</p>
</li>
</ol>
</div>
</li>
</ul>
</div>
</li>
<li>
<p>Third item</p>
</li>
</ul>
</div>
</div>
<div class="sect2">
<h3 id="_definition_list">Definition List</h3>
<div class="paragraph">
<p>HTML also supports definition lists.</p>
</div>
<div class="dlist">
<dl>
<dt class="hdlist1">Blanco tequila</dt>
<dd>
<p>The purest form of the blue agave spirit…​</p>
</dd>
<dt class="hdlist1">Reposado tequila</dt>
<dd>
<p>Typically aged in wooden barrels for between two and eleven months…​</p>
</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_blockquotes">Blockquotes</h2>
<div class="sectionbody">
<div class="paragraph">
<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>
</div>
<div class="quoteblock">
<blockquote>
Quoted text.
This line is part of the same quote.
Also you can <em>put</em> <strong>Asciidoctor</strong> into a blockquote.
</blockquote>
</div>
<div class="paragraph">
<p>Blockquote with a citation.</p>
</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<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>
</div>
</blockquote>
<div class="attribution">
— Steve Wozniak
</div>
</div>
<div class="paragraph">
<p>According to Mozilla’s website, Firefox 1.0 was released in 2004 and became a big success.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_tables">Tables</h2>
<div class="sectionbody">
<div class="paragraph">
<p>Tables aren’t part of the core Markdown spec, but Hugo supports them.</p>
</div>
<table class="tableblock frame-all grid-all stretch">
<colgroup>
<col style="width: 25%;"/>
<col style="width: 25%;"/>
<col style="width: 25%;"/>
<col style="width: 25%;"/>
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">ID</th>
<th class="tableblock halign-left valign-top">Make</th>
<th class="tableblock halign-left valign-top">Model</th>
<th class="tableblock halign-left valign-top">Year</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">1</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Honda</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Accord</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">2009</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">2</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Toyota</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Camry</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">2012</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">3</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Hyundai</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Elantra</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">2010</p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
<p>Colons can be used to align columns.</p>
</div>
<table class="tableblock frame-all grid-all stretch">
<colgroup>
<col style="width: 33.3333%;"/>
<col style="width: 33.3333%;"/>
<col style="width: 33.3334%;"/>
</colgroup>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Tables</p></td>
<td class="tableblock halign-center valign-top"><p class="tableblock">Are</p></td>
<td class="tableblock halign-right valign-top"><p class="tableblock">Cool</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">align: left</p></td>
<td class="tableblock halign-center valign-top"><p class="tableblock">align: center</p></td>
<td class="tableblock halign-right valign-top"><p class="tableblock">align: right</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">align: left</p></td>
<td class="tableblock halign-center valign-top"><p class="tableblock">align: center</p></td>
<td class="tableblock halign-right valign-top"><p class="tableblock">align: right</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">align: left</p></td>
<td class="tableblock halign-center valign-top"><p class="tableblock">align: center</p></td>
<td class="tableblock halign-right valign-top"><p class="tableblock">align: right</p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
<p>You can also use inline Markdown.</p>
</div>
<table class="tableblock frame-all grid-all stretch">
<colgroup>
<col style="width: 25%;"/>
<col style="width: 25%;"/>
<col style="width: 25%;"/>
<col style="width: 25%;"/>
</colgroup>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Inline</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Asciidoctor</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">In</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Table</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><em>italics</em></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>bold</strong></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><mark>mark</mark></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>code</code></p></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="sect1">
<h2 id="_code">Code</h2>
<div class="sectionbody">
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-html" data-lang="html">&lt;!DOCTYPE html&gt;
&lt;html lang=&#34;en&#34;&gt;
&lt;head&gt;
&lt;meta charset=&#34;UTF-8&#34;&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>
</div>
</div>
<div class="paragraph">
<p>As you can see, content output from Asciidoctor does not have
syntax highlighting.
You can use the built-in Hugo shortcode instead.</p>
</div>
<div class="paragraph">
<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>
</div>
</div>
<div class="sect1">
<h2 id="_other_stuff_sub_sup_kbd_etc">Other stuff — sub, sup, kbd, etc.</h2>
<div class="sectionbody">
<div class="paragraph">
<p>H<sub>2</sub>O</p>
</div>
<div class="paragraph">
<p>C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></p>
</div>
<div class="paragraph">
<p>X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup></p>
</div>
<div class="paragraph">
<p>Press <kbd>X</kbd> to win. Or press <kbd>kbd:[CTRL</kbd>+<kbd>ALT</kbd>+<kbd>F</kbd>] to show FPS counter.
<sup class="footnote">[<a id="_footnoteref_1" class="footnote" href="#_footnotedef_1" title="View footnote.">1</a>]</sup></p>
</div>
<div class="paragraph">
<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>
</div>
</div>
</div>
<div id="footnotes">
<hr/>
<div class="footnote" id="_footnotedef_1">
<a href="#_footnoteref_1">1</a>. This requires <a href="https://asciidoctor.org/docs/user-manual/#keyboard-shortcuts">setting experimental flags enabled</a>.
</div>
</div>
</main>
</article>
<hr>
<footer>
<p><a href="https://foo-dogsquared.github.io/hugo-theme-contentful/">Back to home</a></p>
</footer>
<p>Available in other languages:
<span class="site__languages">|
<a href="/hugo-theme-contentful/en">English</a> |
<a href="/hugo-theme-contentful/tl">Tagalog</a> |
</span>
</p>
<p>© 2022 Contentful</p>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink