diff options
Diffstat (limited to 'testdata/test.got.html')
| -rw-r--r-- | testdata/test.got.html | 2963 |
1 files changed, 2963 insertions, 0 deletions
diff --git a/testdata/test.got.html b/testdata/test.got.html new file mode 100644 index 0000000..54bc7b3 --- /dev/null +++ b/testdata/test.got.html @@ -0,0 +1,2963 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="UTF-8"> +<meta http-equiv="X-UA-Compatible" content="IE=edge"> +<meta name="viewport" content="width=device-width, initial-scale=1.0"> +<meta name="generator" content="asciidoctor-go"> +<meta name="description" content="meta description"> +<meta name="keywords" content="key, words"> +<meta name="author" content="Author A, Author mid dle B"> +<title>Example Document title</title> +<style> + +</style> +</head> +<body class="article"> +<div id="header"> +<h1><em>Example <code>Document</code> <strong>title</strong></em></h1> +<div class="details"> +<span id="author" class="author">Author A</span><br> +<span id="email" class="email"><a href="mailto:a@a.com">a@a.com</a></span><br> +<span id="author2" class="author">Author mid dle B</span><br> +<span id="email2" class="email"><a href="mailto:b@b.com">b@b.com</a></span><br> +<span id="revnumber"> 1.1.1,</span> +<span id="revdate">18 July 2020</span> +<br><span id="revremark">remark</span> +</div> +<div id="toc" class="toc"> +<div id="toctitle">Table of Contents</div> +<ul class="sectlevel1"> +<li><a href="#metadata_references">1. Metadata references</a></li> +<li><a href="#inline_formatting_on_section">2. <em>Inline <code>formatting</code> on <strong>section</strong></em></a></li> +<li><a href="#level_1">3. Level 1</a> +<ul class="sectlevel2"> +<li><a href="#level_2">3.1. Level 2</a> +<ul class="sectlevel3"> +<li><a href="#level_3">3.1.1. Level 3</a></li> +</ul> +</li> +</ul> +</li> +<li><a href="#section_two">Section Two</a></li> +<li><a href="#section_three">4. Section Three</a></li> +<li><a href="#comment">5. Comment</a></li> +<li><a href="#paragraph">6. Paragraph</a> +<ul class="sectlevel2"> +<li><a href="#alignment">6.1. Alignment</a></li> +<li><a href="#line_break">6.2. Line break</a></li> +</ul> +</li> +<li><a href="#unconstrained_text_formatting">7. Unconstrained text formatting</a></li> +<li><a href="#single_quote">8. Single quote</a></li> +<li><a href="#subscript_and_superscript">9. Subscript and superscript</a></li> +<li><a href="#constrained_text_formatting">10. Constrained text formatting</a></li> +<li><a href="#blocks">11. Blocks</a> +<ul class="sectlevel2"> +<li><a href="#title">11.1. Title</a></li> +</ul> +</li> +<li><a href="#block_listing">12. Block listing</a></li> +<li><a href="#block_literal">13. Block literal</a></li> +<li><a href="#ordered_lists">14. Ordered Lists</a></li> +<li><a href="#unordered_lists">15. Unordered Lists</a> +<ul class="sectlevel2"> +<li><a href="#custom_markers">15.1. Custom markers</a></li> +<li><a href="#checklist">15.2. Checklist</a></li> +</ul> +</li> +<li><a href="#mixed_list">16. Mixed list</a></li> +<li><a href="#description_list">17. Description list</a></li> +<li><a href="#question_and_answers">18. Question and Answers</a></li> +<li><a href="#table">19. Table</a> +<ul class="sectlevel2"> +<li><a href="#column_formatting">19.1. Column Formatting</a></li> +<li><a href="#cell_formatting">19.2. Cell formatting</a></li> +<li><a href="#header_row">19.3. Header row</a></li> +<li><a href="#footer_row">19.4. Footer row</a></li> +<li><a href="#table_width">19.5. Table width</a></li> +<li><a href="#table_borders">19.6. Table borders</a> +<ul class="sectlevel3"> +<li><a href="#frame">19.6.1. Frame</a></li> +<li><a href="#grids">19.6.2. Grids</a></li> +</ul> +</li> +<li><a href="#striping">19.7. Striping</a></li> +<li><a href="#orientation">19.8. Orientation</a></li> +<li><a href="#table_caption">19.9. Table caption</a></li> +<li><a href="#escaping_the_cell_separator">19.10. Escaping the Cell separator</a></li> +</ul> +</li> +<li><a href="#horizontal_rules">20. Horizontal rules</a></li> +<li><a href="#page_break">21. Page break</a></li> +<li><a href="#urls">22. URLs</a></li> +<li><a href="#anchors">23. Anchors</a> +<ul class="sectlevel2"> +<li><a href="#version-4_9">23.1. Version 4.9</a></li> +<li><a href="#version-4_10">23.2. Version 4.10</a></li> +<li><a href="#which-one">23.3. Version 4.11</a></li> +</ul> +</li> +<li><a href="#cross_references">24. Cross references</a> +<ul class="sectlevel2"> +<li><a href="#internal">24.1. Internal</a></li> +</ul> +</li> +<li><a href="#include">25. Include</a></li> +<li><a href="#images">26. Images</a> +<ul class="sectlevel2"> +<li><a href="#block_images">26.1. Block images</a></li> +<li><a href="#float_group">26.2. Float group</a></li> +<li><a href="#inline_image">26.3. Inline image</a></li> +</ul> +</li> +<li><a href="#block_open">27. Block open</a></li> +<li><a href="#video">28. Video</a></li> +<li><a href="#audio">29. Audio</a></li> +<li><a href="#admonition">30. Admonition</a> +<ul class="sectlevel2"> +<li><a href="#line_admonition">30.1. Line admonition</a></li> +<li><a href="#style_admonition">30.2. Style admonition</a></li> +<li><a href="#icons">30.3. Icons</a></li> +</ul> +</li> +<li><a href="#sidebar">31. Sidebar</a></li> +<li><a href="#example">32. Example</a></li> +<li><a href="#quote">33. Quote</a> +<ul class="sectlevel2"> +<li><a href="#quoted_paragraph">33.1. Quoted paragraph</a></li> +</ul> +</li> +<li><a href="#verse">34. Verse</a></li> +<li><a href="#passthrough">35. Passthrough</a> +<ul class="sectlevel2"> +<li><a href="#block_passthrough">35.1. Block passthrough</a></li> +</ul> +</li> +<li><a href="#section_discrete">36. Section Discrete</a> +<ul class="sectlevel2"> +<li><a href="#after_discrete">36.1. After discrete</a></li> +</ul> +</li> +</ul> + +</div> +</div> +<div id="content"> +<div id="preamble"> +<div class="sectionbody"> +<div class="paragraph"> +<p>This is preamble. +:other metadata:</p> +</div> +<div class="listingblock"> +<div class="content"> +<pre>a</pre> +</div> +</div> +<div class="paragraph"> +<p>==Section must have space</p> +</div> +<div class="literalblock"> +<div class="content"> +<pre>== Indented section</pre> +</div> +</div> +<div class="literalblock"> +<div class="content"> +<pre>:indented-meta:</pre> +</div> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="metadata_references"><a class="anchor" href="#metadata_references"></a><a class="link" href="#metadata_references">1. Metadata references</a></h2> +<div class="sectionbody"> +<div class="paragraph"> +<p>First author: Author A Author A <a href="mailto:a@a.com">a@a.com</a> +AA.</p> +</div> +<div class="paragraph"> +<p>First author: Author A Author A <a href="mailto:a@a.com">a@a.com</a> +AA.</p> +</div> +<div class="paragraph"> +<p>Second author: Author mid dle B Author mid dle B +<a href="mailto:b@b.com">b@b.com</a> AmB.</p> +</div> +<div class="paragraph"> +<p>Revision: 1.1.1, 18 July 2020: remark.</p> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="inline_formatting_on_section"><a class="anchor" href="#inline_formatting_on_section"></a><a class="link" href="#inline_formatting_on_section">2. <em>Inline <code>formatting</code> on <strong>section</strong></em></a></h2> +<div class="sectionbody"> +<div class="paragraph"> +<p>Test inline formatting on section title.</p> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="level_1"><a class="anchor" href="#level_1"></a><a class="link" href="#level_1">3. Level 1</a></h2> +<div class="sectionbody"> +<div class="sect2"> +<h3 id="level_2"><a class="anchor" href="#level_2"></a><a class="link" href="#level_2">3.1. Level 2</a></h3> +<div class="sect3"> +<h4 id="level_3"><a class="anchor" href="#level_3"></a><a class="link" href="#level_3">3.1.1. Level 3</a></h4> +<div class="sect4"> +<h5 id="level_4"><a class="anchor" href="#level_4"></a><a class="link" href="#level_4">Level 4</a></h5> +<div class="sect5"> +<h6 id="level_5"><a class="anchor" href="#level_5"></a><a class="link" href="#level_5">Level 5</a></h6> +</div> +</div> +</div> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="section_two"><a class="anchor" href="#section_two"></a><a class="link" href="#section_two">Section Two</a></h2> +<div class="sectionbody"> +</div> +</div> +<div class="sect1"> +<h2 id="section_three"><a class="anchor" href="#section_three"></a><a class="link" href="#section_three">4. Section Three</a></h2> +<div class="sectionbody"> +</div> +</div> +<div class="sect1"> +<h2 id="comment"><a class="anchor" href="#comment"></a><a class="link" href="#comment">5. Comment</a></h2> +<div class="sectionbody"> +<div class="literalblock"> +<div class="content"> +<pre>//// +Indented block comment +////</pre> +</div> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="paragraph"><a class="anchor" href="#paragraph"></a><a class="link" href="#paragraph">6. Paragraph</a></h2> +<div class="sectionbody"> +<div class="paragraph"> +<div class="title">A Title</div> +<p>Paragraph with title</p> +</div> +<div class="paragraph"> +<p>A paragraph followed by title, +.This is title</p> +</div> +<div class="paragraph"> +<p>A paragraph followed by attribute, +:isthis: attribute</p> +</div> +<div class="paragraph"> +<p>A paragraph followed by literal line, + this is literal line.</p> +</div> +<div class="paragraph"> +<p>A paragraph followed by list, +. This is a ordered list item</p> +</div> +<div class="paragraph"> +<p>A paragraph followed by comment. +This is next line in paragraph.</p> +</div> +<div class="paragraph"> +<p>A paragraph followed by "+",</p> +</div> +<div class="paragraph"> +<p>+ +This is next line in paragraph.</p> +</div> +<div class="paragraph"> +<p>A paragraph followed by listing block</p> +</div> +<div class="listingblock"> +<div class="content"> +<pre>Listing.</pre> +</div> +</div> +<div class="paragraph"> +<p>This is next line in paragraph.</p> +</div> +<div class="paragraph"> +<p>A paragraph followed by section +== This is section name +This is next line in paragraph.</p> +</div> +<div class="paragraph"> +<p>A paragraph followed by literal named</p> +</div> +<div class="literalblock"> +<div class="content"> +<pre>This is literal</pre> +</div> +</div> +<div class="sect2"> +<h3 id="alignment"><a class="anchor" href="#alignment"></a><a class="link" href="#alignment">6.1. Alignment</a></h3> +<div class="paragraph text-left"> +<p>This text is left aligned.</p> +</div> +<div class="paragraph text-right"> +<p>This text is right aligned.</p> +</div> +<div class="paragraph text-center"> +<p>This text is center aligned.</p> +</div> +<div class="paragraph text-justify"> +<p>This text is justify aligned.</p> +</div> +</div> +<div class="sect2"> +<h3 id="line_break"><a class="anchor" href="#line_break"></a><a class="link" href="#line_break">6.2. Line break</a></h3> +<div class="paragraph"> +<p>Rubies are red,<br> +Topazes are blue.</p> +</div> +<div class="ulist"> +<ul> +<li> +<p>is this<br> +line break</p> +</li> +<li> +<p>too<br></p> +</li> +<li> +<p>or not</p> +</li> +</ul> +</div> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="unconstrained_text_formatting"><a class="anchor" href="#unconstrained_text_formatting"></a><a class="link" href="#unconstrained_text_formatting">7. Unconstrained text formatting</a></h2> +<div class="sectionbody"> +<div class="paragraph"> +<p><code>__A *B*__</code>: <em>A <strong>B</strong></em></p> +</div> +<div class="paragraph"> +<p><code>__A `B`__</code>: <em>A <code>B</code></em></p> +</div> +<div class="paragraph"> +<p>__A *B*_: <em>_A <strong>B</strong></em></p> +</div> +<div class="paragraph"> +<p>__A *B*_ C: <em>_A <strong>B</strong></em> C</p> +</div> +<div class="paragraph"> +<p>_A *B*__: <em>A <strong>B</strong>_</em></p> +</div> +<div class="paragraph"> +<p>__A _B_ C__: <em>A <em>B</em> C</em></p> +</div> +<div class="paragraph"> +<p>__A B_ C__: <em>A B_ C</em></p> +</div> +<div class="paragraph"> +<p><code>**A _B_**</code>: <strong>A <em>B</em></strong></p> +</div> +<div class="paragraph"> +<p>**A `B`**: <strong>A <code>B</code></strong></p> +</div> +<div class="paragraph"> +<p>A <code>/<strong></strong>/</code> <strong>B</strong>.</p> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="single_quote"><a class="anchor" href="#single_quote"></a><a class="link" href="#single_quote">8. Single quote</a></h2> +<div class="sectionbody"> +<div class="paragraph"> +<p>'` A single quote without end.</p> +</div> +<div class="paragraph"> +<p>'` A single quote with space ’.</p> +</div> +<div class="paragraph"> +<p>‘A single quote’.</p> +</div> +<div class="paragraph"> +<p>'`A single quote ’.</p> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="subscript_and_superscript"><a class="anchor" href="#subscript_and_superscript"></a><a class="link" href="#subscript_and_superscript">9. Subscript and superscript</a></h2> +<div class="sectionbody"> +<div class="paragraph"> +<p>H<sub>2</sub>0 H~ 3 ~0 H~4 ~0 H ~ 5~0 H~6 7~0.</p> +</div> +<div class="paragraph"> +<p>__Sub<sub>scri__pt</sub>.</p> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="constrained_text_formatting"><a class="anchor" href="#constrained_text_formatting"></a><a class="link" href="#constrained_text_formatting">10. Constrained text formatting</a></h2> +<div class="sectionbody"> +<div class="paragraph"> +<p><code>_A_B</code>: _A_B</p> +</div> +<div class="paragraph"> +<p><code>_A_ B</code>: <em>A</em> B</p> +</div> +<div class="paragraph"> +<p><code>_A _B</code>: _A _B</p> +</div> +<div class="paragraph"> +<p><em>A <code>B</code></em><code> C</code></p> +</div> +<div class="paragraph"> +<p><strong>A <em>B <code>C</code></em><code> D</code> E</strong></p> +</div> +<div class="paragraph"> +<p>Multiple <em>text +“formatting” in <strong>single +paragraph</strong></em>.</p> +</div> +<div class="paragraph"> +<p><em>Inline <a href="https://kilabit.info"><strong>link</strong></a> inside italic</em>.</p> +</div> +<div class="paragraph"> +<p>_Italic without<sup>end</sup>.</p> +</div> +<div class="paragraph"> +<p>"`A double quote without end.</p> +</div> +<div class="paragraph"> +<p><em>A double quote “inside</em> italic”.</p> +</div> +<div class="paragraph"> +<p><em>A <code>monospace between</code></em><code> italic</code>.</p> +</div> +<div class="paragraph"> +<p><strong>bold <em>italic <code>mono end-bold</code></em></strong><em><code> end-italic</code></em><code> end-mono</code>.</p> +</div> +<div class="paragraph"> +<p><strong>bold <em>italic `mono end-bold</em></strong><em> end-italic</em> end-mono.</p> +</div> +<div class="paragraph"> +<p>A bold with * space <strong>, with single non alnum *=</strong>.</p> +</div> +<div class="paragraph"> +<p>"` A double quote with space `".</p> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="blocks"><a class="anchor" href="#blocks"></a><a class="link" href="#blocks">11. Blocks</a></h2> +<div class="sectionbody"> +<div class="sect2"> +<h3 id="title"><a class="anchor" href="#title"></a><a class="link" href="#title">11.1. Title</a></h3> +<div class="ulist"> +<div class="title">TODO list</div> +<ul> +<li> +<p>Learn the AsciiDoc syntax</p> +</li> +<li> +<p>Install Asciidoctor</p> +</li> +<li> +<p>Write my document</p> +</li> +</ul> +</div> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="block_listing"><a class="anchor" href="#block_listing"></a><a class="link" href="#block_listing">12. Block listing</a></h2> +<div class="sectionbody"> +<div class="listingblock"> +<div class="content"> +<pre>This is single paragraph listing.</pre> +</div> +</div> +<div class="paragraph"> +<p>[listing] x +This is not listing.</p> +</div> +<div class="listingblock"> +<div class="content"> +<pre>This is block listing.</pre> +</div> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="block_literal"><a class="anchor" href="#block_literal"></a><a class="link" href="#block_literal">13. Block literal</a></h2> +<div class="sectionbody"> +<div class="literalblock"> +<div class="content"> +<pre>A literal paragraph followed by non-space line: +non-space line.</pre> +</div> +</div> +<div class="literalblock"> +<div class="content"> +<pre>A literal named.</pre> +</div> +</div> +<div class="paragraph"> +<p>[literal] x +A literal named and trailing characters will become paragraph.</p> +</div> +<div class="literalblock"> +<div class="content"> +<pre>With 4 dots.</pre> +</div> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="ordered_lists"><a class="anchor" href="#ordered_lists"></a><a class="link" href="#ordered_lists">14. Ordered Lists</a></h2> +<div class="sectionbody"> +<div class="olist arabic"> +<ol class="arabic"> +<li> +<p>abc +def</p> +</li> +<li> +<p>ghi +jkl</p> +</li> +<li> +<p>Previous line is empty</p> +<div class="paragraph"> +<p>This is a paragraph inside list item.</p> +</div> +<div class="paragraph"> +<p>This is the second paragraph.</p> +</div> +</li> +<li> +<p>Can list have literal paragraph?</p> +<div class="literalblock"> +<div class="content"> +<pre>This is literal paragraph.</pre> +</div> +</div> +<div class="paragraph"> +<p>This is normal paragraph.</p> +</div> +</li> +<li> +<p>Next line is block</p> +</li> +</ol> +</div> +<div class="listingblock"> +<div class="content"> +<pre>This break the list.</pre> +</div> +</div> +<div class="olist arabic"> +<ol class="arabic"> +<li> +<p>This start new list</p> +</li> +</ol> +</div> +<div class="paragraph"> +<p>A new paragraph.</p> +</div> +<div class="olist arabic"> +<ol class="arabic"> +<li> +<p>List item followed by [literal]</p> +<div class="literalblock"> +<div class="content"> +<pre>literal.</pre> +</div> +</div> +</li> +<li> +<p>Second list item</p> +</li> +</ol> +</div> +<div class="paragraph"> +<p>List that not in order</p> +</div> +<div class="olist lowerroman"> +<ol class="lowerroman" type="i"> +<li> +<p>List jumped from three dots,</p> +<div class="olist arabic"> +<ol class="arabic"> +<li> +<p>To one dot</p> +<div class="olist upperalpha"> +<ol class="upperalpha" type="A"> +<li> +<p>To four dots</p> +</li> +</ol> +</div> +</li> +</ol> +</div> +</li> +<li> +<p>And back to three again</p> +<div class="olist loweralpha"> +<ol class="loweralpha" type="a"> +<li> +<p>Can sub-list have title? +.Title</p> +</li> +<li> +<p>Second level</p> +<div class="olist arabic"> +<ol class="arabic"> +<li> +<p>Multiple continuation</p> +</li> +<li> +<p>Second item</p> +<div class="literalblock"> +<div class="content"> +<pre>Is this literal</pre> +</div> +</div> +</li> +<li> +<p>Third item</p> +</li> +</ol> +</div> +</li> +</ol> +</div> +</li> +</ol> +</div> +<div class="paragraph"> +<p>How many dots?</p> +</div> +<div class="olist arabic"> +<ol class="arabic"> +<li> +<p>How</p> +<div class="olist loweralpha"> +<ol class="loweralpha" type="a"> +<li> +<p>Deep</p> +<div class="olist lowerroman"> +<ol class="lowerroman" type="i"> +<li> +<p>Can</p> +<div class="olist upperalpha"> +<ol class="upperalpha" type="A"> +<li> +<p>We</p> +<div class="olist upperroman"> +<ol class="upperroman" type="I"> +<li> +<p>Go</p> +<div class="olist arabic"> +<ol class="arabic"> +<li> +<p>?</p> +<div class="olist arabic"> +<ol class="arabic"> +<li> +<p>Seven</p> +<div class="olist arabic"> +<ol class="arabic"> +<li> +<p>Eight</p> +<div class="olist arabic"> +<ol class="arabic"> +<li> +<p>Nine</p> +<div class="olist arabic"> +<ol class="arabic"> +<li> +<p>Ten</p> +</li> +</ol> +</div> +</li> +</ol> +</div> +</li> +</ol> +</div> +</li> +</ol> +</div> +</li> +</ol> +</div> +</li> +</ol> +</div> +</li> +</ol> +</div> +</li> +</ol> +</div> +</li> +</ol> +</div> +</li> +<li> +<p>List followed by section += New section</p> +</li> +<li> +<p>List and comment. +This line separated by comment.</p> +</li> +<li> +<p>List indented with space</p> +<div class="olist loweralpha"> +<ol class="loweralpha" type="a"> +<li> +<p>Sub 2.1</p> +</li> +<li> +<p>Sub 2.2</p> +</li> +</ol> +</div> +</li> +<li> +<p>List indented with space</p> +</li> +</ol> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="unordered_lists"><a class="anchor" href="#unordered_lists"></a><a class="link" href="#unordered_lists">15. Unordered Lists</a></h2> +<div class="sectionbody"> +<div class="ulist"> +<ul> +<li> +<p>abc +def</p> +</li> +<li> +<p>ghi +jkl</p> +</li> +<li> +<p>Previous line is empty</p> +<div class="paragraph"> +<p>This is a paragraph inside list item.</p> +</div> +<div class="paragraph"> +<p>This is the second paragraph.</p> +</div> +</li> +<li> +<p>Can list have literal paragraph?</p> +<div class="literalblock"> +<div class="content"> +<pre>This is literal paragraph.</pre> +</div> +</div> +<div class="paragraph"> +<p>This is normal paragraph.</p> +</div> +</li> +<li> +<p>Next line is block</p> +</li> +</ul> +</div> +<div class="listingblock"> +<div class="content"> +<pre>This break the list.</pre> +</div> +</div> +<div class="ulist"> +<ul> +<li> +<p>This start new list</p> +</li> +</ul> +</div> +<div class="paragraph"> +<p>A new paragraph.</p> +</div> +<div class="ulist"> +<ul> +<li> +<p>List item followed by [literal]</p> +<div class="literalblock"> +<div class="content"> +<pre>literal.</pre> +</div> +</div> +</li> +<li> +<p>Second list item</p> +</li> +</ul> +</div> +<div class="paragraph"> +<p>List that not in order</p> +</div> +<div class="ulist"> +<ul> +<li> +<p>List jumped from three asterisk,</p> +<div class="ulist"> +<ul> +<li> +<p>To one asterisk</p> +<div class="ulist"> +<ul> +<li> +<p>To four asterisk</p> +</li> +</ul> +</div> +</li> +</ul> +</div> +</li> +<li> +<p>And back to three again</p> +<div class="ulist"> +<ul> +<li> +<p>Can sub-list have title? +.Title</p> +</li> +<li> +<p>Second level</p> +<div class="ulist"> +<ul> +<li> +<p>Multiple continuation</p> +</li> +<li> +<p>Second item</p> +<div class="literalblock"> +<div class="content"> +<pre>Is this literal</pre> +</div> +</div> +</li> +<li> +<p>Third item</p> +</li> +</ul> +</div> +</li> +</ul> +</div> +</li> +</ul> +</div> +<div class="paragraph"> +<p>How deep?</p> +</div> +<div class="ulist"> +<ul> +<li> +<p>How</p> +<div class="ulist"> +<ul> +<li> +<p>Deep</p> +<div class="ulist"> +<ul> +<li> +<p>Can</p> +<div class="ulist"> +<ul> +<li> +<p>We</p> +<div class="ulist"> +<ul> +<li> +<p>Go</p> +<div class="ulist"> +<ul> +<li> +<p>?</p> +<div class="ulist"> +<ul> +<li> +<p>Seven</p> +<div class="ulist"> +<ul> +<li> +<p>Eight</p> +<div class="ulist"> +<ul> +<li> +<p>Nine</p> +<div class="ulist"> +<ul> +<li> +<p>Ten</p> +</li> +</ul> +</div> +</li> +</ul> +</div> +</li> +</ul> +</div> +</li> +</ul> +</div> +</li> +</ul> +</div> +</li> +</ul> +</div> +</li> +</ul> +</div> +</li> +</ul> +</div> +</li> +</ul> +</div> +</li> +<li> +<p>List followed by section += New section</p> +</li> +<li> +<p>List and comment. +This line separated by comment.</p> +</li> +<li> +<p>List indented with space</p> +<div class="ulist"> +<ul> +<li> +<p>Sub 2.1</p> +</li> +<li> +<p>Sub 2.2</p> +</li> +</ul> +</div> +</li> +<li> +<p>List indented with space</p> +</li> +</ul> +</div> +<div class="sect2"> +<h3 id="custom_markers"><a class="anchor" href="#custom_markers"></a><a class="link" href="#custom_markers">15.1. Custom markers</a></h3> +<div class="ulist square"> +<ul class="square"> +<li> +<p>square one</p> +</li> +<li> +<p>square two</p> +</li> +</ul> +</div> +<div class="ulist circle"> +<ul class="circle"> +<li> +<p>circle one</p> +</li> +<li> +<p>circle two</p> +</li> +</ul> +</div> +<div class="ulist disc"> +<ul class="disc"> +<li> +<p>disc one</p> +</li> +<li> +<p>disc two</p> +</li> +</ul> +</div> +<div class="ulist none"> +<ul class="none"> +<li> +<p>none one</p> +</li> +<li> +<p>none two</p> +</li> +</ul> +</div> +<div class="ulist no-bullet"> +<ul class="no-bullet"> +<li> +<p>no bullet one</p> +</li> +<li> +<p>no bullet two</p> +</li> +</ul> +</div> +<div class="ulist unstyled"> +<ul class="unstyled"> +<li> +<p>unstyled one</p> +</li> +<li> +<p>unstyled two</p> +</li> +</ul> +</div> +<div class="ulist what is"> +<ul class="what"> +<li> +<p>what one</p> +</li> +<li> +<p>what two</p> +</li> +</ul> +</div> +</div> +<div class="sect2"> +<h3 id="checklist"><a class="anchor" href="#checklist"></a><a class="link" href="#checklist">15.2. Checklist</a></h3> +<div class="ulist checklist"> +<ul class="checklist"> +<li> +<p>✓ checked</p> +</li> +<li> +<p>✓ also checked</p> +</li> +<li> +<p>❏ not checked</p> +</li> +<li> +<p>normal list item</p> +</li> +</ul> +</div> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="mixed_list"><a class="anchor" href="#mixed_list"></a><a class="link" href="#mixed_list">16. Mixed list</a></h2> +<div class="sectionbody"> +<div class="olist arabic"> +<ol class="arabic"> +<li> +<p>Orderer 1</p> +<div class="ulist"> +<ul> +<li> +<p>Unordered 1</p> +</li> +<li> +<p>Unordered 2</p> +</li> +</ul> +</div> +</li> +<li> +<p>Orderer 1</p> +<div class="olist loweralpha"> +<ol class="loweralpha" type="a"> +<li> +<p>Ordered L2</p> +<div class="ulist"> +<ul> +<li> +<p>Unordered L1</p> +<div class="ulist"> +<ul> +<li> +<p>Unordered L2</p> +</li> +</ul> +</div> +</li> +<li> +<p>Unordered L1</p> +</li> +</ul> +</div> +</li> +</ol> +</div> +</li> +<li> +<p>Ordered L1</p> +<div class="ulist"> +<ul> +<li> +<p>Unordered L1</p> +<div class="ulist"> +<ul> +<li> +<p>Unordered L2</p> +</li> +</ul> +</div> +</li> +<li> +<p>Unordered L1</p> +<div class="olist loweralpha"> +<ol class="loweralpha" type="a"> +<li> +<p>Ordered L2</p> +</li> +</ol> +</div> +</li> +</ul> +</div> +</li> +</ol> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="description_list"><a class="anchor" href="#description_list"></a><a class="link" href="#description_list">17. Description list</a></h2> +<div class="sectionbody"> +<div class="dlist"> +<dl> +<dt class="hdlist1"><code>CPU</code></dt> +<dd> +<p>The brain +of +the +computer.</p> +</dd> +<dt class="hdlist1">Hard drive</dt> +<dd> +<p>Permanent storage for operating system and/or user files.</p> +</dd> +</dl> +</div> +<div class="paragraph"> +<p>With <code>[horizontal]</code> style,</p> +</div> +<div class="hdlist"> +<table> +<tr> +<td class="hdlist1"> +CPU +</td> +<td class="hdlist2"> +<p>The brain of the computer.</p> +</td> +</tr> +<tr> +<td class="hdlist1"> +Hard drive +</td> +<td class="hdlist2"> +<p>Permanent storage for operating system and/or user files.</p> +</td> +</tr> +</table> +</div> +<div class="paragraph"> +<p>With title,</p> +</div> +<div class="dlist"> +<div class="title">A title</div> +<dl> +<dt class="hdlist1">CPU</dt> +<dd> +<p>The brain of the computer.</p> +</dd> +<dt class="hdlist1">Hard drive</dt> +<dd> +<p>Permanent storage for operating system and/or user files.</p> +</dd> +</dl> +</div> +<div class="paragraph"> +<p>Indented with space</p> +</div> +<div class="dlist"> +<dl> +<dt class="hdlist1">CPU</dt> +<dd> +<p>The brain of the computer.</p> +</dd> +<dt class="hdlist1">Hard drive</dt> +<dd> +<p>Permanent storage for operating system and/or user files.</p> +</dd> +</dl> +</div> +<div class="paragraph"> +<p>With continuation "+",</p> +</div> +<div class="dlist"> +<dl> +<dt class="hdlist1">CPU</dt> +<dd> +<div class="paragraph"> +<p>The brain of the computer.</p> +</div> +</dd> +<dt class="hdlist1">Hard drive</dt> +<dd> +<p>Permanent storage for operating system and/or</p> +<div class="paragraph"> +<p>user files.</p> +</div> +</dd> +</dl> +</div> +<div class="paragraph"> +<p>Mixed with list,</p> +</div> +<div class="dlist"> +<dl> +<dt class="hdlist1">Dairy</dt> +<dd> +<div class="ulist"> +<ul> +<li> +<p>Milk</p> +</li> +<li> +<p>Eggs</p> +</li> +</ul> +</div> +</dd> +<dt class="hdlist1">Bakery</dt> +<dd> +<div class="ulist"> +<ul> +<li> +<p>Bread</p> +</li> +</ul> +</div> +</dd> +<dt class="hdlist1">Produce</dt> +<dd> +<div class="ulist"> +<ul> +<li> +<p>Bananas</p> +</li> +</ul> +</div> +</dd> +</dl> +</div> +<div class="paragraph"> +<p>Spread,</p> +</div> +<div class="dlist"> +<dl> +<dt class="hdlist1">Dairy</dt> +<dd> +<div class="ulist"> +<ul> +<li> +<p>Milk</p> +</li> +<li> +<p>Eggs</p> +</li> +</ul> +</div> +</dd> +<dt class="hdlist1">Bakery</dt> +<dd> +<div class="ulist"> +<ul> +<li> +<p>Bread</p> +</li> +</ul> +</div> +</dd> +<dt class="hdlist1">Produce</dt> +<dd> +<div class="ulist"> +<ul> +<li> +<p>Bananas</p> +</li> +</ul> +</div> +</dd> +<dt class="hdlist1">Description</dt> +<dd> +<p>Description body with open block.</p> +<div class="openblock"> +<div class="content"> +<div class="paragraph"> +<p>Paragraph A.</p> +</div> +<div class="ulist"> +<ul> +<li> +<p>List item 1</p> +</li> +<li> +<p>List item 2</p> +</li> +</ul> +</div> +<div class="paragraph"> +<p>Paragraph B.</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> +<thead> +<tr> +<th class="tableblock halign-left valign-top">Look</th> +<th class="tableblock halign-left valign-top">a</th> +<th class="tableblock halign-left valign-top">table</th> +</tr> +</thead> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">This</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">should</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">work</p></td> +</tr> +</tbody> +</table> +<div class="ulist"> +<ul> +<li> +<p>End with list item</p> +</li> +</ul> +</div> +</div> +</div> +</dd> +</dl> +</div> +<div class="paragraph"> +<p>Mixed with ordered and unordered list,</p> +</div> +<div class="dlist"> +<dl> +<dt class="hdlist1">Operating Systems</dt> +<dd> +<div class="dlist"> +<dl> +<dt class="hdlist1">Linux</dt> +<dd> +<div class="olist arabic"> +<ol class="arabic"> +<li> +<p>Fedora</p> +<div class="ulist"> +<ul> +<li> +<p>Desktop</p> +</li> +</ul> +</div> +</li> +<li> +<p>Ubuntu</p> +<div class="ulist"> +<ul> +<li> +<p>Desktop</p> +</li> +<li> +<p>Server</p> +</li> +</ul> +</div> +</li> +</ol> +</div> +</dd> +<dt class="hdlist1">BSD</dt> +<dd> +<div class="olist arabic"> +<ol class="arabic"> +<li> +<p>FreeBSD</p> +</li> +<li> +<p>NetBSD</p> +</li> +</ol> +</div> +</dd> +</dl> +</div> +</dd> +<dt class="hdlist1">Cloud Providers</dt> +<dd> +<div class="dlist"> +<dl> +<dt class="hdlist1">PaaS</dt> +<dd> +<div class="olist arabic"> +<ol class="arabic"> +<li> +<p>OpenShift</p> +</li> +<li> +<p>CloudBees</p> +</li> +</ol> +</div> +</dd> +<dt class="hdlist1">IaaS</dt> +<dd> +<div class="olist arabic"> +<ol class="arabic"> +<li> +<p>Amazon EC2</p> +</li> +<li> +<p>Rackspace</p> +</li> +</ol> +</div> +</dd> +</dl> +</div> +</dd> +</dl> +</div> +<div class="paragraph"> +<p>With link on label,</p> +</div> +<div class="dlist"> +<dl> +<dt class="hdlist1"><a href="https://pkg.go.dev/git.sr.ht/~shulhan/asciidoctor-go">asciidoctor-go</a></dt> +<dd> +<p>Native asciidoc markup language for Go.</p> +</dd> +</dl> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="question_and_answers"><a class="anchor" href="#question_and_answers"></a><a class="link" href="#question_and_answers">18. Question and Answers</a></h2> +<div class="sectionbody"> +<div class="qlist qanda"> +<ol> +<li> +<p><em>What is Asciidoctor?</em></p> +<p>An implementation of the AsciiDoc processor in Ruby.</p> +</li> +<li> +<p><em>What is the answer to the Ultimate Question?</em></p> +<p>42</p> +</li> +</ol> +</div> +<div class="paragraph"> +<p>A new paragraph.</p> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="table"><a class="anchor" href="#table"></a><a class="link" href="#table">19. Table</a></h2> +<div class="sectionbody"> +<table class="tableblock frame-all grid-all stretch"> +<colgroup> +<col style="width: 50%;"> +<col style="width: 50%;"> +</colgroup> +<thead> +<tr> +<th class="tableblock halign-left valign-top">A</th> +<th class="tableblock halign-left valign-top">B</th> +</tr> +</thead> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">C +D</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">E</p></td> +</tr> +</tbody> +</table> +<div class="paragraph"> +<p>With row columns less than header,</p> +</div> +<table class="tableblock frame-all grid-all stretch"> +<colgroup> +<col style="width: 50%;"> +<col style="width: 50%;"> +</colgroup> +<thead> +<tr> +<th class="tableblock halign-left valign-top">A</th> +<th class="tableblock halign-left valign-top">B</th> +</tr> +</thead> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">C</p> +<p class="tableblock">D</p> +<p class="tableblock">E</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">F</p></td> +</tr> +</tbody> +</table> +<div class="paragraph"> +<p>With row columns greater than header,</p> +</div> +<table class="tableblock frame-all grid-all stretch"> +<colgroup> +<col style="width: 50%;"> +<col style="width: 50%;"> +</colgroup> +<thead> +<tr> +<th class="tableblock halign-left valign-top">A</th> +<th class="tableblock halign-left valign-top">B</th> +</tr> +</thead> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">C</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">D</p></td> +</tr> +</tbody> +</table> +<div class="sect2"> +<h3 id="column_formatting"><a class="anchor" href="#column_formatting"></a><a class="link" href="#column_formatting">19.1. Column Formatting</a></h3> +<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">Cell in column 1, row 1</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">Cell in column 2, row 1</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">Cell in column 3, row 1</p></td> +</tr> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">Cell in column 1, row 2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">Cell in column 2, row 2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">Cell in column 3, row 2</p></td> +</tr> +</tbody> +</table> +<div class="paragraph"> +<p>With horizontal and vertical alignment; and width,</p> +</div> +<table class="tableblock frame-all grid-all stretch"> +<colgroup> +<col style="width: 10%;"> +<col style="width: 30%;"> +<col style="width: 60%;"> +</colgroup> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">Cell in column 1, row 1</p></td> +<td class="tableblock halign-center valign-middle"><p class="tableblock">Cell in column 2, row 1</p></td> +<td class="tableblock halign-right valign-bottom"><p class="tableblock">Cell in column 3, row 1</p></td> +</tr> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">Cell in column 1, row 2</p></td> +<td class="tableblock halign-center valign-middle"><p class="tableblock">Cell in column 2, row 2</p></td> +<td class="tableblock halign-right valign-bottom"><p class="tableblock">Cell in column 3, row 2</p></td> +</tr> +</tbody> +</table> +<div class="paragraph"> +<p>With column styles,</p> +</div> +<table class="tableblock frame-all grid-all stretch"> +<colgroup> +<col style="width: 12.5%;"> +<col style="width: 12.5%;"> +<col style="width: 12.5%;"> +<col style="width: 12.5%;"> +<col style="width: 12.5%;"> +<col style="width: 12.5%;"> +<col style="width: 12.5%;"> +<col style="width: 12.5%;"> +</colgroup> +<thead> +<tr> +<th class="tableblock halign-left valign-top">Asciidoc</th> +<th class="tableblock halign-left valign-top"><code>emphasis</code></th> +<th class="tableblock halign-left valign-top">header</th> +<th class="tableblock halign-left valign-top">literal</th> +<th class="tableblock halign-left valign-top">mono</th> +<th class="tableblock halign-left valign-top">default</th> +<th class="tableblock halign-left valign-top">strong</th> +<th class="tableblock halign-left valign-top">verse</th> +</tr> +</thead> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"> +<div id="content"> +<div class="paragraph"> +<p>Asciidoc</p> +</div> +</div></td> +<td class="tableblock halign-left valign-top"><p class="tableblock"><em>emphasis</em></p></td> +<th class="tableblock halign-left valign-top"><p class="tableblock">header</p></th> +<td class="tableblock halign-left valign-top"><div class="literal"><pre> literal </pre></div></td> +<td class="tableblock halign-left valign-top"><p class="tableblock"><code>mono</code></p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">default</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>strong</strong></p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">verse</p></td> +</tr> +</tbody> +</table> +</div> +<div class="sect2"> +<h3 id="cell_formatting"><a class="anchor" href="#cell_formatting"></a><a class="link" href="#cell_formatting">19.2. Cell formatting</a></h3> +<div class="paragraph"> +<p>Cell duplicated across three 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">A1</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">B1</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">C1</p></td> +</tr> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">A2-B2-C2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">A2-B2-C2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">A2-B2-C2</p></td> +</tr> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">A3</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">B3</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">C3</p></td> +</tr> +</tbody> +</table> +<div class="paragraph"> +<p>Cell spanning three 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">A1</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">B1</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">C1</p></td> +</tr> +<tr> +<td class="tableblock halign-left valign-top" colspan="3"><p class="tableblock">A2…​C2</p></td> +</tr> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">A3</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">B3</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">C3</p></td> +</tr> +</tbody> +</table> +</div> +<div class="sect2"> +<h3 id="header_row"><a class="anchor" href="#header_row"></a><a class="link" href="#header_row">19.3. Header row</a></h3> +<table class="tableblock frame-all grid-all stretch"> +<colgroup> +<col style="width: 50%;"> +<col style="width: 50%;"> +</colgroup> +<thead> +<tr> +<th class="tableblock halign-left valign-top">A1</th> +<th class="tableblock halign-left valign-top">B1</th> +</tr> +</thead> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">A2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">B2</p></td> +</tr> +</tbody> +</table> +<table class="tableblock frame-all grid-all stretch"> +<colgroup> +<col style="width: 50%;"> +<col style="width: 50%;"> +</colgroup> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">A1: noheader</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">B1</p></td> +</tr> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">A2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">B2</p></td> +</tr> +</tbody> +</table> +</div> +<div class="sect2"> +<h3 id="footer_row"><a class="anchor" href="#footer_row"></a><a class="link" href="#footer_row">19.4. Footer row</a></h3> +<table class="tableblock frame-all grid-all stretch"> +<colgroup> +<col style="width: 50%;"> +<col style="width: 50%;"> +</colgroup> +<thead> +<tr> +<th class="tableblock halign-left valign-top">A1</th> +<th class="tableblock halign-left valign-top">B1</th> +</tr> +</thead> +<tfoot> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">A2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">B2</p></td> +</tr> +</tfoot> +</table> +<table class="tableblock frame-all grid-all stretch"> +<colgroup> +<col style="width: 50%;"> +<col style="width: 50%;"> +</colgroup> +<thead> +<tr> +<th class="tableblock halign-left valign-top">A1</th> +<th class="tableblock halign-left valign-top">B1</th> +</tr> +</thead> +</table> +</div> +<div class="sect2"> +<h3 id="table_width"><a class="anchor" href="#table_width"></a><a class="link" href="#table_width">19.5. Table width</a></h3> +<table class="tableblock frame-all grid-all" style="width: 75%;"> +<colgroup> +<col style="width: 50%;"> +<col style="width: 50%;"> +</colgroup> +<thead> +<tr> +<th class="tableblock halign-left valign-top">A1</th> +<th class="tableblock halign-left valign-top">B1</th> +</tr> +</thead> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">A2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">B2</p></td> +</tr> +</tbody> +</table> +<div class="paragraph"> +<p>Table with autowidth,</p> +</div> +<table class="tableblock frame-all grid-all fit-content"> +<colgroup> +<col> +<col> +</colgroup> +<thead> +<tr> +<th class="tableblock halign-left valign-top">auto</th> +<th class="tableblock halign-left valign-top">width</th> +</tr> +</thead> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">Cell in column 1, row 2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">Cell in column 2, row 2</p></td> +</tr> +</tbody> +</table> +<table class="tableblock frame-all grid-all fit-content stretch"> +<colgroup> +<col> +<col> +<col> +</colgroup> +<thead> +<tr> +<th class="tableblock halign-left valign-top">Name of Column 1</th> +<th class="tableblock halign-left valign-top">Name of Column 2</th> +<th class="tableblock halign-left valign-top">Name of Column 3</th> +</tr> +</thead> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">Cell in column 1, row 1</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">Cell in column 2, row 1</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">Cell in column 3, row 1</p></td> +</tr> +</tbody> +</table> +<table class="tableblock frame-all grid-all stretch"> +<colgroup> +<col style="width: 25%;"> +<col> +<col> +</colgroup> +<tbody> +<tr> +<th class="tableblock halign-left valign-top"><p class="tableblock">small</p></th> +<td class="tableblock halign-left valign-top"><p class="tableblock">as big as the column needs to be</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">the rest</p></td> +</tr> +</tbody> +</table> +</div> +<div class="sect2"> +<h3 id="table_borders"><a class="anchor" href="#table_borders"></a><a class="link" href="#table_borders">19.6. Table borders</a></h3> +<div class="sect3"> +<h4 id="frame"><a class="anchor" href="#frame"></a><a class="link" href="#frame">19.6.1. Frame</a></h4> +<table class="tableblock frame-ends grid-all stretch"> +<colgroup> +<col style="width: 33.3333%;"> +<col style="width: 33.3333%;"> +<col style="width: 33.3334%;"> +</colgroup> +<thead> +<tr> +<th class="tableblock halign-left valign-top">A1</th> +<th class="tableblock halign-left valign-top">B1</th> +<th class="tableblock halign-left valign-top">C1</th> +</tr> +</thead> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">A2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">B2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">C2</p></td> +</tr> +</tbody> +</table> +<table class="tableblock frame-sides grid-all stretch"> +<colgroup> +<col style="width: 33.3333%;"> +<col style="width: 33.3333%;"> +<col style="width: 33.3334%;"> +</colgroup> +<thead> +<tr> +<th class="tableblock halign-left valign-top">A1</th> +<th class="tableblock halign-left valign-top">B1</th> +<th class="tableblock halign-left valign-top">C1</th> +</tr> +</thead> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">A2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">B2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">C2</p></td> +</tr> +</tbody> +</table> +<table class="tableblock frame-none grid-all stretch"> +<colgroup> +<col style="width: 33.3333%;"> +<col style="width: 33.3333%;"> +<col style="width: 33.3334%;"> +</colgroup> +<thead> +<tr> +<th class="tableblock halign-left valign-top">A1</th> +<th class="tableblock halign-left valign-top">B1</th> +<th class="tableblock halign-left valign-top">C1</th> +</tr> +</thead> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">A2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">B2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">C2</p></td> +</tr> +</tbody> +</table> +</div> +<div class="sect3"> +<h4 id="grids"><a class="anchor" href="#grids"></a><a class="link" href="#grids">19.6.2. Grids</a></h4> +<table class="tableblock frame-all grid-rows stretch"> +<colgroup> +<col style="width: 33.3333%;"> +<col style="width: 33.3333%;"> +<col style="width: 33.3334%;"> +</colgroup> +<thead> +<tr> +<th class="tableblock halign-left valign-top">A1</th> +<th class="tableblock halign-left valign-top">B1</th> +<th class="tableblock halign-left valign-top">C1</th> +</tr> +</thead> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">A2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">B2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">C2</p></td> +</tr> +</tbody> +</table> +<table class="tableblock frame-all grid-cols stretch"> +<colgroup> +<col style="width: 33.3333%;"> +<col style="width: 33.3333%;"> +<col style="width: 33.3334%;"> +</colgroup> +<thead> +<tr> +<th class="tableblock halign-left valign-top">A1</th> +<th class="tableblock halign-left valign-top">B1</th> +<th class="tableblock halign-left valign-top">C1</th> +</tr> +</thead> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">A2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">B2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">C2</p></td> +</tr> +</tbody> +</table> +<table class="tableblock frame-all grid-none stretch"> +<colgroup> +<col style="width: 33.3333%;"> +<col style="width: 33.3333%;"> +<col style="width: 33.3334%;"> +</colgroup> +<thead> +<tr> +<th class="tableblock halign-left valign-top">A1</th> +<th class="tableblock halign-left valign-top">B1</th> +<th class="tableblock halign-left valign-top">C1</th> +</tr> +</thead> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">A2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">B2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">C2</p></td> +</tr> +</tbody> +</table> +</div> +</div> +<div class="sect2"> +<h3 id="striping"><a class="anchor" href="#striping"></a><a class="link" href="#striping">19.7. Striping</a></h3> +<table class="tableblock frame-all grid-all stripes-even stretch"> +<colgroup> +<col style="width: 33.3333%;"> +<col style="width: 33.3333%;"> +<col style="width: 33.3334%;"> +</colgroup> +<thead> +<tr> +<th class="tableblock halign-left valign-top">A1</th> +<th class="tableblock halign-left valign-top">B1</th> +<th class="tableblock halign-left valign-top">C1</th> +</tr> +</thead> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">A2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">B2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">C2</p></td> +</tr> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">A3</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">B3</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">C3</p></td> +</tr> +</tbody> +</table> +<table class="tableblock frame-all grid-all stripes-odd stretch"> +<colgroup> +<col style="width: 33.3333%;"> +<col style="width: 33.3333%;"> +<col style="width: 33.3334%;"> +</colgroup> +<thead> +<tr> +<th class="tableblock halign-left valign-top">A1</th> +<th class="tableblock halign-left valign-top">B1</th> +<th class="tableblock halign-left valign-top">C1</th> +</tr> +</thead> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">A2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">B2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">C2</p></td> +</tr> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">A3</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">B3</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">C3</p></td> +</tr> +</tbody> +</table> +<table class="tableblock frame-all grid-all stripes-all stretch"> +<colgroup> +<col style="width: 33.3333%;"> +<col style="width: 33.3333%;"> +<col style="width: 33.3334%;"> +</colgroup> +<thead> +<tr> +<th class="tableblock halign-left valign-top">A1</th> +<th class="tableblock halign-left valign-top">B1</th> +<th class="tableblock halign-left valign-top">C1</th> +</tr> +</thead> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">A2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">B2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">C2</p></td> +</tr> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">A3</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">B3</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">C3</p></td> +</tr> +</tbody> +</table> +<table class="tableblock frame-all grid-all stripes-hover stretch"> +<colgroup> +<col style="width: 33.3333%;"> +<col style="width: 33.3333%;"> +<col style="width: 33.3334%;"> +</colgroup> +<thead> +<tr> +<th class="tableblock halign-left valign-top">A1</th> +<th class="tableblock halign-left valign-top">B1</th> +<th class="tableblock halign-left valign-top">C1</th> +</tr> +</thead> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">A2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">B2</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">C2</p></td> +</tr> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">A3</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">B3</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">C3</p></td> +</tr> +</tbody> +</table> +</div> +<div class="sect2"> +<h3 id="orientation"><a class="anchor" href="#orientation"></a><a class="link" href="#orientation">19.8. Orientation</a></h3> +<table class="tableblock frame-all grid-all stretch"> +<colgroup> +<col style="width: 50%;"> +<col style="width: 50%;"> +</colgroup> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">a</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">b</p></td> +</tr> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">c</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">d</p></td> +</tr> +</tbody> +</table> +<table class="tableblock frame-all grid-all stretch"> +<colgroup> +<col style="width: 50%;"> +<col style="width: 50%;"> +</colgroup> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">a</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">b</p></td> +</tr> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">c</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">d</p></td> +</tr> +</tbody> +</table> +</div> +<div class="sect2"> +<h3 id="table_caption"><a class="anchor" href="#table_caption"></a><a class="link" href="#table_caption">19.9. Table caption</a></h3> +<table class="tableblock frame-all grid-all stretch"> +<caption class="title">Table 1. A formal table</caption> +<colgroup> +<col style="width: 50%;"> +<col style="width: 50%;"> +</colgroup> +<thead> +<tr> +<th class="tableblock halign-left valign-top">Name of Column 1</th> +<th class="tableblock halign-left valign-top">Name of Column 2</th> +</tr> +</thead> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">Cell in column 1, row 1</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">Cell in column 2, row 1</p></td> +</tr> +</tbody> +</table> +<table class="tableblock frame-all grid-all stretch"> +<caption class="title">Table A. A formal table</caption> +<colgroup> +<col style="width: 50%;"> +<col style="width: 50%;"> +</colgroup> +<thead> +<tr> +<th class="tableblock halign-left valign-top">Name of Column 1</th> +<th class="tableblock halign-left valign-top">Name of Column 2</th> +</tr> +</thead> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">Cell in column 1, row 1</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">Cell in column 2, row 1</p></td> +</tr> +</tbody> +</table> +<table class="tableblock frame-all grid-all stretch"> +<caption class="title"> A formal table</caption> +<colgroup> +<col style="width: 50%;"> +<col style="width: 50%;"> +</colgroup> +<thead> +<tr> +<th class="tableblock halign-left valign-top">Name of Column 1</th> +<th class="tableblock halign-left valign-top">Name of Column 2</th> +</tr> +</thead> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">Cell in column 1, row 1</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">Cell in column 2, row 1</p></td> +</tr> +</tbody> +</table> +</div> +<div class="sect2"> +<h3 id="escaping_the_cell_separator"><a class="anchor" href="#escaping_the_cell_separator"></a><a class="link" href="#escaping_the_cell_separator">19.10. Escaping the Cell separator</a></h3> +<table class="tableblock frame-all grid-all stretch"> +<colgroup> +<col style="width: 50%;"> +<col style="width: 50%;"> +</colgroup> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">The default separator in PSV tables is the | character.</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">The | character is often referred to as a “pipe”.</p></td> +</tr> +</tbody> +</table> +<table class="tableblock frame-all grid-all stretch"> +<colgroup> +<col style="width: 50%;"> +<col style="width: 50%;"> +</colgroup> +<tbody> +<tr> +<td class="tableblock halign-left valign-top"><p class="tableblock">The default separator in PSV tables is the | character.</p></td> +<td class="tableblock halign-left valign-top"><p class="tableblock">The | character is often referred to as a “pipe”.</p></td> +</tr> +</tbody> +</table> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="horizontal_rules"><a class="anchor" href="#horizontal_rules"></a><a class="link" href="#horizontal_rules">20. Horizontal rules</a></h2> +<div class="sectionbody"> +<hr> +<div class="paragraph"> +<p>A paragraph followed by horizontal rule, +--- +- - - +<strong>*</strong> +* * *</p> +</div> +<div class="paragraph"> +<p>With leading spaces,</p> +</div> +<div class="literalblock"> +<div class="content"> +<pre>''' +---</pre> +</div> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="page_break"><a class="anchor" href="#page_break"></a><a class="link" href="#page_break">21. Page break</a></h2> +<div class="sectionbody"> +<div class="paragraph"> +<p>Before page break.</p> +</div> +<div style="page-break-after: always;"></div> +<div class="paragraph"> +<p>After page break.</p> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="urls"><a class="anchor" href="#urls"></a><a class="link" href="#urls">22. URLs</a></h2> +<div class="sectionbody"> +<div class="paragraph"> +<p><a href="https://asciidoctor.org" class="bare">https://asciidoctor.org</a>.</p> +</div> +<div class="paragraph"> +<p><a href="https://asciidoctor.org" class="a b" target="_blank" rel="noopener">Asciidoctor</a>.</p> +</div> +<div class="paragraph"> +<p><a href="https://kilabit.info" target="_blank" rel="noopener">Kilabit</a>.</p> +</div> +<div class="paragraph"> +<p>https://example.org.</p> +</div> +<div class="paragraph"> +<p><a href="irc://irc.freenode.org/#fedora">Fedora IRC channel</a>.</p> +</div> +<div class="paragraph"> +<p><a href="mailto:ms@kilabit.info">mailto:ms@kilabit.info</a>.</p> +</div> +<div class="paragraph"> +<p><a href="mailto:ms@kilabit.info">Mail to me</a>.</p> +</div> +<div class="paragraph"> +<p>Relative file <a href="test.html">test.html</a>.</p> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="anchors"><a class="anchor" href="#anchors"></a><a class="link" href="#anchors">23. Anchors</a></h2> +<div class="sectionbody"> +<div id="notice" class="paragraph"> +<p>This paragraph gets a lot of attention.</p> +</div> +<div id="notice_2" class="paragraph"> +<p>This paragraph gets a lot of attention.</p> +</div> +<div class="paragraph"> +<p><a id="bookmark-a"></a>Inline anchors make arbitrary content referenceable.</p> +</div> +<div class="paragraph"> +<p><span id="bookmark-b">Inline <em>anchors</em> can be applied to a phrase like this one.</span></p> +</div> +<div class="ulist"> +<ul> +<li> +<p>First item</p> +</li> +<li> +<p><a id="step2"></a>Second item</p> +</li> +<li> +<p>Third item</p> +</li> +</ul> +</div> +<div class="sect2"> +<h3 id="version-4_9"><a class="anchor" href="#version-4_9"></a><a class="link" href="#version-4_9">23.1. Version 4.9</a></h3> +</div> +<div class="sect2"> +<h3 id="version-4_10"><a class="anchor" href="#version-4_10"></a><a class="link" href="#version-4_10">23.2. <a id="current"></a>Version 4.10</a></h3> +</div> +<div class="sect2"> +<h3 id="which-one"><a class="anchor" href="#which-one"></a><a class="link" href="#which-one">23.3. Version 4.11<a id="version-4_11"></a></a></h3> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="cross_references"><a class="anchor" href="#cross_references"></a><a class="link" href="#cross_references">24. Cross references</a></h2> +<div class="sectionbody"> +<div class="sect2"> +<h3 id="internal"><a class="anchor" href="#internal"></a><a class="link" href="#internal">24.1. Internal</a></h3> +<div class="paragraph"> +<p>Cross reference with ID <a href="#_anchors">_anchors</a>.</p> +</div> +<div class="paragraph"> +<p>Cross reference with block title <a href="#anchors">This is anchor</a>.</p> +</div> +<div class="paragraph"> +<p>Cross reference with reftext <a href="#anchors">This is anchor</a>.</p> +</div> +<div class="paragraph"> +<p>Cross reference with custom label <a href="#_anchors">custom anchor label</a>.</p> +</div> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="include"><a class="anchor" href="#include"></a><a class="link" href="#include">25. Include</a></h2> +<div class="sectionbody"> +<div class="paragraph"> +<p>This is inside the fragment1.adoc.</p> +</div> +<div class="listingblock"> +<div class="content"> +<pre class="highlight"><code class="language-go" data-lang="go">// SPDX-FileCopyrightText: 2020 M. Shulhan <ms@kilabit.info> +// SPDX-License-Identifier: GPL-3.0-or-later + +package asciidoctor + +// anchor contains label and counter for duplicate ID. +type anchor struct { + label string + counter int +}</code></pre> +</div> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="images"><a class="anchor" href="#images"></a><a class="link" href="#images">26. Images</a></h2> +<div class="sectionbody"> +<div class="sect2"> +<h3 id="block_images"><a class="anchor" href="#block_images"></a><a class="link" href="#block_images">26.1. Block images</a></h3> +<div class="imageblock"> +<div class="content"> +<img src="sunset.jpg" alt="sunset"> +</div> +</div> +<div class="imageblock"> +<div class="content"> +<img src="sunset.jpg" alt="Block image with attribute ref"> +</div> +</div> +<div class="paragraph"> +<p>image::sunset.jpg[ +This is become paragraph.</p> +</div> +<div class="paragraph"> +<p>image::sunset.jpg]</p> +</div> +<div class="imageblock"> +<div class="content"> +<img src="sunset.jpg" alt="1"> +</div> +</div> +<div class="imageblock"> +<div class="content"> +<img src="sunset.jpg" alt="1"> +</div> +</div> +<div class="imageblock"> +<div class="content"> +<img src="notexist.jpg" alt="notexist"> +</div> +</div> +<div class="imageblock"> +<div class="content"> +<img src="https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg" alt="Tux" width="250" height="350"> +</div> +</div> +<div class="imageblock right text-center"> +<div class="content"> +<img src="sunset.png" alt="Tiger1" width="100" height="100"> +</div> +</div> +<div class="imageblock righx"> +<div class="content"> +<img src="sunset.png" alt="Tiger2" width="100" height="100"> +</div> +</div> +<div class="imageblock"> +<div class="content"> +<img src="sunset.png" alt="Tiger3" width="100" height="100"> +</div> +</div> +<div class="imageblock right"> +<div class="content"> +<img src="sunset.png" alt="Tiger4" width="100" height="100"> +</div> +</div> +<div class="imageblock righx"> +<div class="content"> +<img src="sunset.png" alt="Tiger5" width="100" height="100"> +</div> +</div> +<div class="imageblock right left"> +<div class="content"> +<img src="sunset.png" alt="Tiger6" width="100" height="100"> +</div> +</div> +<div class="imageblock right text-center"> +<div class="content"> +<img src="sunset.png" alt="Tiger7" width="100" height="100"> +</div> +</div> +<div class="imageblock righx center"> +<div class="content"> +<img src="sunset.png" alt="Tiger8" width="100" height="100"> +</div> +</div> +</div> +<div class="sect2"> +<h3 id="float_group"><a class="anchor" href="#float_group"></a><a class="link" href="#float_group">26.2. Float group</a></h3> +<div class="openblock float-group"> +<div class="content"> +<div class="imageblock left"> +<div class="content"> +<img src="a.png" alt="A" width="240" height="180"> +</div> +<div class="title">Figure 1. Image A</div> +</div> +<div class="imageblock left"> +<div class="content"> +<img src="b.png" alt="B" width="240" height="180"> +</div> +<div class="title">Figure 2. Image B</div> +</div> +</div> +</div> +<div class="paragraph"> +<p>Text below images.</p> +</div> +</div> +<div class="sect2"> +<h3 id="inline_image"><a class="anchor" href="#inline_image"></a><a class="link" href="#inline_image">26.3. Inline image</a></h3> +<div class="paragraph"> +<p><span class="image"><img src="https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg" alt="Linux" width="25" height="35"></span></p> +</div> +<div class="paragraph"> +<p><span class="image right"><img src="linux.png" alt="Linux" width="150" height="150"></span> +You can find Linux everywhere these days!</p> +</div> +<div class="paragraph"> +<p><span class="image right"><img src="sunset.jpg" alt="Sunset" width="150" height="150"></span> What a beautiful sunset!</p> +</div> +<div class="paragraph"> +<p>Image with link <span class="image"><a class="image" href="https://kilabit.info"><img src="sunset.jpg" alt="Sunset"></a></span>.</p> +</div> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="block_open"><a class="anchor" href="#block_open"></a><a class="link" href="#block_open">27. Block open</a></h2> +<div class="sectionbody"> +<div class="openblock"> +<div class="title">Section inside</div> +<div class="content"> +<div class="paragraph"> +<p>== Section</p> +</div> +</div> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="video"><a class="anchor" href="#video"></a><a class="link" href="#video">28. Video</a></h2> +<div class="sectionbody"> +<div class="videoblock"> +<div class="title">Video without options</div> +<div class="content"> +<video src="video_file.mp4#t=60,140" width="640" height="320" poster="sunset.jpg" controls> +Your browser does not support the video tag. +</video> +</div> +</div> +<div class="videoblock"> +<div class="title">Video with nocontrols, nofullscreen</div> +<div class="content"> +<video src="video_file.mp4#t=60,140" width="640" height="320" poster="sunset.jpg" loop> +Your browser does not support the video tag. +</video> +</div> +</div> +<div class="videoblock"> +<div class="title">Youtube default options</div> +<div class="content"> +<iframe width="640" height="320" src="https://www.youtube.com/embed/rPQoq7ThGAU?rel=0&start=60&end=140&hl=fr" frameborder="0" allowfullscreen></iframe> +</div> +</div> +<div class="videoblock"> +<div class="title">Youtube</div> +<div class="content"> +<iframe width="640" height="320" src="https://www.youtube.com/embed/rPQoq7ThGAU?rel=0&start=60&end=140&loop=1&modestbranding=1&controls=0&playlist=rPQoq7ThGAU&fs=0&theme=light&hl=fr" frameborder="0"></iframe> +</div> +</div> +<div class="videoblock"> +<div class="title">Youtube attribute at the end</div> +<div class="content"> +<video src="rPQoq7ThGAU#t=60,140" width="640" height="320" controls> +Your browser does not support the video tag. +</video> +</div> +</div> +<div class="videoblock"> +<div class="title">Vimeo</div> +<div class="content"> +<iframe width="640" height="320" src="https://player.vimeo.com/video/67480300?loop=1#at=60" frameborder="0"></iframe> +</div> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="audio"><a class="anchor" href="#audio"></a><a class="link" href="#audio">29. Audio</a></h2> +<div class="sectionbody"> +<div class="audioblock"> +<div class="content"> +<audio src="ocean_waves.mp3" autoplay controls loop> +Your browser does not support the audio tag. +</audio> +</div> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="admonition"><a class="anchor" href="#admonition"></a><a class="link" href="#admonition">30. Admonition</a></h2> +<div class="sectionbody"> +<div class="sect2"> +<h3 id="line_admonition"><a class="anchor" href="#line_admonition"></a><a class="link" href="#line_admonition">30.1. Line admonition</a></h3> +<div class="paragraph"> +<p>Admonition between a paragraph. +WARNING: Wolpertingers are known to nest in server racks. +Enter at your own risk.</p> +</div> +<div class="admonitionblock warning"> +<table> +<tr> +<td class="icon"> +<div class="title">Warning</div> +</td> +<td class="content"> +Wolpertingers are known to nest in server racks. +Enter at your own risk. +</td> +</tr> +</table> +</div> +<div class="paragraph"> +<p>+ +Is this inside admonition too?</p> +</div> +<div class="admonitionblock note"> +<table> +<tr> +<td class="icon"> +<div class="title">Note</div> +</td> +<td class="content"> +With tab. +</td> +</tr> +</table> +</div> +<div class="admonitionblock tip"> +<table> +<tr> +<td class="icon"> +<div class="title">Tip</div> +</td> +<td class="content"> +With multiple spaces. +</td> +</tr> +</table> +</div> +<div class="paragraph"> +<p>Can admonition added inside list,</p> +</div> +<div class="ulist"> +<ul> +<li> +<p>List 1</p> +<div class="admonitionblock important"> +<table> +<tr> +<td class="icon"> +<div class="title">Important</div> +</td> +<td class="content"> +inside list +</td> +</tr> +</table> +</div> +</li> +<li> +<p>List 2</p> +</li> +</ul> +</div> +<div class="admonitionblock caution"> +<table> +<tr> +<td class="icon"> +<div class="title">Caution</div> +</td> +<td class="content"> +admonition followed by list +* List item +</td> +</tr> +</table> +</div> +</div> +<div class="sect2"> +<h3 id="style_admonition"><a class="anchor" href="#style_admonition"></a><a class="link" href="#style_admonition">30.2. Style admonition</a></h3> +<div class="admonitionblock important"> +<table> +<tr> +<td class="icon"> +<div class="title">Important</div> +</td> +<td class="content"> + +<div class="title">Feeding the Werewolves</div> +<div class="paragraph"> +<p>While werewolves are hardy community members, keep in mind the following dietary concerns:</p> +</div> +<div class="olist arabic"> +<ol class="arabic"> +<li> +<p>They are allergic to cinnamon.</p> +</li> +<li> +<p>More than two glasses of orange juice in 24 hours makes them howl in harmony with alarms and sirens.</p> +</li> +<li> +<p>Celery makes them sad.</p> +</li> +</ol> +</div> +</td> +</tr> +</table> +</div> +<div class="admonitionblock tip"> +<table> +<tr> +<td class="icon"> +<div class="title">Tip</div> +</td> +<td class="content"> +Admonition with paragraph. +</td> +</tr> +</table> +</div> +<div class="paragraph"> +<p>Is this included in TIP?</p> +</div> +<div class="olist arabic"> +<ol class="arabic"> +<li> +<p>With</p> +</li> +<li> +<p>list</p> +</li> +</ol> +</div> +<div class="admonitionblock caution"> +<table> +<tr> +<td class="icon"> +<div class="title">Caution</div> +</td> +<td class="content"> + +<div class="literalblock"> +<div class="content"> +<pre>This is open block.</pre> +</div> +</div> +</td> +</tr> +</table> +</div> +<div class="admonitionblock warning"> +<table> +<tr> +<td class="icon"> +<div class="title">Warning</div> +</td> +<td class="content"> +Literal paragraph with admonition. +</td> +</tr> +</table> +</div> +</div> +<div class="sect2"> +<h3 id="icons"><a class="anchor" href="#icons"></a><a class="link" href="#icons">30.3. Icons</a></h3> +<div class="admonitionblock warning"> +<table> +<tr> +<td class="icon"> +<i class="fa icon-warning" title="Warning"></i> +</td> +<td class="content"> +Wolpertingers are known to nest in server racks. +Enter at your own risk. +</td> +</tr> +</table> +</div> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="sidebar"><a class="anchor" href="#sidebar"></a><a class="link" href="#sidebar">31. Sidebar</a></h2> +<div class="sectionbody"> +<div class="sidebarblock"> +<div class="content"> +<div class="title">AsciiDoc history</div> +<div class="paragraph"> +<p>AsciiDoc was first released in Nov 2002 by Stuart Rackham. +It was designed from the start to be a shorthand syntax +for producing professional documents like DocBook and LaTeX.</p> +</div> +</div> +</div> +<div class="sidebarblock"> +<div class="content"> +<div class="title">Sidebar with list</div> +<div class="olist arabic"> +<ol class="arabic"> +<li> +<p>List</p> +</li> +<li> +<p>Item</p> +</li> +</ol> +</div> +</div> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="example"><a class="anchor" href="#example"></a><a class="link" href="#example">32. Example</a></h2> +<div class="sectionbody"> +<div class="exampleblock"> +<div class="title">Example 1. Sample document</div> +<div class="content"> +<div class="paragraph"> +<p>Here’s a sample AsciiDoc document:</p> +</div> +<div class="listingblock"> +<div class="content"> +<pre>= Title of Document +Doc Writer +:toc: + +This guide provides...</pre> +</div> +</div> +<div class="paragraph"> +<p>The document header is useful, but not required.</p> +</div> +</div> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="quote"><a class="anchor" href="#quote"></a><a class="link" href="#quote">33. Quote</a></h2> +<div class="sectionbody"> +<div class="quoteblock"> +<blockquote> +Quote or excerpt text +</blockquote> +<div class="attribution"> +— attribution<br> +<cite>citation title and information</cite> +</div> +</div> +<div class="quoteblock"> +<div class="title">After landing the cloaked Klingon bird of prey in Golden Gate park:</div> +<blockquote> +Everybody remember where we parked. +</blockquote> +<div class="attribution"> +— Captain James T. Kirk<br> +<cite>Star Trek IV: The Voyage Home</cite> +</div> +</div> +<div class="quoteblock"> +<blockquote> + +<div class="paragraph"> +<p>Dennis: Come and see the violence inherent in the system. Help! Help! I’m being repressed!</p> +</div> +<div class="paragraph"> +<p>King Arthur: Bloody peasant!</p> +</div> +<div class="paragraph"> +<p>Dennis: Oh, what a giveaway! Did you hear that? Did you hear that, eh? That’s what I’m on about! Did you see him repressing me? You saw him, Didn’t you?</p> +</div> +</blockquote> +<div class="attribution"> +— Monty Python and the Holy Grail +</div> +</div> +<div class="sect2"> +<h3 id="quoted_paragraph"><a class="anchor" href="#quoted_paragraph"></a><a class="link" href="#quoted_paragraph">33.1. Quoted paragraph</a></h3> +<div class="quoteblock"> +<blockquote> +I hold it that a little rebellion now and then is a good thing, +and as necessary in the political world as storms in the physical. +</blockquote> +<div class="attribution"> +— Thomas Jefferson<br> +<cite>Papers of Thomas Jefferson: Volume 11</cite> +</div> +</div> +<div class="paragraph"> +<p>"I hold it that a little rebellion now and then is a good thing, +and as necessary in the political world as storms in the physical."</p> +</div> +<div class="paragraph"> +<p>"I hold" +—Author</p> +</div> +<div class="quoteblock"> +<blockquote> +Author with tab +</blockquote> +<div class="attribution"> +— Author +</div> +</div> +<div class="paragraph"> +<p>"I hold</p> +</div> +<div class="listingblock"> +<div class="content"> +<pre>Block</pre> +</div> +</div> +<div class="paragraph"> +<p>it that" — Thomas Jefferson, Papers of Thomas Jefferson: Volume 11</p> +</div> +<div class="ulist"> +<ul> +<li> +<p>List item 1</p> +<div class="quoteblock"> +<blockquote> +a quote +</blockquote> +<div class="attribution"> +— Thomas Jefferson<br> +<cite>Papers of Thomas Jefferson: Volume 11</cite> +</div> +</div> +</li> +<li> +<p>List item 2</p> +</li> +</ul> +</div> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="verse"><a class="anchor" href="#verse"></a><a class="link" href="#verse">34. Verse</a></h2> +<div class="sectionbody"> +<div class="verseblock"> +<pre class="content">The fog comes +on little cat feet.</pre> +<div class="attribution"> +— Carl Sandburg<br> +<cite>two lines from the poem Fog</cite> +</div> +</div> +<div class="verseblock"> +<pre class="content">The fog comes +on little cat feet. + +It sits looking +over harbor and city +on silent haunches +and then moves on.</pre> +<div class="attribution"> +— Carl Sandburg<br> +<cite>Fog</cite> +</div> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="passthrough"><a class="anchor" href="#passthrough"></a><a class="link" href="#passthrough">35. Passthrough</a></h2> +<div class="sectionbody"> +<div class="paragraph"> +<p><code><em>A <strong>B</strong></em>+</code></p> +</div> +<div class="sect2"> +<h3 id="block_passthrough"><a class="anchor" href="#block_passthrough"></a><a class="link" href="#block_passthrough">35.1. Block passthrough</a></h3> +<video poster="images/movie-reel.png"> + <source src="videos/writing-zen.webm" type="video/webm"> +</video> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="section_discrete"><a class="anchor" href="#section_discrete"></a><a class="link" href="#section_discrete">36. Section Discrete</a></h2> +<div class="sectionbody"> +<h3 id="discrete" class="discrete">Discrete</h3> +<div class="paragraph"> +<p>This is content of discrete section.</p> +</div> +<div class="sect2"> +<h3 id="after_discrete"><a class="anchor" href="#after_discrete"></a><a class="link" href="#after_discrete">36.1. After discrete</a></h3> +<div class="sidebarblock"> +<div class="content"> +<div class="paragraph"> +<p>Discrete headings are useful for making headings inside of other blocks, like +this sidebar.</p> +</div> +<h2 id="discrete_heading" class="discrete">Discrete Heading</h2> +<div class="paragraph"> +<p>Discrete headings can be used where sections are not permitted.</p> +</div> +</div> +</div> +<div class="paragraph"> +<p>END OF THE TEST.</p> +</div> +</div> +</div> +</div> +</div> +<div id="footer"> +<div id="footer-text"> + 1.1.1<br> +Last updated 2022-07-17 17:22:21 +0700 +</div> +</div> +</body> +</html>
\ No newline at end of file |