You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
437 lines
11 KiB
437 lines
11 KiB
4 years ago
|
<!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 2.0.12">
|
||
|
|
<meta name="description" content="A demo of Asciidoctor. This document exercises numerous features of AsciiDoc to test Asciidoctor compliance.">
|
||
|
|
<meta name="author" content="Dan Allen">
|
||
|
|
<title>Asciidoctor Demo</title>
|
||
|
|
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/asciidoctor.js/1.5.9/css/asciidoctor.min.css">
|
||
|
|
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.3/styles/github.min.css">
|
||
|
|
</head>
|
||
|
|
<body class="article">
|
||
|
|
<div id="header">
|
||
|
|
<h1>Asciidoctor Demo</h1>
|
||
|
|
<div class="details">
|
||
|
|
<span id="author" class="author">Dan Allen</span><br>
|
||
|
|
<span id="email" class="email"><a href="mailto:thedoc@asciidoctor.org">thedoc@asciidoctor.org</a></span><br>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="content">
|
||
|
|
<div id="preamble">
|
||
|
|
<div class="sectionbody">
|
||
|
|
<div class="paragraph lead">
|
||
|
|
<p>This is a demonstration of Asciidoctor. And this is the preamble of this document.</p>
|
||
|
|
</div>
|
||
|
|
<div id="purpose" class="sidebarblock">
|
||
|
|
<div class="content">
|
||
|
|
<div class="title">Purpose</div>
|
||
|
|
<div class="paragraph">
|
||
|
|
<p>This document exercises many of the features of AsciiDoc to test the Asciidoctor implementation.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="admonitionblock tip">
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td class="icon">
|
||
|
|
<i class="fa icon-tip" title="Tip"></i>
|
||
|
|
</td>
|
||
|
|
<td class="content">
|
||
|
|
If you want the output to look familiar, copy (or link) the AsciiDoc stylesheet, asciidoc.css, to the output directory.
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="admonitionblock note">
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td class="icon">
|
||
|
|
<i class="fa icon-note" title="Note"></i>
|
||
|
|
</td>
|
||
|
|
<td class="content">
|
||
|
|
Items marked with TODO are either not yet supported or a work in progress.
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sect1">
|
||
|
|
<h2 id="first">1. First Steps with <a href="http://asciidoc.org">AsciiDoc</a></h2>
|
||
|
|
<div class="sectionbody">
|
||
|
|
<div class="ulist">
|
||
|
|
<div class="title">Inline markup</div>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<p>single quotes around a phrase place <em>emphasis</em></p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<p>astericks around a phrase make the text <strong>bold</strong></p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<p>double astericks around one or more <strong>l</strong>etters in a word make those letters bold</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<p>double underscore around a <em>sub</em>string in a word emphasize that substring</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<p>use carrots around characters to make them <sup>super</sup>script</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<p>use tildes around characters to make them <sub>sub</sub>script</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<p>to pass through <u>HTML</u> directly, surround the text with triple plus</p>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="ulist">
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<p>characters can be escaped using a \</p>
|
||
|
|
<div class="ulist">
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<p>for instance, you can escape a quote inside emphasized text like <em>Here's Johnny!</em></p>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<p>you can safely use reserved XML characters like <, > and &, which are escaped when rendering</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<p>force a space between inline elements using the {sp} attribute</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<p>hold text together with an intrinsic non-breaking space attribute, {nbsp}</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<p>handle words with unicode characters like in the name Gregory Romé</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<p>claim your copyright ©, registered trademark ® or trademark ™</p>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="paragraph">
|
||
|
|
<p>You can write text <a href="http://example.com">with inline links</a>, optionally using an explicit <a href="http://example.com">link prefix</a>. In either case, the link can have a <a href="http://example.com?foo=bar&lang=en">query string</a>.</p>
|
||
|
|
</div>
|
||
|
|
<div class="paragraph">
|
||
|
|
<p>If you want to break a line<br>
|
||
|
|
just end it in a + sign<br>
|
||
|
|
and continue typing on the next line.</p>
|
||
|
|
</div>
|
||
|
|
<div class="sect2">
|
||
|
|
<h3 id="lists_upon_lists">1.1. Lists Upon Lists</h3>
|
||
|
|
<div class="ulist">
|
||
|
|
<div class="title">Adjacent lists</div>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<p>this list</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<p>should join</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<p>to have</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<p>four items</p>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div id="numbered" class="olist arabic">
|
||
|
|
<div class="title">Numbered lists</div>
|
||
|
|
<ol class="arabic">
|
||
|
|
<li>
|
||
|
|
<p>These items</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<p>will be auto-numbered</p>
|
||
|
|
<div class="olist loweralpha">
|
||
|
|
<ol class="loweralpha" type="a">
|
||
|
|
<li>
|
||
|
|
<p>and can be nested</p>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<p>A numbered list can nest</p>
|
||
|
|
<div class="ulist">
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<p>unordered</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<p>list</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<p>items</p>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
<div class="paragraph">
|
||
|
|
<div class="title">Statement</div>
|
||
|
|
<p>I swear I left it in <em>Guy's</em> car. Let's go look for it.</p>
|
||
|
|
</div>
|
||
|
|
<div id="defs" class="dlist">
|
||
|
|
<dl>
|
||
|
|
<dt class="hdlist1">term</dt>
|
||
|
|
<dd>
|
||
|
|
<p> definition
|
||
|
|
line two</p>
|
||
|
|
</dd>
|
||
|
|
<dt class="hdlist1"><a id="another_term"></a>another term</dt>
|
||
|
|
<dd>
|
||
|
|
<p>another definition, which can be literal (indented) or regular paragraph</p>
|
||
|
|
</dd>
|
||
|
|
</dl>
|
||
|
|
</div>
|
||
|
|
<div class="paragraph">
|
||
|
|
<p>This should be a standalone paragraph, not grabbed by the definition list.</p>
|
||
|
|
</div>
|
||
|
|
<div id="nested" class="ulist">
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<p>first level
|
||
|
|
written on two lines</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<p>first level</p>
|
||
|
|
<div class="literalblock">
|
||
|
|
<div class="content">
|
||
|
|
<pre>with this literal text</pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="ulist">
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<p>second level</p>
|
||
|
|
<div class="ulist">
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<p>third level</p>
|
||
|
|
<div class="ulist">
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<p>fourth level</p>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<p>back to<br>
|
||
|
|
first level</p>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="paragraph">
|
||
|
|
<p>Let’s make a horizontal rule…​</p>
|
||
|
|
</div>
|
||
|
|
<hr>
|
||
|
|
<div class="paragraph">
|
||
|
|
<p>then take a break.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sect1">
|
||
|
|
<h2 id="were_back">2. We’re back!</h2>
|
||
|
|
<div class="sectionbody">
|
||
|
|
<div class="paragraph">
|
||
|
|
<p>Want to see a <span class="image"><img src="images/tiger.png" alt="Tiger"></span>?</p>
|
||
|
|
</div>
|
||
|
|
<div class="paragraph">
|
||
|
|
<p>Do you feel safer with the tiger in a box?</p>
|
||
|
|
</div>
|
||
|
|
<div class="imageblock">
|
||
|
|
<div class="content">
|
||
|
|
<img src="images/tiger.png" alt="tiger">
|
||
|
|
</div>
|
||
|
|
<div class="title">Figure 1. Tiger in a box</div>
|
||
|
|
</div>
|
||
|
|
<div class="paragraph">
|
||
|
|
<p><!DOCTYPE html>
|
||
|
|
<html lang="">
|
||
|
|
<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">
|
||
|
|
<title>Vue App</title>
|
||
|
|
<link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
|
||
|
|
<body>
|
||
|
|
<div id="app"></div>
|
||
|
|
<script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
|
||
|
|
</html></p>
|
||
|
|
</div>
|
||
|
|
<div class="listingblock">
|
||
|
|
<div class="title">Asciidoctor usage example, should contain 3 lines</div>
|
||
|
|
<div class="content">
|
||
|
|
<pre class="highlightjs highlight"><code class="language-ruby hljs" data-lang="ruby">doc = Asciidoctor::Document.new("*This* is it!", :header_footer => false)
|
||
|
|
|
||
|
|
puts doc.render</code></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="paragraph">
|
||
|
|
<p>Here’s what it outputs (using the built-in templates):</p>
|
||
|
|
</div>
|
||
|
|
<div class="literalblock">
|
||
|
|
<div class="content">
|
||
|
|
<pre><div class="paragraph">
|
||
|
|
<p><strong>This</strong> is it!</p>
|
||
|
|
</div></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sect2">
|
||
|
|
<h3 id="quotes">2.1. “Quotes”</h3>
|
||
|
|
<div class="quoteblock">
|
||
|
|
<blockquote>
|
||
|
|
<div class="paragraph">
|
||
|
|
<p>AsciiDoc is <em>so</em> <strong>powerful</strong>!</p>
|
||
|
|
</div>
|
||
|
|
</blockquote>
|
||
|
|
</div>
|
||
|
|
<div class="paragraph">
|
||
|
|
<p>This verse comes to mind.</p>
|
||
|
|
</div>
|
||
|
|
<div class="verseblock">
|
||
|
|
<pre class="content">La la la</pre>
|
||
|
|
</div>
|
||
|
|
<div class="paragraph">
|
||
|
|
<p>Here’s another quote:</p>
|
||
|
|
</div>
|
||
|
|
<div class="quoteblock">
|
||
|
|
<blockquote>
|
||
|
|
<div class="paragraph">
|
||
|
|
<p>When you have eliminated all which is impossible, then whatever remains, however improbable, must be the truth.</p>
|
||
|
|
</div>
|
||
|
|
</blockquote>
|
||
|
|
<div class="attribution">
|
||
|
|
— Sir Arthur Conan Doyle<br>
|
||
|
|
<cite>The Adventures of Sherlock Holmes</cite>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sect1">
|
||
|
|
<h2 id="literally">3. Getting Literal</h2>
|
||
|
|
<div class="sectionbody">
|
||
|
|
<div class="literalblock">
|
||
|
|
<div class="content">
|
||
|
|
<pre>Want to get literal? Just prefix a line with a space (just one will do).</pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="literalblock">
|
||
|
|
<div class="content">
|
||
|
|
<pre>I'll join that party, too.</pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="paragraph">
|
||
|
|
<p>We forgot to mention in <a href="#numbered">Numbered lists</a> that you can change the numbering style.</p>
|
||
|
|
</div>
|
||
|
|
<div class="olist loweralpha">
|
||
|
|
<ol class="loweralpha" type="a">
|
||
|
|
<li>
|
||
|
|
<p>first item (yeah!)</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<p>second item, looking <code>so mono</code></p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<p>third item, <code>mono</code> it is!</p>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sect1">
|
||
|
|
<h2 id="wrapup">4. Wrap-up</h2>
|
||
|
|
<div class="sectionbody">
|
||
|
|
<div class="admonitionblock note">
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td class="icon">
|
||
|
|
<i class="fa icon-note" title="Note"></i>
|
||
|
|
</td>
|
||
|
|
<td class="content">
|
||
|
|
AsciiDoc is quite cool, you should try it!
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="admonitionblock tip">
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td class="icon">
|
||
|
|
<i class="fa icon-tip" title="Tip"></i>
|
||
|
|
</td>
|
||
|
|
<td class="content">
|
||
|
|
<div class="title">Info</div>
|
||
|
|
<div class="paragraph">
|
||
|
|
<p>Go to this URL to learn more about it:</p>
|
||
|
|
</div>
|
||
|
|
<div class="ulist">
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<p><a href="http://asciidoc.org" class="bare">http://asciidoc.org</a></p>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="paragraph">
|
||
|
|
<p>Or you could return to the <a href="#first">First Steps</a> or <a href="#purpose">Purpose</a>.</p>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="paragraph">
|
||
|
|
<p>Here’s a reference to the definition of <a href="#another_term">another term</a>, in case you forgot it.</p>
|
||
|
|
</div>
|
||
|
|
<div class="admonitionblock note">
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td class="icon">
|
||
|
|
<i class="fa icon-note" title="Note"></i>
|
||
|
|
</td>
|
||
|
|
<td class="content">
|
||
|
|
One more thing. Happy documenting!
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="paragraph">
|
||
|
|
<p><a id="google"></a>When all else fails, head over to <a href="http://google.com" class="bare">http://google.com</a>.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="footer">
|
||
|
|
<div id="footer-text">
|
||
|
|
Last updated 2021-02-21 21:38:59 +0200
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.3/highlight.min.js"></script>
|
||
|
|
<script>
|
||
|
|
if (!hljs.initHighlighting.called) {
|
||
|
|
hljs.initHighlighting.called = true
|
||
|
|
;[].slice.call(document.querySelectorAll('pre.highlight > code')).forEach(function (el) { hljs.highlightBlock(el) })
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|