<!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.10"> <meta name="description" content="Intro and Install"> <meta name="keywords" content="AsciiDoc Syntax Quick Reference"> <meta name="author" content="Apostolos rootApostolos@swarmlab.io"> <title>AsciiDoc Syntax Quick Reference !</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700"> <style> /* Asciidoctor default stylesheet | MIT License | https://asciidoctor.org */ /* Uncomment @import statement to use as custom stylesheet */ /*@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700";*/ article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section{display:block} audio,video{display:inline-block} audio:not([controls]){display:none;height:0} html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%} a{background:none} a:focus{outline:thin dotted} a:active,a:hover{outline:0} h1{font-size:2em;margin:.67em 0} abbr[title]{border-bottom:1px dotted} b,strong{font-weight:bold} dfn{font-style:italic} hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0} mark{background:#ff0;color:#000} code,kbd,pre,samp{font-family:monospace;font-size:1em} pre{white-space:pre-wrap} q{quotes:"\201C" "\201D" "\2018" "\2019"} small{font-size:80%} sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} sup{top:-.5em} sub{bottom:-.25em} img{border:0} svg:not(:root){overflow:hidden} figure{margin:0} fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em} legend{border:0;padding:0} button,input,select,textarea{font-family:inherit;font-size:100%;margin:0} button,input{line-height:normal} button,select{text-transform:none} button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer} button[disabled],html input[disabled]{cursor:default} input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0} button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0} textarea{overflow:auto;vertical-align:top} table{border-collapse:collapse;border-spacing:0} *,*::before,*::after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} html,body{font-size:100%} body{background:#fff;color:rgba(0,0,0,.8);padding:0;margin:0;font-family:"Noto Serif","DejaVu Serif",serif;font-weight:400;font-style:normal;line-height:1;position:relative;cursor:auto;tab-size:4;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased} a:hover{cursor:pointer} img,object,embed{max-width:100%;height:auto} object,embed{height:100%} img{-ms-interpolation-mode:bicubic} .left{float:left!important} .right{float:right!important} .text-left{text-align:left!important} .text-right{text-align:right!important} .text-center{text-align:center!important} .text-justify{text-align:justify!important} .hide{display:none} img,object,svg{display:inline-block;vertical-align:middle} textarea{height:auto;min-height:50px} select{width:100%} .center{margin-left:auto;margin-right:auto} .stretch{width:100%} .subheader,.admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{line-height:1.45;color:#7a2518;font-weight:400;margin-top:0;margin-bottom:.25em} div,dl,dt,dd,ul,ol,li,h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6,pre,form,p,blockquote,th,td{margin:0;padding:0;direction:ltr} a{color:#2156a5;text-decoration:underline;line-height:inherit} a:hover,a:focus{color:#1d4b8f} a img{border:0} p{font-family:inherit;font-weight:400;font-size:1em;line-height:1.6;margin-bottom:1.25em;text-rendering:optimizeLegibility} p aside{font-size:.875em;line-height:1.35;font-style:italic} h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{font-family:"Open Sans","DejaVu Sans",sans-serif;font-weight:300;font-style:normal;color:#ba3925;text-rendering:optimizeLegibility;margin-top:1em;margin-bottom:.5em;line-height:1.0125em} h1 small,h2 small,h3 small,#toctitle small,.sidebarblock>.content>.title small,h4 small,h5 small,h6 small{font-size:60%;color:#e99b8f;line-height:0} h1{font-size:2.125em} h2{font-size:1.6875em} h3,#toctitle,.sidebarblock>.content>.title{font-size:1.375em} h4,h5{font-size:1.125em} h6{font-size:1em} hr{border:solid #dddddf;border-width:1px 0 0;clear:both;margin:1.25em 0 1.1875em;height:0} em,i{font-style:italic;line-height:inherit} strong,b{font-weight:bold;line-height:inherit} small{font-size:60%;line-height:inherit} code{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;color:rgba(0,0,0,.9)} ul,ol,dl{font-size:1em;line-height:1.6;margin-bottom:1.25em;list-style-position:outside;font-family:inherit} ul,ol{margin-left:1.5em} ul li ul,ul li ol{margin-left:1.25em;margin-bottom:0;font-size:1em} ul.square li ul,ul.circle li ul,ul.disc li ul{list-style:inherit} ul.square{list-style-type:square} ul.circle{list-style-type:circle} ul.disc{list-style-type:disc} ol li ul,ol li ol{margin-left:1.25em;margin-bottom:0} dl dt{margin-bottom:.3125em;font-weight:bold} dl dd{margin-bottom:1.25em} abbr,acronym{text-transform:uppercase;font-size:90%;color:rgba(0,0,0,.8);border-bottom:1px dotted #ddd;cursor:help} abbr{text-transform:none} blockquote{margin:0 0 1.25em;padding:.5625em 1.25em 0 1.1875em;border-left:1px solid #ddd} blockquote cite{display:block;font-size:.9375em;color:rgba(0,0,0,.6)} blockquote cite::before{content:"\2014 \0020"} blockquote cite a,blockquote cite a:visited{color:rgba(0,0,0,.6)} blockquote,blockquote p{line-height:1.6;color:rgba(0,0,0,.85)} @media screen and (min-width:768px){h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2} h1{font-size:2.75em} h2{font-size:2.3125em} h3,#toctitle,.sidebarblock>.content>.title{font-size:1.6875em} h4{font-size:1.4375em}} table{background:#fff;margin-bottom:1.25em;border:solid 1px #dedede} table thead,table tfoot{background:#f7f8f7} table thead tr th,table thead tr td,table tfoot tr th,table tfoot tr td{padding:.5em .625em .625em;font-size:inherit;color:rgba(0,0,0,.8);text-align:left} table tr th,table tr td{padding:.5625em .625em;font-size:inherit;color:rgba(0,0,0,.8)} table tr.even,table tr.alt{background:#f8f8f7} table thead tr th,table tfoot tr th,table tbody tr td,table tr td,table tfoot tr td{display:table-cell;line-height:1.6} h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2;word-spacing:-.05em} h1 strong,h2 strong,h3 strong,#toctitle strong,.sidebarblock>.content>.title strong,h4 strong,h5 strong,h6 strong{font-weight:400} .clearfix::before,.clearfix::after,.float-group::before,.float-group::after{content:" ";display:table} .clearfix::after,.float-group::after{clear:both} :not(pre):not([class^=L])>code{font-size:.9375em;font-style:normal!important;letter-spacing:0;padding:.1em .5ex;word-spacing:-.15em;background:#f7f7f8;-webkit-border-radius:4px;border-radius:4px;line-height:1.45;text-rendering:optimizeSpeed;word-wrap:break-word} :not(pre)>code.nobreak{word-wrap:normal} :not(pre)>code.nowrap{white-space:nowrap} pre{color:rgba(0,0,0,.9);font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;line-height:1.45;text-rendering:optimizeSpeed} pre code,pre pre{color:inherit;font-size:inherit;line-height:inherit} pre>code{display:block} pre.nowrap,pre.nowrap pre{white-space:pre;word-wrap:normal} em em{font-style:normal} strong strong{font-weight:400} .keyseq{color:rgba(51,51,51,.8)} kbd{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;display:inline-block;color:rgba(0,0,0,.8);font-size:.65em;line-height:1.45;background:#f7f7f7;border:1px solid #ccc;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em white inset;box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em #fff inset;margin:0 .15em;padding:.2em .5em;vertical-align:middle;position:relative;top:-.1em;white-space:nowrap} .keyseq kbd:first-child{margin-left:0} .keyseq kbd:last-child{margin-right:0} .menuseq,.menuref{color:#000} .menuseq b:not(.caret),.menuref{font-weight:inherit} .menuseq{word-spacing:-.02em} .menuseq b.caret{font-size:1.25em;line-height:.8} .menuseq i.caret{font-weight:bold;text-align:center;width:.45em} b.button::before,b.button::after{position:relative;top:-1px;font-weight:400} b.button::before{content:"[";padding:0 3px 0 2px} b.button::after{content:"]";padding:0 2px 0 3px} p a>code:hover{color:rgba(0,0,0,.9)} #header,#content,#footnotes,#footer{width:100%;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;max-width:62.5em;*zoom:1;position:relative;padding-left:.9375em;padding-right:.9375em} #header::before,#header::after,#content::before,#content::after,#footnotes::before,#footnotes::after,#footer::before,#footer::after{content:" ";display:table} #header::after,#content::after,#footnotes::after,#footer::after{clear:both} #content{margin-top:1.25em} #content::before{content:none} #header>h1:first-child{color:rgba(0,0,0,.85);margin-top:2.25rem;margin-bottom:0} #header>h1:first-child+#toc{margin-top:8px;border-top:1px solid #dddddf} #header>h1:only-child,body.toc2 #header>h1:nth-last-child(2){border-bottom:1px solid #dddddf;padding-bottom:8px} #header .details{border-bottom:1px solid #dddddf;line-height:1.45;padding-top:.25em;padding-bottom:.25em;padding-left:.25em;color:rgba(0,0,0,.6);display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-flow:row wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap} #header .details span:first-child{margin-left:-.125em} #header .details span.email a{color:rgba(0,0,0,.85)} #header .details br{display:none} #header .details br+span::before{content:"\00a0\2013\00a0"} #header .details br+span.author::before{content:"\00a0\22c5\00a0";color:rgba(0,0,0,.85)} #header .details br+span#revremark::before{content:"\00a0|\00a0"} #header #revnumber{text-transform:capitalize} #header #revnumber::after{content:"\00a0"} #content>h1:first-child:not([class]){color:rgba(0,0,0,.85);border-bottom:1px solid #dddddf;padding-bottom:8px;margin-top:0;padding-top:1rem;margin-bottom:1.25rem} #toc{border-bottom:1px solid #e7e7e9;padding-bottom:.5em} #toc>ul{margin-left:.125em} #toc ul.sectlevel0>li>a{font-style:italic} #toc ul.sectlevel0 ul.sectlevel1{margin:.5em 0} #toc ul{font-family:"Open Sans","DejaVu Sans",sans-serif;list-style-type:none} #toc li{line-height:1.3334;margin-top:.3334em} #toc a{text-decoration:none} #toc a:active{text-decoration:underline} #toctitle{color:#7a2518;font-size:1.2em} @media screen and (min-width:768px){#toctitle{font-size:1.375em} body.toc2{padding-left:15em;padding-right:0} #toc.toc2{margin-top:0!important;background:#f8f8f7;position:fixed;width:15em;left:0;top:0;border-right:1px solid #e7e7e9;border-top-width:0!important;border-bottom-width:0!important;z-index:1000;padding:1.25em 1em;height:100%;overflow:auto} #toc.toc2 #toctitle{margin-top:0;margin-bottom:.8rem;font-size:1.2em} #toc.toc2>ul{font-size:.9em;margin-bottom:0} #toc.toc2 ul ul{margin-left:0;padding-left:1em} #toc.toc2 ul.sectlevel0 ul.sectlevel1{padding-left:0;margin-top:.5em;margin-bottom:.5em} body.toc2.toc-right{padding-left:0;padding-right:15em} body.toc2.toc-right #toc.toc2{border-right-width:0;border-left:1px solid #e7e7e9;left:auto;right:0}} @media screen and (min-width:1280px){body.toc2{padding-left:20em;padding-right:0} #toc.toc2{width:20em} #toc.toc2 #toctitle{font-size:1.375em} #toc.toc2>ul{font-size:.95em} #toc.toc2 ul ul{padding-left:1.25em} body.toc2.toc-right{padding-left:0;padding-right:20em}} #content #toc{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px} #content #toc>:first-child{margin-top:0} #content #toc>:last-child{margin-bottom:0} #footer{max-width:100%;background:rgba(0,0,0,.8);padding:1.25em} #footer-text{color:rgba(255,255,255,.8);line-height:1.44} #content{margin-bottom:.625em} .sect1{padding-bottom:.625em} @media screen and (min-width:768px){#content{margin-bottom:1.25em} .sect1{padding-bottom:1.25em}} .sect1:last-child{padding-bottom:0} .sect1+.sect1{border-top:1px solid #e7e7e9} #content h1>a.anchor,h2>a.anchor,h3>a.anchor,#toctitle>a.anchor,.sidebarblock>.content>.title>a.anchor,h4>a.anchor,h5>a.anchor,h6>a.anchor{position:absolute;z-index:1001;width:1.5ex;margin-left:-1.5ex;display:block;text-decoration:none!important;visibility:hidden;text-align:center;font-weight:400} #content h1>a.anchor::before,h2>a.anchor::before,h3>a.anchor::before,#toctitle>a.anchor::before,.sidebarblock>.content>.title>a.anchor::before,h4>a.anchor::before,h5>a.anchor::before,h6>a.anchor::before{content:"\00A7";font-size:.85em;display:block;padding-top:.1em} #content h1:hover>a.anchor,#content h1>a.anchor:hover,h2:hover>a.anchor,h2>a.anchor:hover,h3:hover>a.anchor,#toctitle:hover>a.anchor,.sidebarblock>.content>.title:hover>a.anchor,h3>a.anchor:hover,#toctitle>a.anchor:hover,.sidebarblock>.content>.title>a.anchor:hover,h4:hover>a.anchor,h4>a.anchor:hover,h5:hover>a.anchor,h5>a.anchor:hover,h6:hover>a.anchor,h6>a.anchor:hover{visibility:visible} #content h1>a.link,h2>a.link,h3>a.link,#toctitle>a.link,.sidebarblock>.content>.title>a.link,h4>a.link,h5>a.link,h6>a.link{color:#ba3925;text-decoration:none} #content h1>a.link:hover,h2>a.link:hover,h3>a.link:hover,#toctitle>a.link:hover,.sidebarblock>.content>.title>a.link:hover,h4>a.link:hover,h5>a.link:hover,h6>a.link:hover{color:#a53221} details,.audioblock,.imageblock,.literalblock,.listingblock,.stemblock,.videoblock{margin-bottom:1.25em} details>summary:first-of-type{cursor:pointer;display:list-item;outline:none;margin-bottom:.75em} .admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{text-rendering:optimizeLegibility;text-align:left;font-family:"Noto Serif","DejaVu Serif",serif;font-size:1rem;font-style:italic} table.tableblock.fit-content>caption.title{white-space:nowrap;width:0} .paragraph.lead>p,#preamble>.sectionbody>[class="paragraph"]:first-of-type p{font-size:1.21875em;line-height:1.6;color:rgba(0,0,0,.85)} table.tableblock #preamble>.sectionbody>[class="paragraph"]:first-of-type p{font-size:inherit} .admonitionblock>table{border-collapse:separate;border:0;background:none;width:100%} .admonitionblock>table td.icon{text-align:center;width:80px} .admonitionblock>table td.icon img{max-width:none} .admonitionblock>table td.icon .title{font-weight:bold;font-family:"Open Sans","DejaVu Sans",sans-serif;text-transform:uppercase} .admonitionblock>table td.content{padding-left:1.125em;padding-right:1.25em;border-left:1px solid #dddddf;color:rgba(0,0,0,.6)} .admonitionblock>table td.content>:last-child>:last-child{margin-bottom:0} .exampleblock>.content{border-style:solid;border-width:1px;border-color:#e6e6e6;margin-bottom:1.25em;padding:1.25em;background:#fff;-webkit-border-radius:4px;border-radius:4px} .exampleblock>.content>:first-child{margin-top:0} .exampleblock>.content>:last-child{margin-bottom:0} .sidebarblock{border-style:solid;border-width:1px;border-color:#dbdbd6;margin-bottom:1.25em;padding:1.25em;background:#f3f3f2;-webkit-border-radius:4px;border-radius:4px} .sidebarblock>:first-child{margin-top:0} .sidebarblock>:last-child{margin-bottom:0} .sidebarblock>.content>.title{color:#7a2518;margin-top:0;text-align:center} .exampleblock>.content>:last-child>:last-child,.exampleblock>.content .olist>ol>li:last-child>:last-child,.exampleblock>.content .ulist>ul>li:last-child>:last-child,.exampleblock>.content .qlist>ol>li:last-child>:last-child,.sidebarblock>.content>:last-child>:last-child,.sidebarblock>.content .olist>ol>li:last-child>:last-child,.sidebarblock>.content .ulist>ul>li:last-child>:last-child,.sidebarblock>.content .qlist>ol>li:last-child>:last-child{margin-bottom:0} .literalblock pre,.listingblock>.content>pre{-webkit-border-radius:4px;border-radius:4px;word-wrap:break-word;overflow-x:auto;padding:1em;font-size:.8125em} @media screen and (min-width:768px){.literalblock pre,.listingblock>.content>pre{font-size:.90625em}} @media screen and (min-width:1280px){.literalblock pre,.listingblock>.content>pre{font-size:1em}} .literalblock pre,.listingblock>.content>pre:not(.highlight),.listingblock>.content>pre[class="highlight"],.listingblock>.content>pre[class^="highlight "]{background:#f7f7f8} .literalblock.output pre{color:#f7f7f8;background:rgba(0,0,0,.9)} .listingblock>.content{position:relative} .listingblock code[data-lang]::before{display:none;content:attr(data-lang);position:absolute;font-size:.75em;top:.425rem;right:.5rem;line-height:1;text-transform:uppercase;color:inherit;opacity:.5} .listingblock:hover code[data-lang]::before{display:block} .listingblock.terminal pre .command::before{content:attr(data-prompt);padding-right:.5em;color:inherit;opacity:.5} .listingblock.terminal pre .command:not([data-prompt])::before{content:"$"} .listingblock pre.highlightjs{padding:0} .listingblock pre.highlightjs>code{padding:1em;-webkit-border-radius:4px;border-radius:4px} .listingblock pre.prettyprint{border-width:0} .prettyprint{background:#f7f7f8} pre.prettyprint .linenums{line-height:1.45;margin-left:2em} pre.prettyprint li{background:none;list-style-type:inherit;padding-left:0} pre.prettyprint li code[data-lang]::before{opacity:1} pre.prettyprint li:not(:first-child) code[data-lang]::before{display:none} table.linenotable{border-collapse:separate;border:0;margin-bottom:0;background:none} table.linenotable td[class]{color:inherit;vertical-align:top;padding:0;line-height:inherit;white-space:normal} table.linenotable td.code{padding-left:.75em} table.linenotable td.linenos{border-right:1px solid currentColor;opacity:.35;padding-right:.5em} pre.pygments .lineno{border-right:1px solid currentColor;opacity:.35;display:inline-block;margin-right:.75em} pre.pygments .lineno::before{content:"";margin-right:-.125em} .quoteblock{margin:0 1em 1.25em 1.5em;display:table} .quoteblock:not(.excerpt)>.title{margin-left:-1.5em;margin-bottom:.75em} .quoteblock blockquote,.quoteblock p{color:rgba(0,0,0,.85);font-size:1.15rem;line-height:1.75;word-spacing:.1em;letter-spacing:0;font-style:italic;text-align:justify} .quoteblock blockquote{margin:0;padding:0;border:0} .quoteblock blockquote::before{content:"\201c";float:left;font-size:2.75em;font-weight:bold;line-height:.6em;margin-left:-.6em;color:#7a2518;text-shadow:0 1px 2px rgba(0,0,0,.1)} .quoteblock blockquote>.paragraph:last-child p{margin-bottom:0} .quoteblock .attribution{margin-top:.75em;margin-right:.5ex;text-align:right} .verseblock{margin:0 1em 1.25em} .verseblock pre{font-family:"Open Sans","DejaVu Sans",sans;font-size:1.15rem;color:rgba(0,0,0,.85);font-weight:300;text-rendering:optimizeLegibility} .verseblock pre strong{font-weight:400} .verseblock .attribution{margin-top:1.25rem;margin-left:.5ex} .quoteblock .attribution,.verseblock .attribution{font-size:.9375em;line-height:1.45;font-style:italic} .quoteblock .attribution br,.verseblock .attribution br{display:none} .quoteblock .attribution cite,.verseblock .attribution cite{display:block;letter-spacing:-.025em;color:rgba(0,0,0,.6)} .quoteblock.abstract blockquote::before,.quoteblock.excerpt blockquote::before,.quoteblock .quoteblock blockquote::before{display:none} .quoteblock.abstract blockquote,.quoteblock.abstract p,.quoteblock.excerpt blockquote,.quoteblock.excerpt p,.quoteblock .quoteblock blockquote,.quoteblock .quoteblock p{line-height:1.6;word-spacing:0} .quoteblock.abstract{margin:0 1em 1.25em;display:block} .quoteblock.abstract>.title{margin:0 0 .375em;font-size:1.15em;text-align:center} .quoteblock.excerpt>blockquote,.quoteblock .quoteblock{padding:0 0 .25em 1em;border-left:.25em solid #dddddf} .quoteblock.excerpt,.quoteblock .quoteblock{margin-left:0} .quoteblock.excerpt blockquote,.quoteblock.excerpt p,.quoteblock .quoteblock blockquote,.quoteblock .quoteblock p{color:inherit;font-size:1.0625rem} .quoteblock.excerpt .attribution,.quoteblock .quoteblock .attribution{color:inherit;text-align:left;margin-right:0} table.tableblock{max-width:100%;border-collapse:separate} p.tableblock:last-child{margin-bottom:0} td.tableblock>.content>:last-child{margin-bottom:-1.25em} td.tableblock>.content>:last-child.sidebarblock{margin-bottom:0} table.tableblock,th.tableblock,td.tableblock{border:0 solid #dedede} table.grid-all>thead>tr>.tableblock,table.grid-all>tbody>tr>.tableblock{border-width:0 1px 1px 0} table.grid-all>tfoot>tr>.tableblock{border-width:1px 1px 0 0} table.grid-cols>*>tr>.tableblock{border-width:0 1px 0 0} table.grid-rows>thead>tr>.tableblock,table.grid-rows>tbody>tr>.tableblock{border-width:0 0 1px} table.grid-rows>tfoot>tr>.tableblock{border-width:1px 0 0} table.grid-all>*>tr>.tableblock:last-child,table.grid-cols>*>tr>.tableblock:last-child{border-right-width:0} table.grid-all>tbody>tr:last-child>.tableblock,table.grid-all>thead:last-child>tr>.tableblock,table.grid-rows>tbody>tr:last-child>.tableblock,table.grid-rows>thead:last-child>tr>.tableblock{border-bottom-width:0} table.frame-all{border-width:1px} table.frame-sides{border-width:0 1px} table.frame-topbot,table.frame-ends{border-width:1px 0} table.stripes-all tr,table.stripes-odd tr:nth-of-type(odd),table.stripes-even tr:nth-of-type(even),table.stripes-hover tr:hover{background:#f8f8f7} th.halign-left,td.halign-left{text-align:left} th.halign-right,td.halign-right{text-align:right} th.halign-center,td.halign-center{text-align:center} th.valign-top,td.valign-top{vertical-align:top} th.valign-bottom,td.valign-bottom{vertical-align:bottom} th.valign-middle,td.valign-middle{vertical-align:middle} table thead th,table tfoot th{font-weight:bold} tbody tr th{display:table-cell;line-height:1.6;background:#f7f8f7} tbody tr th,tbody tr th p,tfoot tr th,tfoot tr th p{color:rgba(0,0,0,.8);font-weight:bold} p.tableblock>code:only-child{background:none;padding:0} p.tableblock{font-size:1em} ol{margin-left:1.75em} ul li ol{margin-left:1.5em} dl dd{margin-left:1.125em} dl dd:last-child,dl dd:last-child>:last-child{margin-bottom:0} ol>li p,ul>li p,ul dd,ol dd,.olist .olist,.ulist .ulist,.ulist .olist,.olist .ulist{margin-bottom:.625em} ul.checklist,ul.none,ol.none,ul.no-bullet,ol.no-bullet,ol.unnumbered,ul.unstyled,ol.unstyled{list-style-type:none} ul.no-bullet,ol.no-bullet,ol.unnumbered{margin-left:.625em} ul.unstyled,ol.unstyled{margin-left:0} ul.checklist{margin-left:.625em} ul.checklist li>p:first-child>.fa-square-o:first-child,ul.checklist li>p:first-child>.fa-check-square-o:first-child{width:1.25em;font-size:.8em;position:relative;bottom:.125em} ul.checklist li>p:first-child>input[type="checkbox"]:first-child{margin-right:.25em} ul.inline{display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-flow:row wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap;list-style:none;margin:0 0 .625em -1.25em} ul.inline>li{margin-left:1.25em} .unstyled dl dt{font-weight:400;font-style:normal} ol.arabic{list-style-type:decimal} ol.decimal{list-style-type:decimal-leading-zero} ol.loweralpha{list-style-type:lower-alpha} ol.upperalpha{list-style-type:upper-alpha} ol.lowerroman{list-style-type:lower-roman} ol.upperroman{list-style-type:upper-roman} ol.lowergreek{list-style-type:lower-greek} .hdlist>table,.colist>table{border:0;background:none} .hdlist>table>tbody>tr,.colist>table>tbody>tr{background:none} td.hdlist1,td.hdlist2{vertical-align:top;padding:0 .625em} td.hdlist1{font-weight:bold;padding-bottom:1.25em} .literalblock+.colist,.listingblock+.colist{margin-top:-.5em} .colist td:not([class]):first-child{padding:.4em .75em 0;line-height:1;vertical-align:top} .colist td:not([class]):first-child img{max-width:none} .colist td:not([class]):last-child{padding:.25em 0} .thumb,.th{line-height:0;display:inline-block;border:solid 4px #fff;-webkit-box-shadow:0 0 0 1px #ddd;box-shadow:0 0 0 1px #ddd} .imageblock.left{margin:.25em .625em 1.25em 0} .imageblock.right{margin:.25em 0 1.25em .625em} .imageblock>.title{margin-bottom:0} .imageblock.thumb,.imageblock.th{border-width:6px} .imageblock.thumb>.title,.imageblock.th>.title{padding:0 .125em} .image.left,.image.right{margin-top:.25em;margin-bottom:.25em;display:inline-block;line-height:0} .image.left{margin-right:.625em} .image.right{margin-left:.625em} a.image{text-decoration:none;display:inline-block} a.image object{pointer-events:none} sup.footnote,sup.footnoteref{font-size:.875em;position:static;vertical-align:super} sup.footnote a,sup.footnoteref a{text-decoration:none} sup.footnote a:active,sup.footnoteref a:active{text-decoration:underline} #footnotes{padding-top:.75em;padding-bottom:.75em;margin-bottom:.625em} #footnotes hr{width:20%;min-width:6.25em;margin:-.25em 0 .75em;border-width:1px 0 0} #footnotes .footnote{padding:0 .375em 0 .225em;line-height:1.3334;font-size:.875em;margin-left:1.2em;margin-bottom:.2em} #footnotes .footnote a:first-of-type{font-weight:bold;text-decoration:none;margin-left:-1.05em} #footnotes .footnote:last-of-type{margin-bottom:0} #content #footnotes{margin-top:-.625em;margin-bottom:0;padding:.75em 0} .gist .file-data>table{border:0;background:#fff;width:100%;margin-bottom:0} .gist .file-data>table td.line-data{width:99%} div.unbreakable{page-break-inside:avoid} .big{font-size:larger} .small{font-size:smaller} .underline{text-decoration:underline} .overline{text-decoration:overline} .line-through{text-decoration:line-through} .aqua{color:#00bfbf} .aqua-background{background:#00fafa} .black{color:#000} .black-background{background:#000} .blue{color:#0000bf} .blue-background{background:#0000fa} .fuchsia{color:#bf00bf} .fuchsia-background{background:#fa00fa} .gray{color:#606060} .gray-background{background:#7d7d7d} .green{color:#006000} .green-background{background:#007d00} .lime{color:#00bf00} .lime-background{background:#00fa00} .maroon{color:#600000} .maroon-background{background:#7d0000} .navy{color:#000060} .navy-background{background:#00007d} .olive{color:#606000} .olive-background{background:#7d7d00} .purple{color:#600060} .purple-background{background:#7d007d} .red{color:#bf0000} .red-background{background:#fa0000} .silver{color:#909090} .silver-background{background:#bcbcbc} .teal{color:#006060} .teal-background{background:#007d7d} .white{color:#bfbfbf} .white-background{background:#fafafa} .yellow{color:#bfbf00} .yellow-background{background:#fafa00} span.icon>.fa{cursor:default} a span.icon>.fa{cursor:inherit} .admonitionblock td.icon [class^="fa icon-"]{font-size:2.5em;text-shadow:1px 1px 2px rgba(0,0,0,.5);cursor:default} .admonitionblock td.icon .icon-note::before{content:"\f05a";color:#19407c} .admonitionblock td.icon .icon-tip::before{content:"\f0eb";text-shadow:1px 1px 2px rgba(155,155,0,.8);color:#111} .admonitionblock td.icon .icon-warning::before{content:"\f071";color:#bf6900} .admonitionblock td.icon .icon-caution::before{content:"\f06d";color:#bf3400} .admonitionblock td.icon .icon-important::before{content:"\f06a";color:#bf0000} .conum[data-value]{display:inline-block;color:#fff!important;background:rgba(0,0,0,.8);-webkit-border-radius:100px;border-radius:100px;text-align:center;font-size:.75em;width:1.67em;height:1.67em;line-height:1.67em;font-family:"Open Sans","DejaVu Sans",sans-serif;font-style:normal;font-weight:bold} .conum[data-value] *{color:#fff!important} .conum[data-value]+b{display:none} .conum[data-value]::after{content:attr(data-value)} pre .conum[data-value]{position:relative;top:-.125em} b.conum *{color:inherit!important} .conum:not([data-value]):empty{display:none} dt,th.tableblock,td.content,div.footnote{text-rendering:optimizeLegibility} h1,h2,p,td.content,span.alt{letter-spacing:-.01em} p strong,td.content strong,div.footnote strong{letter-spacing:-.005em} p,blockquote,dt,td.content,span.alt{font-size:1.0625rem} p{margin-bottom:1.25rem} .sidebarblock p,.sidebarblock dt,.sidebarblock td.content,p.tableblock{font-size:1em} .exampleblock>.content{background:#fffef7;border-color:#e0e0dc;-webkit-box-shadow:0 1px 4px #e0e0dc;box-shadow:0 1px 4px #e0e0dc} .print-only{display:none!important} @page{margin:1.25cm .75cm} @media print{*{-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important} html{font-size:80%} a{color:inherit!important;text-decoration:underline!important} a.bare,a[href^="#"],a[href^="mailto:"]{text-decoration:none!important} a[href^="http:"]:not(.bare)::after,a[href^="https:"]:not(.bare)::after{content:"(" attr(href) ")";display:inline-block;font-size:.875em;padding-left:.25em} abbr[title]::after{content:" (" attr(title) ")"} pre,blockquote,tr,img,object,svg{page-break-inside:avoid} thead{display:table-header-group} svg{max-width:100%} p,blockquote,dt,td.content{font-size:1em;orphans:3;widows:3} h2,h3,#toctitle,.sidebarblock>.content>.title{page-break-after:avoid} #toc,.sidebarblock,.exampleblock>.content{background:none!important} #toc{border-bottom:1px solid #dddddf!important;padding-bottom:0!important} body.book #header{text-align:center} body.book #header>h1:first-child{border:0!important;margin:2.5em 0 1em} body.book #header .details{border:0!important;display:block;padding:0!important} body.book #header .details span:first-child{margin-left:0!important} body.book #header .details br{display:block} body.book #header .details br+span::before{content:none!important} body.book #toc{border:0!important;text-align:left!important;padding:0!important;margin:0!important} body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-break-before:always} .listingblock code[data-lang]::before{display:block} #footer{padding:0 .9375em} .hide-on-print{display:none!important} .print-only{display:block!important} .hide-for-print{display:none!important} .show-for-print{display:inherit!important}} @media print,amzn-kf8{#header>h1:first-child{margin-top:1.25rem} .sect1{padding:0!important} .sect1+.sect1{border:0} #footer{background:none} #footer-text{color:rgba(0,0,0,.6);font-size:.9em}} @media amzn-kf8{#header,#content,#footnotes,#footer{padding:0}} </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body class="article toc2 toc-right"> <div id="header"> <h1>AsciiDoc Syntax Quick Reference !</h1> <div class="details"> <span id="author" class="author">Apostolos rootApostolos@swarmlab.io</span><br> </div> <div id="toc" class="toc2"> <div id="toctitle">Πίνακας περιεχομένων</div> <ul class="sectlevel0"> <li><a href="#cheat-useadoc">AsciiDoc Syntax Quick Reference</a> <ul class="sectlevel1"> <li><a href="#_paragraphs">1. Paragraphs</a></li> <li><a href="#_formatted_text">2. Formatted Text</a></li> <li><a href="#_document_header">3. Document Header</a></li> <li><a href="#section-titles">4. Section Titles (Headings)</a></li> <li><a href="#_include_files">5. Include Files</a></li> <li><a href="#_breaks">6. Breaks</a></li> <li><a href="#_lists">7. Lists</a></li> <li><a href="#_links">8. Links</a></li> <li><a href="#_images">9. Images</a></li> <li><a href="#_videos">10. Videos</a></li> <li><a href="#_source_code">11. Source Code</a></li> <li><a href="#_more_delimited_blocks">12. More Delimited Blocks</a></li> <li><a href="#_block_id_role_and_options">13. Block Id, Role and Options</a></li> <li><a href="#_comments">14. Comments</a></li> <li><a href="#_tables">15. Tables</a></li> <li><a href="#_ui_macros">16. UI Macros</a></li> <li><a href="#_attributes_and_substitutions">17. Attributes and Substitutions</a></li> <li><a href="#_text_replacement">18. Text Replacement</a></li> <li><a href="#_escaping_text">19. Escaping Text</a></li> <li><a href="#_table_of_contents_toc">20. Table of Contents (ToC)</a></li> <li><a href="#_bibliography">21. Bibliography</a></li> <li><a href="#section-footnotes">22. Footnotes</a></li> <li><a href="#markdown-compatibility">23. Markdown Compatibility</a></li> <li><a href="#_user_manual_and_help">24. User Manual and Help</a></li> </ul> </li> <li><a href="#_user_howto_convert">User HowTo convert</a></li> </ul> </div> </div> <div id="content"> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p><br></p> </div> </div> </div> <h1 id="cheat-useadoc" class="sect0">AsciiDoc Syntax Quick Reference</h1> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> <div class="paragraph"> <p>These examples focus on the output generated by the HTML backend. AsciiDoc produces complementary output when generating PDF, EPUB, and DocBook.</p> </div> </td> </tr> </table> </div> <!-- toc disabled --> <div class="sect1"> <h2 id="_paragraphs">1. Paragraphs</h2> <div class="sectionbody"> <div class="listingblock"> <div class="title">Normal</div> <div class="content"> <pre>Paragraphs don't require any special markup in AsciiDoc. A paragraph is just one or more lines of consecutive text. To begin a new paragraph, separate it by at least one blank line. Newlines within a paragraph are not displayed.</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p>Paragraphs don’t require any special markup in AsciiDoc. A paragraph is just one or more lines of consecutive text.</p> </div> <div class="paragraph"> <p>To begin a new paragraph, separate it by at least one blank line. Newlines within a paragraph are not displayed.</p> </div> </div> </div> <div class="listingblock"> <div class="title">Literal</div> <div class="content"> <pre>A normal paragraph. A paragraph offset by at least one space becomes a literal paragraph. All lines in a literal paragraph must be adjacent. A literal paragraph is displayed as preformatted text. The text is shown in a fixed-width font. Spaces and newlines, like the ones in this sentence, are preserved. Another normal paragraph.</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p>A normal paragraph.</p> </div> <div class="literalblock"> <div class="content"> <pre>A paragraph offset by at least one space becomes a literal paragraph. All lines in a literal paragraph must be adjacent.</pre> </div> </div> <div class="literalblock"> <div class="content"> <pre>A literal paragraph is displayed as preformatted text. The text is shown in a fixed-width font. Spaces and newlines, like the ones in this sentence, are preserved.</pre> </div> </div> <div class="paragraph"> <p>Another normal paragraph.</p> </div> </div> </div> <div class="listingblock"> <div class="title">Admonition</div> <div class="content"> <pre>NOTE: An admonition paragraph draws the reader's attention to auxiliary information. Its purpose is determined by the label at the beginning of the paragraph. Here are the other built-in admonition types: TIP: Pro tip... IMPORTANT: Don't forget... WARNING: Watch out for... CAUTION: Ensure that...</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> An admonition paragraph draws the reader’s attention to auxiliary information. Its purpose is determined by the label at the beginning of the paragraph. </td> </tr> </table> </div> <div class="paragraph"> <p>Here are the other built-in admonition types:</p> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> Pro tip…​ </td> </tr> </table> </div> <div class="admonitionblock important"> <table> <tr> <td class="icon"> <i class="fa icon-important" title="Important"></i> </td> <td class="content"> Don’t forget…​ </td> </tr> </table> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> Watch out for…​ </td> </tr> </table> </div> <div class="admonitionblock caution"> <table> <tr> <td class="icon"> <i class="fa icon-caution" title="Caution"></i> </td> <td class="content"> Ensure that…​ </td> </tr> </table> </div> </div> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> You can also create <a href="#admon-bl">admonition blocks</a>. </td> </tr> </table> </div> <div class="listingblock"> <div class="title">Lead paragraph</div> <div class="content"> <pre>[.lead] This text will be styled as a lead paragraph (i.e., larger font).</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph lead"> <p>This text will be styled as a lead paragraph (i.e., larger font).</p> </div> </div> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> The default Asciidoctor stylesheet automatically styles the first paragraph of the preamble as a lead paragraph. </td> </tr> </table> </div> <div class="sidebarblock"> <div class="content"> <div class="title">More Paragraph, Admonition and Literal Block Examples</div> <div class="paragraph"> <p>See these sections in the Asciidoctor User Manual for more information and examples.</p> </div> <div class="ulist"> <ul> <li> <p>{uri-para}[Paragraphs]</p> </li> <li> <p>{uri-literal}[Literal Text and Blocks]</p> </li> <li> <p>{uri-admon}[Admonitions]</p> </li> </ul> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_formatted_text">2. Formatted Text</h2> <div class="sectionbody"> <div class="listingblock"> <div class="title">Bold, Italic, and Monospace</div> <div class="content"> <pre>bold *constrained* & **un**constrained italic _constrained_ & __un__constrained bold italic *_constrained_* & **__un__**constrained monospace `constrained` & ``un``constrained monospace bold `*constrained*` & ``**un**``constrained monospace italic `_constrained_` & ``__un__``constrained monospace bold italic `*_constrained_*` & ``**__un__**``constrained</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p>bold <strong>constrained</strong> & <strong>un</strong>constrained</p> </div> <div class="paragraph"> <p>italic <em>constrained</em> & <em>un</em>constrained</p> </div> <div class="paragraph"> <p>bold italic <strong><em>constrained</em></strong> & <strong><em>un</em></strong>constrained</p> </div> <div class="paragraph"> <p>monospace <code>constrained</code> & <code>un</code>constrained</p> </div> <div class="paragraph"> <p>monospace bold <code><strong>constrained</strong></code> & <code><strong>un</strong></code>constrained</p> </div> <div class="paragraph"> <p>monospace italic <code><em>constrained</em></code> & <code><em>un</em></code>constrained</p> </div> <div class="paragraph"> <p>monospace bold italic <code><strong><em>constrained</em></strong></code> & <code><strong><em>un</em></strong></code>constrained</p> </div> </div> </div> <div class="listingblock"> <div class="title">Monospace vs codespan</div> <div class="content"> <pre>`{cpp}` is valid syntax in the programming language by the same name. `+WHERE id <= 20 AND value = "{name}"+` is a SQL WHERE clause.</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p><code>C++</code> is valid syntax in the programming language by the same name.</p> </div> <div class="paragraph"> <p><code>WHERE id <= 20 AND value = "{name}"</code> is a SQL WHERE clause.</p> </div> </div> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> The meaning of backtick (<code>`</code>) and plus (<code>+</code>) changed in Asciidoctor 1.5.0. Backticks only make the text monospaced, whereas pluses passthrough text without applying formatting. See the <a href="migration.html">migration page</a> for details. </td> </tr> </table> </div> <div class="listingblock"> <div class="title">Marks and Custom Styling</div> <div class="content"> <pre>Werewolves are allergic to #cassia cinnamon#. Did the werewolves read the [.small]#small print#? Where did all the [.underline]#cores# run off to? We need [.line-through]#ten# make that twenty VMs. [.big]##O##nce upon an infinite loop.</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p>Werewolves are allergic to <mark>cassia cinnamon</mark>.</p> </div> <div class="paragraph"> <p>Did the werewolves read the <span class="small">small print</span>?</p> </div> <div class="paragraph"> <p>Where did all the <span class="underline">cores</span> run off to?</p> </div> <div class="paragraph"> <p>We need <span class="line-through">ten</span> make that twenty VMs.</p> </div> <div class="paragraph"> <p><span class="big">O</span>nce upon an infinite loop.</p> </div> </div> </div> <div class="listingblock"> <div class="title">Superscript and Subscript</div> <div class="content"> <pre>^super^script phrase ~sub~script phrase</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p><sup>super</sup>script phrase</p> </div> <div class="paragraph"> <p><sub>sub</sub>script phrase</p> </div> </div> </div> <div class="listingblock"> <div class="title">Curved Quotation Marks and Apostrophes (Smart Quotes)</div> <div class="content"> <pre>"`double curved quotes`" '`single curved quotes`' Olaf's desk was a mess. All of the werewolves`' desks were a mess. Olaf had been with the company since the `'60s.</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p>“double curved quotes”</p> </div> <div class="paragraph"> <p>‘single curved quotes’</p> </div> <div class="paragraph"> <p>Olaf’s desk was a mess.</p> </div> <div class="paragraph"> <p>All of the werewolves’ desks were a mess.</p> </div> <div class="paragraph"> <p>Olaf had been with the company since the ’60s.</p> </div> </div> </div> <div class="sidebarblock"> <div class="content"> <div class="title">More Text Formatting Examples</div> <div class="paragraph"> <p>See these sections in the Asciidoctor User Manual for more information and examples.</p> </div> <div class="ulist"> <ul> <li> <p>{uri-bold}[Bold and Italic Formatting]</p> </li> <li> <p>{uri-quote}[Quotation Marks and Apostrophes]</p> </li> <li> <p>{uri-sub}[Subscript and Superscript]</p> </li> <li> <p>{uri-mono}[Monospace Formatting]</p> </li> <li> <p>{uri-css}[Custom Styling with Attributes]</p> </li> <li> <p>{uri-pass}[Passthrough Macros]</p> </li> </ul> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_document_header">3. Document Header</h2> <div class="sectionbody"> <div class="admonitionblock important"> <table> <tr> <td class="icon"> <i class="fa icon-important" title="Important"></i> </td> <td class="content"> A header is optional. </td> </tr> </table> </div> <div class="admonitionblock caution"> <table> <tr> <td class="icon"> <i class="fa icon-caution" title="Caution"></i> </td> <td class="content"> The header may not contain blank lines and must be offset from the content by at least one blank line. </td> </tr> </table> </div> <div class="listingblock"> <div class="title">Title only</div> <div class="content"> <pre>= My Document's Title My document provides...</pre> </div> </div> <div class="listingblock"> <div class="title">Title and author line</div> <div class="content"> <pre>= My Document's Title Doc Writer <doc.writer@asciidoctor.org> My document provides...</pre> </div> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> Asciidoctor allows multiple authors in the author line. Use the semi-colon character to separate each author. </td> </tr> </table> </div> <div class="listingblock"> <div class="title">Title, author line and revision line</div> <div class="content"> <pre>= My Document's Title Doc Writer <doc.writer@asciidoctor.org> v1.0, 2014-01-01 My document provides...</pre> </div> </div> <div class="admonitionblock important"> <table> <tr> <td class="icon"> <i class="fa icon-important" title="Important"></i> </td> <td class="content"> You cannot have a revision line without an author line. </td> </tr> </table> </div> <div class="listingblock"> <div class="title">Document header with attributes</div> <div class="content"> <pre>= My Document's Title Doc Writer <doc.writer@asciidoctor.org> v1.0, 2018-04-11 :toc: :imagesdir: assets/images :homepage: https://asciidoctor.org My document provides...</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="section-titles">4. Section Titles (Headings)</h2> <div class="sectionbody"> <div class="listingblock"> <div class="title">Article doctype</div> <div class="content"> <pre>= Document Title (Level 0) == Level 1 Section Title === Level 2 Section Title ==== Level 3 Section Title ===== Level 4 Section Title ====== Level 5 Section Title == Another Level 1 Section Title</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <h1 id="_document_title_level_0" class="float">Document Title (Level 0)</h1> <h2 id="_level_1_section_title" class="float">Level 1 Section Title</h2> <h3 id="_level_2_section_title" class="float">Level 2 Section Title</h3> <h4 id="_level_3_section_title" class="float">Level 3 Section Title</h4> <h5 id="_level_4_section_title" class="float">Level 4 Section Title</h5> <h6 id="_level_5_section_title" class="float">Level 5 Section Title</h6> <h2 id="_another_level_1_section_title" class="float">Another Level 1 Section Title</h2> </div> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> When using the article doctype (the default), you can only have one level-0 section title (i.e., the document title) and it must be in the document header. </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"> The number of equal signs matches the heading level in the HTML output. For example, <em>Section Level 1</em> becomes an <code><h2></code> heading. </td> </tr> </table> </div> <div class="listingblock"> <div class="title">Book doctype</div> <div class="content"> <pre>= Document Title (Level 0) == Section Level 1 === Section Level 2 ==== Section Level 3 ===== Section Level 4 ====== Section Level 5 = Section Level 0</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <h1 id="_document_title_level_0_2" class="float">Document Title (Level 0)</h1> <h2 id="_section_level_1" class="float">Section Level 1</h2> <h3 id="_section_level_2" class="float">Section Level 2</h3> <h4 id="_section_level_3" class="float">Section Level 3</h4> <h5 id="_section_level_4" class="float">Section Level 4</h5> <h6 id="_section_level_5" class="float">Section Level 5</h6> <h1 id="_section_level_0" class="float">Section Level 0</h1> </div> </div> <div class="listingblock"> <div class="title">Explicit id</div> <div class="content"> <pre>[#primitives-nulls] == Primitive types and null values</pre> </div> </div> <div class="dlist"> <div class="title">Section anchors and links (Asciidoctor only)</div> <dl> <dt class="hdlist1"><code>sectanchors</code></dt> <dd> <p>When this document attribute is set, a section icon anchor appears in front of the section title.</p> </dd> <dt class="hdlist1"><code>sectlinks</code></dt> <dd> <p>When this document attribute is set, the section titles become self-links. This enables a reader to bookmark the section.</p> </dd> </dl> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Section title anchors depend on the default Asciidoctor stylesheet to render properly. </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_include_files">5. Include Files</h2> <div class="sectionbody"> <div class="listingblock"> <div class="title">Document parts</div> <div class="content"> <pre>= Reference Documentation Lead Developer This is documentation for project X. include::basics.adoc[] include::installation.adoc[] include::example.adoc[]</pre> </div> </div> <div class="admonitionblock caution"> <table> <tr> <td class="icon"> <i class="fa icon-caution" title="Caution"></i> </td> <td class="content"> Asciidoctor does not insert blank lines between adjacent include statements to keep the content separated. Be sure to add a blank line in the source document to avoid unexpected results, such as a section title being swallowed. </td> </tr> </table> </div> <div class="listingblock"> <div class="title">Include content from a URI</div> <div class="content"> <pre>include::https://raw.githubusercontent.com/asciidoctor/asciidoctor/master/README.adoc[]</pre> </div> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Including content from a URI is potentially dangerous, so it’s disabled if the safe mode is SECURE or greater. Assuming the safe mode is less than SECURE, you must also set the <code>allow-uri-read</code> attribute to permit Asciidoctor to read content from a URI. </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_breaks">6. Breaks</h2> <div class="sectionbody"> <div class="listingblock"> <div class="title">Hard line break</div> <div class="content"> <pre>Rubies are red, + Topazes are blue. [%hardbreaks] Ruby is red. Java is black.</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p>Rubies are red,<br> Topazes are blue.</p> </div> <div class="paragraph"> <p>Ruby is red.<br> Java is black.</p> </div> </div> </div> <div class="listingblock"> <div class="title">Thematic break (aka horizontal rule)</div> <div class="content"> <pre>before ''' after</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p>before</p> </div> <hr> <div class="paragraph"> <p>after</p> </div> </div> </div> <div class="listingblock"> <div class="title">Page break</div> <div class="content"> <pre><<<</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_lists">7. Lists</h2> <div class="sectionbody"> <div class="listingblock"> <div class="title">Unordered, basic</div> <div class="content"> <pre>* Edgar Allen Poe * Sheri S. Tepper * Bill Bryson</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="ulist"> <ul> <li> <p>Edgar Allen Poe</p> </li> <li> <p>Sheri S. Tepper</p> </li> <li> <p>Bill Bryson</p> </li> </ul> </div> </div> </div> <div class="listingblock"> <div class="title">Unordered, basic (alt)</div> <div class="content"> <pre>- Edgar Allen Poe - Sheri S. Tepper - Bill Bryson</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="ulist"> <ul> <li> <p>Edgar Allen Poe</p> </li> <li> <p>Sheri S. Tepper</p> </li> <li> <p>Bill Bryson</p> </li> </ul> </div> </div> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> A blank line is required before and after a list to separated it from other blocks. </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"> You can force two adjacent lists apart by inserting a blank line followed by a line comment after the first list. The convention is to use <code>//-</code> as the line comment to provide a hint to other authors that it’s a list divider. </td> </tr> </table> </div> <div class="listingblock"> <div class="title">Unordered, max nesting</div> <div class="content"> <pre>* level 1 ** level 2 *** level 3 **** level 4 ***** level 5 * level 1</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="ulist"> <ul> <li> <p>level 1</p> <div class="ulist"> <ul> <li> <p>level 2</p> <div class="ulist"> <ul> <li> <p>level 3</p> <div class="ulist"> <ul> <li> <p>level 4</p> <div class="ulist"> <ul> <li> <p>level 5</p> </li> </ul> </div> </li> </ul> </div> </li> </ul> </div> </li> </ul> </div> </li> <li> <p>level 1</p> </li> </ul> </div> </div> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> The unordered list marker can be changed using {uri-marker}[block styles]. </td> </tr> </table> </div> <div class="listingblock"> <div class="title">Ordered, basic</div> <div class="content"> <pre>. Step 1 . Step 2 . Step 3</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="olist arabic"> <ol class="arabic"> <li> <p>Step 1</p> </li> <li> <p>Step 2</p> </li> <li> <p>Step 3</p> </li> </ol> </div> </div> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> You can choose to include an ordinal in front of each list marker, but they have to be in sequence. </td> </tr> </table> </div> <div class="listingblock"> <div class="title">Ordered, nested</div> <div class="content"> <pre>. Step 1 . Step 2 .. Step 2a .. Step 2b . Step 3</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="olist arabic"> <ol class="arabic"> <li> <p>Step 1</p> </li> <li> <p>Step 2</p> <div class="olist loweralpha"> <ol class="loweralpha" type="a"> <li> <p>Step 2a</p> </li> <li> <p>Step 2b</p> </li> </ol> </div> </li> <li> <p>Step 3</p> </li> </ol> </div> </div> </div> <div class="listingblock"> <div class="title">Ordered, max nesting</div> <div class="content"> <pre>. level 1 .. level 2 ... level 3 .... level 4 ..... level 5 . level 1</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="olist arabic"> <ol class="arabic"> <li> <p>level 1</p> <div class="olist loweralpha"> <ol class="loweralpha" type="a"> <li> <p>level 2</p> <div class="olist lowerroman"> <ol class="lowerroman" type="i"> <li> <p>level 3</p> <div class="olist upperalpha"> <ol class="upperalpha" type="A"> <li> <p>level 4</p> <div class="olist upperroman"> <ol class="upperroman" type="I"> <li> <p>level 5</p> </li> </ol> </div> </li> </ol> </div> </li> </ol> </div> </li> </ol> </div> </li> <li> <p>level 1</p> </li> </ol> </div> </div> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> For ordered lists, Asciidoctor supports {uri-list-num}[numeration styles] such as <code>lowergreek</code> and <code>decimal-leading-zero</code>. </td> </tr> </table> </div> <div class="listingblock"> <div class="title">Checklist</div> <div class="content"> <pre>* [*] checked * [x] also checked * [ ] not checked * normal list item</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="ulist checklist"> <ul class="checklist"> <li> <p><i class="fa fa-check-square-o"></i> checked</p> </li> <li> <p><i class="fa fa-check-square-o"></i> also checked</p> </li> <li> <p><i class="fa fa-square-o"></i> not checked</p> </li> <li> <p>normal list item</p> </li> </ul> </div> </div> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> Checklists can use {uri-checklist}[font-based icons and be interactive]. </td> </tr> </table> </div> <div class="listingblock"> <div class="title">Description, single-line</div> <div class="content"> <pre>first term:: definition of first term second term:: definition of second term</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="dlist"> <dl> <dt class="hdlist1">first term</dt> <dd> <p>definition of first term</p> </dd> <dt class="hdlist1">second term</dt> <dd> <p>definition of second term</p> </dd> </dl> </div> </div> </div> <div class="listingblock"> <div class="title">Description, multi-line</div> <div class="content"> <pre>first term:: definition of first term second term:: definition of second term</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="dlist"> <dl> <dt class="hdlist1">first term</dt> <dd> <p>definition of first term</p> </dd> <dt class="hdlist1">second term</dt> <dd> <p>definition of second term</p> </dd> </dl> </div> </div> </div> <div class="listingblock"> <div class="title">Q&A</div> <div class="content"> <pre>[qanda] What is Asciidoctor?:: An implementation of the AsciiDoc processor in Ruby. What is the answer to the Ultimate Question?:: 42</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <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> </div> <div class="listingblock"> <div class="title">Mixed</div> <div class="content"> <pre>Operating Systems:: Linux::: . Fedora * Desktop . Ubuntu * Desktop * Server BSD::: . FreeBSD . NetBSD Cloud Providers:: PaaS::: . OpenShift . CloudBees IaaS::: . Amazon EC2 . Rackspace</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <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> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> Lists can be indented. Leading whitespace is not significant. </td> </tr> </table> </div> <div class="listingblock"> <div class="title">Complex content in outline lists</div> <div class="content"> <pre>* Every list item has at least one paragraph of content, which may be wrapped, even using a hanging indent. + Additional paragraphs or blocks are adjoined by putting a list continuation on a line adjacent to both blocks. + list continuation:: a plus sign (`{plus}`) on a line by itself * A literal paragraph does not require a list continuation. $ gem install asciidoctor * AsciiDoc lists may contain any complex content. + [cols="2", options="header"] |=== |Application |Language |AsciiDoc |Python |Asciidoctor |Ruby |===</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="ulist"> <ul> <li> <p>Every list item has at least one paragraph of content, which may be wrapped, even using a hanging indent.</p> <div class="paragraph"> <p>Additional paragraphs or blocks are adjoined by putting a list continuation on a line adjacent to both blocks.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">list continuation</dt> <dd> <p>a plus sign (<code>+</code>) on a line by itself</p> </dd> </dl> </div> </li> <li> <p>A literal paragraph does not require a list continuation.</p> <div class="literalblock"> <div class="content"> <pre>$ gem install asciidoctor</pre> </div> </div> </li> <li> <p>AsciiDoc lists may contain any complex content.</p> <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">Application</th> <th class="tableblock halign-left valign-top">Language</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">AsciiDoc</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Python</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Asciidoctor</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ruby</p></td> </tr> </tbody> </table> </li> </ul> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_links">8. Links</h2> <div class="sectionbody"> <div class="listingblock"> <div class="title">External</div> <div class="content"> <pre>https://asciidoctor.org - automatic! https://asciidoctor.org[Asciidoctor] https://github.com/asciidoctor[Asciidoctor @ *GitHub*]</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p><a href="https://asciidoctor.org" class="bare">https://asciidoctor.org</a> - automatic!</p> </div> <div class="paragraph"> <p><a href="https://asciidoctor.org">Asciidoctor</a></p> </div> <div class="paragraph"> <p><a href="https://github.com/asciidoctor">Asciidoctor @ <strong>GitHub</strong></a></p> </div> </div> </div> <div class="listingblock"> <div class="title">With spaces and special characters</div> <div class="content"> <pre>link:++https://example.org/?q=[a b]++[URL with special characters] link:https://example.org/?q=%5Ba%20b%5D[URL with special characters]</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p><a href="https://example.org/?q=[a b]">URL with special characters</a></p> </div> <div class="paragraph"> <p><a href="https://example.org/?q=%5Ba%20b%5D">URL with special characters</a></p> </div> </div> </div> <div class="listingblock"> <div class="title">Windows path</div> <div class="content"> <pre>link:\\server\share\whitepaper.pdf[Whitepaper]</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p><a href="\\server\share\whitepaper.pdf">Whitepaper</a></p> </div> </div> </div> <div class="listingblock"> <div class="title">Relative</div> <div class="content"> <pre>link:index.html[Docs]</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p><a href="index.html">Docs</a></p> </div> </div> </div> <div class="listingblock"> <div class="title">Email and IRC</div> <div class="content"> <pre>devel@discuss.arquillian.org mailto:devel@discuss.arquillian.org[Discuss Arquillian] mailto:devel-join@discuss.arquillian.org[Subscribe,Subscribe me,I want to join!] irc://irc.freenode.org/#fedora</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p><a href="mailto:devel@discuss.arquillian.org">devel@discuss.arquillian.org</a></p> </div> <div class="paragraph"> <p><a href="mailto:devel@discuss.arquillian.org">Discuss Arquillian</a></p> </div> <div class="paragraph"> <p><a href="mailto:devel-join@discuss.arquillian.org?subject=Subscribe+me&body=I+want+to+join%21">Subscribe</a></p> </div> <div class="paragraph"> <p><a href="irc://irc.freenode.org/#fedora" class="bare">irc://irc.freenode.org/#fedora</a></p> </div> </div> </div> <div class="listingblock"> <div class="title">Link with attributes (Asciidoctor only)</div> <div class="content"> <pre>http://discuss.asciidoctor.org[Discuss Asciidoctor,role=external,window=_blank] http://discuss.asciidoctor.org[Discuss Asciidoctor^] https://example.org["Google, Yahoo, Bing^",role=teal]</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p><a href="http://discuss.asciidoctor.org" class="external" target="_blank" rel="noopener">Discuss Asciidoctor</a></p> </div> <div class="paragraph"> <p><a href="http://discuss.asciidoctor.org" target="_blank" rel="noopener">Discuss Asciidoctor</a></p> </div> <div class="paragraph"> <p><a href="https://example.org" class="teal" target="_blank" rel="noopener">Google, Yahoo, Bing</a></p> </div> </div> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Links with attributes (including the subject and body segments on mailto links) are a feature unique to Asciidoctor. To enable them prior to 1.5.7, you must set the <code>linkattrs</code> attribute on the document. Since 1.5.7, attribute parsing is enabled automatically if an equal sign follows a comma. When attribute parsing is enabled, you must quote the link text if it contains a comma. </td> </tr> </table> </div> <div class="listingblock"> <div class="title">Inline anchors</div> <div class="content"> <pre>[[bookmark-a]]Inline anchors make arbitrary content referenceable. [#bookmark-b]#Inline anchors can be applied to a phrase like this one.# anchor:bookmark-c[]Use a cross reference to link to this location. [[bookmark-d,last paragraph]]The xreflabel attribute will be used as link text in the cross-reference link.</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <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 anchors can be applied to a phrase like this one.</span></p> </div> <div class="paragraph"> <p><a id="bookmark-c"></a>Use a cross reference to link to this location.</p> </div> <div class="paragraph"> <p><a id="bookmark-d"></a>The xreflabel attribute will be used as link text in the cross-reference link.</p> </div> </div> </div> <div class="listingblock"> <div class="title">Internal cross references</div> <div class="content"> <pre>See <<paragraphs>> to learn how to write paragraphs. Learn how to organize the document into <<section-titles,sections>>.</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p>See <a href="#paragraphs">[paragraphs]</a> to learn how to write paragraphs.</p> </div> <div class="paragraph"> <p>Learn how to organize the document into <a href="#section-titles">sections</a>.</p> </div> </div> </div> <div class="listingblock"> <div class="title">Inter-document cross references (Asciidoctor only)</div> <div class="content"> <pre>Refer to <<document-b.adoc#section-b,Section B>> for more information. See you when you get back from <<document-b#section-b,Section B>>!</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_images">9. Images</h2> <div class="sectionbody"> <div class="paragraph"> <p>Images are resolved relative to the value of the {uri-imagesdir}[imagesdir] document attribute, which is empty by default. You are encouraged to make use of the <code>imagesdir</code> attribute to avoid hard-coding the common path to your images in every image macro.</p> </div> <div class="paragraph"> <p>The <code>imagesdir</code> attribute can be an absolute path, relative path, or base URL. When the image target is a URL or absolute path, the imagesdir prefix is <em>not</em> prepended.</p> </div> <div class="listingblock"> <div class="title">Block</div> <div class="content"> <pre>image::sunset.jpg[] image::sunset.jpg[Sunset] .A mountain sunset [#img-sunset] [caption="Figure 1: ",link=https://www.flickr.com/photos/javh/5448336655] image::sunset.jpg[Sunset,300,200] image::https://asciidoctor.org/images/octocat.jpg[GitHub mascot]</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="imageblock"> <div class="content"> <img src="data:image/jpg;base64," alt="sunset"> </div> </div> <div class="imageblock"> <div class="content"> <img src="data:image/jpg;base64," alt="Sunset"> </div> </div> <div id="img-sunset" class="imageblock"> <div class="content"> <a class="image" href="https://www.flickr.com/photos/javh/5448336655"><img src="data:image/jpg;base64," alt="Sunset" width="300" height="200"></a> </div> <div class="title">Figure 1: A mountain sunset</div> </div> <div class="imageblock"> <div class="content"> <img src="https://asciidoctor.org/images/octocat.jpg" alt="GitHub mascot"> </div> </div> </div> </div> <div class="listingblock"> <div class="title">Inline</div> <div class="content"> <pre>Click image:icons/play.png[Play, title="Play"] to get the party started. Click image:icons/pause.png[title="Pause"] when you need a break.</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p>Click <span class="image"><img src="data:image/png;base64," alt="Play" title="Play"></span> to get the party started.</p> </div> <div class="paragraph"> <p>Click <span class="image"><img src="data:image/png;base64," alt="pause" title="Pause"></span> when you need a break.</p> </div> </div> </div> <div class="admonitionblock important"> <table> <tr> <td class="icon"> <i class="fa icon-important" title="Important"></i> </td> <td class="content"> Two colons following the image keyword in the macro (i.e., <code>image::</code>) indicates a block image (aka figure), whereas one colon following the image keyword (i.e., <code>image:</code>) indicates an inline image. (All macros follow this pattern). You use an inline image when you need to place the image in a line of text. Otherwise, you should prefer the block form. </td> </tr> </table> </div> <div class="listingblock"> <div class="title">Inline image with positioning role</div> <div class="content"> <pre>image:sunset.jpg[Sunset,150,150,role="right"] What a beautiful sunset!</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p><span class="image right"><img src="data:image/jpg;base64," alt="Sunset" width="150" height="150"></span> What a beautiful sunset!</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"> There are a variety of attributes available to {uri-image-attrs}[position and frame images]. </td> </tr> </table> </div> <div class="listingblock"> <div class="title">Embedded</div> <div class="content"> <pre>= Document Title :data-uri:</pre> </div> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> When the <code>data-uri</code> attribute is set, all images in the document—​including admonition icons—​are embedded into the document as {uri-data-uri}[data URIs]. </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"> Instead of declaring the <code>data-uri</code> attribute in the document, you can pass it as a command-line argument using <code>-a data-uri</code>. </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_videos">10. Videos</h2> <div class="sectionbody"> <div class="listingblock"> <div class="title">Block</div> <div class="content"> <pre>video::video_file.mp4[] video::video_file.mp4[width=640, start=60, end=140, options=autoplay]</pre> </div> </div> <div class="listingblock"> <div class="title">Embedded Youtube video</div> <div class="content"> <pre>video::rPQoq7ThGAU[youtube]</pre> </div> </div> <div class="listingblock"> <div class="title">Embedded Vimeo video</div> <div class="content"> <pre>video::67480300[vimeo]</pre> </div> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> You can control the video settings using {uri-video}[additional attributes and options] on the macro. </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_source_code">11. Source Code</h2> <div class="sectionbody"> <div class="listingblock"> <div class="title">Inline (monospace only)</div> <div class="content"> <pre>Reference code like `types` or `methods` inline. Do not pass arbitrary ``Object``s to methods that accept ``String``s!</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p>Reference code like <code>types</code> or <code>methods</code> inline.</p> </div> <div class="paragraph"> <p>Do not pass arbitrary <code>Object</code>s to methods that accept <code>String</code>s!</p> </div> </div> </div> <div class="listingblock"> <div class="title">Inline (literal)</div> <div class="content"> <pre>Output literal monospace text such as `+{backtick}+` by enclosing the text in pluses, then in backticks.</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p>Output literal monospace text such as <code>{backtick}</code> by enclosing the text in pluses, then in backticks.</p> </div> </div> </div> <div class="listingblock"> <div class="title">Literal line</div> <div class="content"> <pre> Indent the line one space to insert a code snippet</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="literalblock"> <div class="content"> <pre>Indent the line one space to insert a code snippet</pre> </div> </div> </div> </div> <div class="listingblock"> <div class="title">Literal block</div> <div class="content"> <pre>.... error: The requested operation returned error: 1954 Forbidden search for defensive operations manual absolutely fatal: operation initiation lost in the dodecahedron of doom would you like to die again? y/n ....</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="literalblock"> <div class="content"> <pre>error: The requested operation returned error: 1954 Forbidden search for defensive operations manual absolutely fatal: operation initiation lost in the dodecahedron of doom would you like to die again? y/n</pre> </div> </div> </div> </div> <div class="listingblock"> <div class="title">Listing block with title, no syntax highlighting</div> <div class="content"> <pre>.Gemfile.lock ---- GEM remote: https://rubygems.org/ specs: asciidoctor (1.5.6.1) PLATFORMS ruby DEPENDENCIES asciidoctor (~> 1.5.6.1) ----</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="listingblock"> <div class="title">Gemfile.lock</div> <div class="content"> <pre>GEM remote: https://rubygems.org/ specs: asciidoctor (1.5.6.1) PLATFORMS ruby DEPENDENCIES asciidoctor (~> 1.5.6.1)</pre> </div> </div> </div> </div> <div class="listingblock"> <div class="title">Code block with title and syntax highlighting</div> <div class="content"> <pre>.app.rb [source,ruby] ---- require 'sinatra' get '/hi' do "Hello World!" end ----</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="listingblock"> <div class="title">app.rb</div> <div class="content"> <pre class="highlight"><code class="language-ruby" data-lang="ruby">require 'sinatra' get '/hi' do "Hello World!" end</code></pre> </div> </div> </div> </div> <div class="listingblock"> <div class="title">Code block with callouts</div> <div class="content"> <pre>[source,ruby] ---- require 'sinatra' // <1> get '/hi' do // <2> "Hello World!" // <3> end ---- <1> Library import <2> URL mapping <3> HTTP response body</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-ruby" data-lang="ruby">require 'sinatra' <i class="conum" data-value="1"></i><b>(1)</b> get '/hi' do <i class="conum" data-value="2"></i><b>(2)</b> "Hello World!" <i class="conum" data-value="3"></i><b>(3)</b> end</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Library import</td> </tr> <tr> <td><i class="conum" data-value="2"></i><b>2</b></td> <td>URL mapping</td> </tr> <tr> <td><i class="conum" data-value="3"></i><b>3</b></td> <td>HTTP response body</td> </tr> </table> </div> </div> </div> <div class="listingblock"> <div class="title">Code block with non-selectable callouts</div> <div class="content"> <pre>---- line of code // <1> line of code # <2> line of code ;; <3> ---- <1> A callout behind a line comment for C-style languages. <2> A callout behind a line comment for Ruby, Python, Perl, etc. <3> A callout behind a line comment for Clojure.</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="listingblock"> <div class="content"> <pre>line of code <i class="conum" data-value="1"></i><b>(1)</b> line of code <i class="conum" data-value="2"></i><b>(2)</b> line of code <i class="conum" data-value="3"></i><b>(3)</b></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>A callout behind a line comment for C-style languages.</td> </tr> <tr> <td><i class="conum" data-value="2"></i><b>2</b></td> <td>A callout behind a line comment for Ruby, Python, Perl, etc.</td> </tr> <tr> <td><i class="conum" data-value="3"></i><b>3</b></td> <td>A callout behind a line comment for Clojure.</td> </tr> </table> </div> </div> </div> <div class="listingblock"> <div class="title">XML code block with a non-selectable callout</div> <div class="content"> <pre>[source,xml] ---- <section> <title>Section Title</title> <!--1--> </section> ---- <1> The section title is required.</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-xml" data-lang="xml"><section> <title>Section Title</title> <i class="conum" data-value="1"></i><b>(1)</b> </section></code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>The section title is required.</td> </tr> </table> </div> </div> </div> <div class="listingblock"> <div class="title">Code block sourced from file</div> <div class="content"> <pre>[source,ruby] ---- include::app.rb[] ----</pre> </div> </div> <div class="listingblock"> <div class="title">Code block sourced from file relative to source directory</div> <div class="content"> <pre>:sourcedir: src/main/java [source,java] ---- include::{sourcedir}/org/asciidoctor/Asciidoctor.java[] ----</pre> </div> </div> <div class="listingblock"> <div class="title">Strip leading indentation from source</div> <div class="content"> <pre>[source,ruby,indent=0] ---- include::lib/document.rb[lines=5..10] ----</pre> </div> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> <div class="ulist"> <ul> <li> <p>When <code>indent</code> is 0, the leading block indent is stripped (tabs are replaced with 4 spaces).</p> </li> <li> <p>When <code>indent</code> is > 0, the leading block indent is first stripped (tabs are replaced with 4 spaces), then a block is indented by the number of columns equal to this value.</p> </li> </ul> </div> </td> </tr> </table> </div> <div class="listingblock"> <div class="title">Code block without delimiters (no blank lines)</div> <div class="content"> <pre>[source,xml] <meta name="viewport" content="width=device-width, initial-scale=1.0"> This is normal content.</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-xml" data-lang="xml"><meta name="viewport" content="width=device-width, initial-scale=1.0"></code></pre> </div> </div> <div class="paragraph"> <p>This is normal content.</p> </div> </div> </div> <div class="admonitionblock important"> <table> <tr> <td class="icon"> <i class="fa icon-important" title="Important"></i> </td> <td class="content"> <div class="title">Enabling the syntax highlighter</div> <div class="paragraph"> <p>Syntax highlighting is enabled by setting the <code>source-highlighter</code> attribute in the document header or passed as an argument.</p> </div> <div class="literalblock"> <div class="content"> <pre>:source-highlighter: pygments</pre> </div> </div> <div class="paragraph"> <p>The valid options are <code>coderay</code>, <code>highlightjs</code>, <code>prettify</code>, and <code>pygments</code>.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_more_delimited_blocks">12. More Delimited Blocks</h2> <div class="sectionbody"> <div class="listingblock"> <div class="title">Sidebar</div> <div class="content"> <pre>.AsciiDoc history **** 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. ****</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <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> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Any block can have a title, positioned above the block. A block title is a line of text that starts with a dot. The dot cannot be followed by a space. </td> </tr> </table> </div> <div class="listingblock"> <div class="title">Example</div> <div class="content"> <pre>.Sample document ==== Here's a sample AsciiDoc document: [listing] .... = Title of Document Doc Writer :toc: This guide provides... .... The document header is useful, but not required. ====</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <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 id="admon-bl" class="listingblock"> <div class="title">Admonition</div> <div class="content"> <pre>[NOTE] ==== An admonition block may contain complex content. .A list - one - two - three Another paragraph. ====</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> <div class="paragraph"> <p>An admonition block may contain complex content.</p> </div> <div class="ulist"> <div class="title">A list</div> <ul> <li> <p>one</p> </li> <li> <p>two</p> </li> <li> <p>three</p> </li> </ul> </div> <div class="paragraph"> <p>Another paragraph.</p> </div> </td> </tr> </table> </div> </div> </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">Admonition and callout icons</div> <div class="paragraph"> <p>Asciidoctor can “draw” icons using {uri-fontawesome}[Font Awesome^] and CSS.</p> </div> <div class="paragraph"> <p>To use this feature, set the value of the <code>icons</code> document attribute to <code>font</code>. Asciidoctor will then emit HTML markup that selects an appropriate font character from the Font Awesome font for each admonition block.</p> </div> <div class="paragraph"> <p>Icons can also be used {uri-icon-in}[inline] and {uri-icon-attrs}[styled].</p> </div> </td> </tr> </table> </div> <div class="listingblock"> <div class="title">Blockquote</div> <div class="content"> <pre>[quote, Abraham Lincoln, Address delivered at the dedication of the Cemetery at Gettysburg] ____ Four score and seven years ago our fathers brought forth on this continent a new nation... ____ [quote, Albert Einstein] A person who never made a mistake never tried anything new. ____ A person who never made a mistake never tried anything new. ____ [quote, Charles Lutwidge Dodgson, 'Mathematician and author, also known as https://en.wikipedia.org/wiki/Lewis_Carroll[Lewis Carroll]'] ____ If you don't know where you are going, any road will get you there. ____</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="quoteblock"> <blockquote> <div class="paragraph"> <p>Four score and seven years ago our fathers brought forth on this continent a new nation…​</p> </div> </blockquote> <div class="attribution"> — Abraham Lincoln<br> <cite>Address delivered at the dedication of the Cemetery at Gettysburg</cite> </div> </div> <div class="quoteblock"> <blockquote> A person who never made a mistake never tried anything new. </blockquote> <div class="attribution"> — Albert Einstein </div> </div> <div class="quoteblock"> <blockquote> <div class="paragraph"> <p>A person who never made a mistake never tried anything new.</p> </div> </blockquote> </div> <div class="quoteblock"> <blockquote> <div class="paragraph"> <p>If you don’t know where you are going, any road will get you there.</p> </div> </blockquote> <div class="attribution"> — Charles Lutwidge Dodgson<br> <cite>Mathematician and author, also known as <a href="https://en.wikipedia.org/wiki/Lewis_Carroll">Lewis Carroll</a></cite> </div> </div> </div> </div> <div class="listingblock"> <div class="title">Abbreviated blockquote (Asciidoctor only)</div> <div class="content"> <pre>"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." -- Thomas Jefferson, Papers of Thomas Jefferson: Volume 11</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <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> </div> <div class="listingblock"> <div class="title">Air quotes: the best thing since fenced code blocks (Asciidoctor only)</div> <div class="content"> <pre>[, James Baldwin] "" Not everything that is faced can be changed. But nothing can be changed until it is faced. ""</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p>"" Not everything that is faced can be changed. But nothing can be changed until it is faced. ""</p> </div> </div> </div> <div class="listingblock"> <div class="title">Passthrough</div> <div class="content"> <pre>++++ <p> Content in a passthrough block is passed to the output unprocessed. That means you can include raw HTML, like this embedded Gist: </p> <script src="https://gist.github.com/mojavelinux/5333524.js"> </script> ++++</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <p> Content in a passthrough block is passed to the output unprocessed. That means you can include raw HTML, like this embedded Gist: </p> <script src="https://gist.github.com/mojavelinux/5333524.js"> </script> </div> </div> <div class="listingblock"> <div class="title">Open</div> <div class="content"> <pre>-- An open block can be an anonymous container, or it can masquerade as any other block. -- [source] -- puts "I'm a source block!" --</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="openblock"> <div class="content"> <div class="paragraph"> <p>An open block can be an anonymous container, or it can masquerade as any other block.</p> </div> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>puts "I'm a source block!"</code></pre> </div> </div> </div> </div> <div class="listingblock"> <div class="title">Custom substitutions</div> <div class="content"> <pre>:version: 1.5.6.1 [source,xml,subs="verbatim,attributes"] ---- <dependency> <groupId>org.asciidoctor</groupId> <artifactId>asciidoctor-java-integration</artifactId> <version>{version}</version> </dependency> ----</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-xml" data-lang="xml"><dependency> <groupId>org.asciidoctor</groupId> <artifactId>asciidoctor-java-integration</artifactId> <version>1.5.6.1</version> </dependency></code></pre> </div> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_block_id_role_and_options">13. Block Id, Role and Options</h2> <div class="sectionbody"> <div class="listingblock"> <div class="title">Traditional (longhand) markup method for assigning block id and role</div> <div class="content"> <pre>[[goals]] [role="incremental"] * Goal 1 * Goal 2</pre> </div> </div> <div class="listingblock"> <div class="title">Shorthand markup method for assigning block id and role (Asciidoctor only)</div> <div class="content"> <pre>[#goals.incremental] * Goal 1 * Goal 2</pre> </div> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> <div class="ulist"> <ul> <li> <p>To specify multiple roles using the shorthand syntax, separate them by dots.</p> </li> <li> <p>The order of <code>id</code> and <code>role</code> values in the shorthand syntax does not matter.</p> </li> </ul> </div> </td> </tr> </table> </div> <div class="listingblock"> <div class="title">Traditional (longhand) markup method for assigning quoted text anchor (id) and role</div> <div class="content"> <pre>[[free_the_world]][big goal]_free the world_</pre> </div> </div> <div class="listingblock"> <div class="title">Shorthand markup method for assigning quoted text anchor (id) and role (Asciidoctor only)</div> <div class="content"> <pre>[#free_the_world.big.goal]_free the world_</pre> </div> </div> <div class="listingblock"> <div class="title">Role assigned to text enclosed in backticks</div> <div class="content"> <pre>[.rolename]`monospace text`</pre> </div> </div> <div class="listingblock"> <div class="title">Traditional (longhand) markup method for assigning block options</div> <div class="content"> <pre>[options="header,footer,autowidth"] |=== |Cell A |Cell B |===</pre> </div> </div> <div class="listingblock"> <div class="title">Shorthand markup method for assigning block options (Asciidoctor only)</div> <div class="content"> <pre>[%header%footer%autowidth] |=== |Cell A |Cell B |===</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_comments">14. Comments</h2> <div class="sectionbody"> <div class="listingblock"> <div class="title">Line</div> <div class="content"> <pre>// A single-line comment.</pre> </div> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> Single-line comments can be used to divide elements, such as two adjacent lists. </td> </tr> </table> </div> <div class="listingblock"> <div class="title">Block</div> <div class="content"> <pre>//// A multi-line comment. Notice it's a delimited block. ////</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_tables">15. Tables</h2> <div class="sectionbody"> <div class="listingblock"> <div class="title">Table with a title, three columns, a header, and two rows of content</div> <div class="content"> <pre>.Table Title |=== |Name of Column 1 |Name of Column 2 |Name of Column 3 <i class="conum" data-value="1"></i><b>(1)</b> <i class="conum" data-value="2"></i><b>(2)</b> |Cell in column 1, row 1 |Cell in column 2, row 1 |Cell in column 3, row 1 |Cell in column 1, row 2 |Cell in column 2, row 2 |Cell in column 3, row 2 |===</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <table class="tableblock frame-all grid-all stretch"> <caption class="title">Table 1. Table Title</caption> <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">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> <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> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Unless the <code>cols</code> attribute is specified, the number of columns is equal to the number of cell separator characters on the first (non-blank) line between the block delimiters.</td> </tr> <tr> <td><i class="conum" data-value="2"></i><b>2</b></td> <td>When a blank line follows the first non-blank line, the cell in the first line get promoted to the table header.</td> </tr> </table> </div> <div class="listingblock"> <div class="title">Table with two columns, a header, and two rows of content</div> <div class="content"> <pre>[%header,cols=2*] <i class="conum" data-value="1"></i><b>(1)</b> |=== |Name of Column 1 |Name of Column 2 |Cell in column 1, row 1 |Cell in column 2, row 1 |Cell in column 1, row 2 |Cell in column 2, row 2 |===</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <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">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> <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> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>The <code>*</code> in the <code>cols</code> attribute is the repeat operator. It means repeat the column specification across the remaining of columns. In this case, we are repeating the default formatting across 2 columns. When the cells in the header are not defined on a single line, you must use the <code>cols</code> attribute to set the number of columns in the table and the <code>%header</code> option (or <code>options=header</code> attribute) to promote the first row to the table header.</td> </tr> </table> </div> <div class="listingblock"> <div class="title">Table with three columns, a header, and two rows of content</div> <div class="content"> <pre>[cols="1,1,2", options="header"] <i class="conum" data-value="1"></i><b>(1)</b> .Applications |=== |Name |Category |Description |Firefox |Browser |Mozilla Firefox is an open-source web browser. It's designed for standards compliance, performance, portability. |Arquillian |Testing |An innovative and highly extensible testing platform. Empowers developers to easily create real, automated tests. |===</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <table class="tableblock frame-all grid-all stretch"> <caption class="title">Table 2. Applications</caption> <colgroup> <col style="width: 25%;"> <col style="width: 25%;"> <col style="width: 50%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Name</th> <th class="tableblock halign-left valign-top">Category</th> <th class="tableblock halign-left valign-top">Description</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Firefox</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Browser</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Mozilla Firefox is an open-source web browser. It’s designed for standards compliance, performance, portability.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Arquillian</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Testing</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">An innovative and highly extensible testing platform. Empowers developers to easily create real, automated tests.</p></td> </tr> </tbody> </table> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>In this example, the <code>cols</code> attribute has two functions. It specifies that this table has three columns, and it sets their relative widths.</td> </tr> </table> </div> <div class="listingblock"> <div class="title">Table with column containing AsciiDoc content</div> <div class="content"> <pre>[cols="2,2,5a"] |=== |Firefox |Browser |Mozilla Firefox is an open-source web browser. It's designed for: * standards compliance * performance * portability https://www.mozilla.org/en-US/firefox/new[Get Firefox]! |===</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 22.2222%;"> <col style="width: 22.2222%;"> <col style="width: 55.5556%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Firefox</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Browser</p></td> <td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph"> <p>Mozilla Firefox is an open-source web browser.</p> </div> <div class="paragraph"> <p>It’s designed for:</p> </div> <div class="ulist"> <ul> <li> <p>standards compliance</p> </li> <li> <p>performance</p> </li> <li> <p>portability</p> </li> </ul> </div> <div class="paragraph"> <p><a href="https://www.mozilla.org/en-US/firefox/new">Get Firefox</a>!</p> </div></div></td> </tr> </tbody> </table> </div> </div> <div class="listingblock"> <div class="title">Table from CSV data</div> <div class="content"> <pre>[%header,format=csv] |=== Artist,Track,Genre Baauer,Harlem Shake,Hip Hop The Lumineers,Ho Hey,Folk Rock |===</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <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">Artist</th> <th class="tableblock halign-left valign-top">Track</th> <th class="tableblock halign-left valign-top">Genre</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Baauer</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Harlem Shake</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Hip Hop</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">The Lumineers</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ho Hey</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Folk Rock</p></td> </tr> </tbody> </table> </div> </div> <div class="listingblock"> <div class="title">Table from CSV data using shorthand (Asciidoctor only)</div> <div class="content"> <pre>,=== Artist,Track,Genre Baauer,Harlem Shake,Hip Hop ,===</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <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">Artist</th> <th class="tableblock halign-left valign-top">Track</th> <th class="tableblock halign-left valign-top">Genre</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Baauer</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Harlem Shake</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Hip Hop</p></td> </tr> </tbody> </table> </div> </div> <div class="listingblock"> <div class="title">Table from CSV data in file</div> <div class="content"> <pre>|=== include::customers.csv[] |===</pre> </div> </div> <div class="listingblock"> <div class="title">Table from DSV data using shorthand (Asciidoctor only)</div> <div class="content"> <pre>:=== Artist:Track:Genre Robyn:Indestructable:Dance :===</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <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">Artist</th> <th class="tableblock halign-left valign-top">Track</th> <th class="tableblock halign-left valign-top">Genre</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Robyn</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Indestructable</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Dance</p></td> </tr> </tbody> </table> </div> </div> <div class="listingblock"> <div class="title">Table with formatted, aligned and merged cells</div> <div class="content"> <pre>[cols="e,m,^,>s", width="25%"] |=== |1 >s|2 |3 |4 ^|5 2.2+^.^|6 .3+<.>m|7 ^|8 |9 2+>|10 |===</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <table class="tableblock frame-all grid-all" style="width: 25%;"> <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"><em>1</em></p></td> <td class="tableblock halign-right valign-top"><p class="tableblock"><strong>2</strong></p></td> <td class="tableblock halign-center valign-top"><p class="tableblock">3</p></td> <td class="tableblock halign-right valign-top"><p class="tableblock"><strong>4</strong></p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><em>5</em></p></td> <td class="tableblock halign-center valign-middle" colspan="2" rowspan="2"><p class="tableblock"><code>6</code></p></td> <td class="tableblock halign-left valign-bottom" rowspan="3"><p class="tableblock"><code>7</code></p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><em>8</em></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><em>9</em></p></td> <td class="tableblock halign-right valign-top" colspan="2"><p class="tableblock"><code>10</code></p></td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_ui_macros">16. UI Macros</h2> <div class="sectionbody"> <div class="admonitionblock important"> <table> <tr> <td class="icon"> <i class="fa icon-important" title="Important"></i> </td> <td class="content"> You <strong>must</strong> set the <code>experimental</code> attribute in the document header to enable these macros. </td> </tr> </table> </div> <div class="listingblock"> <div class="title">Keyboard shortcuts (inline kbd macro)</div> <div class="content"> <pre>|=== |Shortcut |Purpose |kbd:[F11] |Toggle fullscreen |kbd:[Ctrl+T] |Open a new tab |kbd:[Ctrl+Shift+N] |New incognito window |kbd:[\ ] |Used to escape characters |kbd:[Ctrl+\]] |Jump to keyword |kbd:[Ctrl + +] |Increase zoom |===</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <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">Shortcut</th> <th class="tableblock halign-left valign-top">Purpose</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">kbd:[F11]</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Toggle fullscreen</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">kbd:[Ctrl+T]</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Open a new tab</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">kbd:[Ctrl+Shift+N]</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">New incognito window</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">kbd:[\ ]</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Used to escape characters</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">kbd:[Ctrl+\]]</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Jump to keyword</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">kbd:[Ctrl + +]</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Increase zoom</p></td> </tr> </tbody> </table> </div> </div> <div class="listingblock"> <div class="title">Menu selections (inline menu macro)</div> <div class="content"> <pre>To save the file, select menu:File[Save]. Select menu:View[Zoom > Reset] to reset the zoom level to the default setting.</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p>To save the file, select menu:File[Save].</p> </div> <div class="paragraph"> <p>Select menu:View[Zoom > Reset] to reset the zoom level to the default setting.</p> </div> </div> </div> <div class="listingblock"> <div class="title">Buttons (inline btn macro)</div> <div class="content"> <pre>Press the btn:[OK] button when you are finished. Select a file in the file navigator and click btn:[Open].</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p>Press the btn:[OK] button when you are finished.</p> </div> <div class="paragraph"> <p>Select a file in the file navigator and click btn:[Open].</p> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_attributes_and_substitutions">17. Attributes and Substitutions</h2> <div class="sectionbody"> <div class="listingblock"> <div class="title">Attribute declaration and usage</div> <div class="content"> <pre>:url-home: https://asciidoctor.org :link-docs: https://asciidoctor.org/docs[documentation] :summary: Asciidoctor is a mature, plain-text document format for \ writing notes, articles, documentation, books, and more. \ It's also a text processor & toolchain for translating \ documents into various output formats (i.e., backends), \ including HTML, DocBook, PDF and ePub. :checkedbox: pass:normal[{startsb}&#10004;{endsb}] Check out {url-home}[Asciidoctor]! {summary} Be sure to read the {link-docs} too! {checkedbox} That's done!</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <table class="tableblock frame-all grid-all stretch unstyled"> <colgroup> <col style="width: 100%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph"> <p>Check out <a href="https://asciidoctor.org">Asciidoctor</a>!</p> </div> <div class="paragraph"> <p>Asciidoctor is a mature, plain-text document format for writing notes, articles, documentation, books, and more. It’s also a text processor & toolchain for translating documents into various output formats (i.e., backends), including HTML, DocBook, PDF and ePub.</p> </div> <div class="paragraph"> <p>Be sure to read the <a href="https://asciidoctor.org/docs">documentation</a> too!</p> </div> <div class="paragraph"> <p>[✔] That’s done!</p> </div></div></td> </tr> </tbody> </table> </div> </div> <div class="ulist"> <div class="title">Attribute assignment precedence (highest to lowest)</div> <ul> <li> <p>Attribute passed to the API or CLI that does not end in <code>@</code></p> </li> <li> <p>Attribute defined in the document</p> </li> <li> <p>Attribute passed to the API or CLI that ends in <code>@</code></p> </li> <li> <p>Intrinsic attribute value (default values)</p> </li> </ul> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> To make an attribute value that is passed to the API or CLI have a lower precedence than an assignment in the document, add an <code>@</code> symbol to the end of the attribute value. </td> </tr> </table> </div> <table class="tableblock frame-all grid-all" style="width: 75%;"> <caption class="title">Table 3. Predefined attributes for character replacements <sup>[1][2][3]</sup></caption> <colgroup> <col style="width: 40%;"> <col style="width: 30%;"> <col style="width: 30%;"> </colgroup> <thead> <tr> <th class="tableblock halign-center valign-top">Attribute name</th> <th class="tableblock halign-center valign-top">Replacement text</th> <th class="tableblock halign-center valign-top">Appearance</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>blank</code></p></td> <td class="tableblock halign-center valign-top"><p class="tableblock"><em>nothing</em></p></td> <td class="tableblock halign-center valign-top"></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>empty</code></p></td> <td class="tableblock halign-center valign-top"><p class="tableblock"><em>nothing</em></p></td> <td class="tableblock halign-center valign-top"></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>sp</code></p></td> <td class="tableblock halign-center valign-top"><p class="tableblock"><em>single space</em></p></td> <td class="tableblock halign-center valign-top"><p class="tableblock"> </p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>nbsp</code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>&#160;</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock"> </p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>zwsp<sup>[4]</sup></code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>&#8203;</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">​</p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>wj<sup>[5]</sup></code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>&#8288;</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">⁠</p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>apos</code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>&#39;</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">'</p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>quot</code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>&#34;</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">"</p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>lsquo</code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>&#8216;</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">‘</p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>rsquo</code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>&#8217;</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">’</p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>ldquo</code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>&#8220;</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">“</p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>rdquo</code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>&#8221;</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">”</p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>deg</code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>&#176;</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">°</p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>plus</code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>&#43;</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">+</p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>brvbar</code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>&#166;</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">¦</p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>vbar</code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>|</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">|</p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>amp</code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>&</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">&</p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>lt</code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre><</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock"><</p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>gt</code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>></pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">></p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>startsb</code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>[</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">[</p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>endsb</code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>]</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">]</p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>caret</code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>^</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">^</p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>asterisk</code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>*</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">*</p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>tilde</code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>~</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">~</p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>backslash</code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>\</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">\</p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>backtick</code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>`</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">`</p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>two-colons</code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>::</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">::</p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>two-semicolons</code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>;;</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">;;</p></td> </tr> <tr> <td class="tableblock halign-center valign-top"><p class="tableblock"><code>cpp</code></p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>C++</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">C++</p></td> </tr> </tbody> </table> <div class="paragraph"> <p><sup>[1]</sup> Some replacements are Unicode characters, whereas others are numeric character references (e.g., &#34;). These character references are used whenever the use of the Unicode character could interfere with the AsciiDoc syntax or confuse the renderer (i.e., the browser). It’s up to the converter to transform the reference into something the renderer understands (something both the man page and PDF converter handle).</p> </div> <div class="paragraph"> <p><sup>[2]</sup> Asciidoctor does not prevent you from reassigning predefined attributes. However, it’s best to treat them as read-only unless the output format requires the use of a different encoding scheme. These attributes are an effective tool for decoupling content and presentation.</p> </div> <div class="paragraph"> <p><sup>[3]</sup> Asciidoctor allows you to use any of the named character references (aka named entities) defined in HTML (e.g., &euro; resolves to €). However, using named character references can cause problems when generating non-HTML output such as PDF because the lookup table needed to resolve these names may not be defined. Our recommendation is avoid using named character references—​with the exception of those defined in XML (i.e., lt, gt, amp, quot and apos). Instead, use numeric character references (e.g., &#8364;).</p> </div> <div class="paragraph"> <p><sup>[4]</sup> The Zero Width Space (ZWSP) is a code point in Unicode that shows where a long word can be split if necessary.</p> </div> <div class="paragraph"> <p><sup>[5]</sup> The word joiner (WJ) is a code point in Unicode that prevents a line break at its position.</p> </div> <table class="tableblock frame-all grid-all stretch"> <caption class="title">Table 4. Environment attributes</caption> <colgroup> <col style="width: 25%;"> <col style="width: 50%;"> <col style="width: 25%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Attribute</th> <th class="tableblock halign-left valign-top">Description</th> <th class="tableblock halign-left valign-top">Example Value</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>asciidoctor</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Set if the current processor is Asciidoctor.</p></td> <td class="tableblock halign-left valign-top"></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>asciidoctor-version</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Asciidoctor version.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>2.0.10</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>backend</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Backend used to create the output file.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>html5</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>basebackend</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">The backend value minus any trailing numbers. For example, if the backend is <code>docbook5</code>, the basebackend is <code>docbook</code>.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>html</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>docdate</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Last modified date of the source document.<sup>[<a href="#note_docdatetime">1</a>,<a href="#note_sourcedateepoch">2</a>]</sup></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>2019-01-04</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>docdatetime</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Last modified date and time of the source document.<sup>[<a href="#note_docdatetime">1</a>,<a href="#note_sourcedateepoch">2</a>]</sup></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>2019-01-04 19:26:06 UTC</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>docdir</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Full path of the directory that contains the source document.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>/home/user/docs</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>docfile</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Full path of the source document.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>/home/user/docs/userguide.adoc</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>docfilesuffix</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">File extension of the source document, including the leading period. <em>Introduced in 1.5.6.</em></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>.adoc</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>docname</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Root name of the source document (no leading path or file extension).</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>userguide</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>doctime</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Last modified time of the source document.<sup>[<a href="#note_docdatetime">1</a>,<a href="#note_sourcedateepoch">2</a>]</sup></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>19:26:06 UTC</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>doctype</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Document type (article, book or manpage).</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>article</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>docyear</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Year that the document was last modified.<sup>[<a href="#note_docdatetime">1</a>,<a href="#note_sourcedateepoch">2</a>]</sup></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>2018</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>embedded</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Set if content is being converted to an embeddable document (body only).</p></td> <td class="tableblock halign-left valign-top"></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>filetype</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">File extension of the output file name (without leading period).</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>html</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>htmlsyntax</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Syntax used when generating the HTML output (html or xhtml).</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>html</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>localdate</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Date when the document was converted.<sup>[<a href="#note_sourcedateepoch">2</a>]</sup></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>2019-02-17</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>localdatetime</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Date and time when the document was converted.<sup>[<a href="#note_sourcedateepoch">2</a>]</sup></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>2019-02-17 19:31:05 UTC</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>localtime</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Time when the document was converted.<sup>[<a href="#note_sourcedateepoch">2</a>]</sup></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>19:31:05 UTC</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>localyear</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Year when the document was converted.<sup>[<a href="#note_sourcedateepoch">2</a>]</sup></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>2018</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>outdir</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Full path of the output directory.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>/home/user/docs/dist</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>outfile</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Full path of the output file.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>/home/user/docs/dist/userguide.html</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>outfilesuffix</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">File extension of the output file (starting with a period) as determined by the backend (<code>.html</code> for <code>html</code>, <code>.xml</code> for <code>docbook</code>, etc.). (The value is not updated to match the file extension of the output file when one is specified explicitly). <em>Safe to modify.</em></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>.html</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>safe-mode-level</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Numeric value of the safe mode setting. (UNSAFE=0, SAFE=10, SERVER=10, SECURE=20).</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>20</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>safe-mode-name</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Textual value of the safe mode setting.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>SERVER</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>safe-mode-unsafe</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Set if the safe mode is UNSAFE.</p></td> <td class="tableblock halign-left valign-top"></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>safe-mode-safe</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Set if the safe mode is SAFE.</p></td> <td class="tableblock halign-left valign-top"></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>safe-mode-server</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Set if the safe mode is SERVER.</p></td> <td class="tableblock halign-left valign-top"></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>safe-mode-secure</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Set if the safe mode is SECURE.</p></td> <td class="tableblock halign-left valign-top"></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>user-home</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Home directory of the current user. Resolves to <code>.</code> if the safe mode is SERVER or greater.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>/home/user</code></p></td> </tr> </tbody> </table> <div class="paragraph"> <p><a id="note_docdatetime"></a><sup>[1]</sup> Only reflects the last modified time of the source document file. It does not consider the last modified time of files which are included.</p> </div> <div class="paragraph"> <p><a id="note_sourcedateepoch"></a><sup>[2]</sup> If the SOURCE_DATE_EPOCH environment variable is set, the value assigned to this attribute is built from a UTC date object that corresponds to the timestamp (as an integer) stored in that environment variable. This override offers one way to make the conversion reproducible. See <a href="https://reproducible-builds.org/specs/source-date-epoch/" class="bare">https://reproducible-builds.org/specs/source-date-epoch/</a> for more information about the SOURCE_DATE_EPOCH environment variable. Otherwise, the date is expressed in the local time zone, which is reported as a time zone offset (e.g., <code>-0600</code>) or UTC if the time zone offset is 0). To force the use of UTC, set the <code>TZ=UTC</code> environment variable when invoking Asciidoctor.</p> </div> <div class="hdlist"> <div class="title">Named substitutions</div> <table> <tr> <td class="hdlist1"> <code>none</code> </td> <td class="hdlist2"> <p>Disables substitutions</p> </td> </tr> <tr> <td class="hdlist1"> <code>normal</code> </td> <td class="hdlist2"> <p>Performs all substitutions except for callouts</p> </td> </tr> <tr> <td class="hdlist1"> <code>verbatim</code> </td> <td class="hdlist2"> <p>Replaces special characters and processes callouts</p> </td> </tr> <tr> <td class="hdlist1"> <code>specialchars</code>, <code>specialcharacters</code> </td> <td class="hdlist2"> <p>Replaces <code><</code>, <code>></code>, and <code>&</code> with their corresponding entities</p> </td> </tr> <tr> <td class="hdlist1"> <code>quotes</code> </td> <td class="hdlist2"> <p>Applies text formatting</p> </td> </tr> <tr> <td class="hdlist1"> <code>attributes</code> </td> <td class="hdlist2"> <p>Replaces attribute references</p> </td> </tr> <tr> <td class="hdlist1"> <code>replacements</code> </td> <td class="hdlist2"> <p>Substitutes textual and character reference replacements</p> </td> </tr> <tr> <td class="hdlist1"> <code>macros</code> </td> <td class="hdlist2"> <p>Processes macros</p> </td> </tr> <tr> <td class="hdlist1"> <code>post_replacements</code> </td> <td class="hdlist2"> <p>Replaces the line break character (<code>+</code>)</p> </td> </tr> </table> </div> <div class="listingblock"> <div class="title">Counter attributes</div> <div class="content"> <pre>[caption=""] .Parts{counter2:index:0} |=== |Part Id |Description |PX-{counter:index} |Description of PX-{index} |PX-{counter:index} |Description of PX-{index} |===</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <table class="tableblock frame-all grid-all stretch"> <caption class="title">Parts</caption> <colgroup> <col style="width: 50%;"> <col style="width: 50%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Part Id</th> <th class="tableblock halign-left valign-top">Description</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">PX-1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Description of PX-1</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">PX-2</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Description of PX-2</p></td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_text_replacement">18. Text Replacement</h2> <div class="sectionbody"> <table class="tableblock frame-all grid-all stretch"> <caption class="title">Table 5. Textual symbol replacements</caption> <colgroup> <col style="width: 28.5714%;"> <col style="width: 14.2857%;"> <col style="width: 14.2857%;"> <col style="width: 14.2857%;"> <col style="width: 28.5715%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Name</th> <th class="tableblock halign-center valign-top">Syntax</th> <th class="tableblock halign-center valign-top">Unicode Replacement</th> <th class="tableblock halign-center valign-top">Rendered</th> <th class="tableblock halign-left valign-top">Notes</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Copyright</p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>(C)</pre></div></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>&#169;</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">©</p></td> <td class="tableblock halign-left valign-top"></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Registered</p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>(R)</pre></div></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>&#174;</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">®</p></td> <td class="tableblock halign-left valign-top"></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Trademark</p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>(TM)</pre></div></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>&#8482;</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">™</p></td> <td class="tableblock halign-left valign-top"></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Em dash</p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>--</pre></div></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>&#8212;</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock"> — </p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Only replaced if between two word characters, between a word character and a line boundary, or flanked by spaces.</p> <p class="tableblock">When flanked by space characters (e.g., <code>a -- b</code>), the normal spaces are replaced by thin spaces (&#8201;).</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Ellipsis</p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>...</pre></div></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>&#8230;</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">…​</p></td> <td class="tableblock halign-left valign-top"></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Single right arrow</p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>-></pre></div></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>&#8594;</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">→</p></td> <td class="tableblock halign-left valign-top"></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Double right arrow</p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>=></pre></div></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>&#8658;</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">⇒</p></td> <td class="tableblock halign-left valign-top"></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Single left arrow</p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre><-</pre></div></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>&#8592;</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">←</p></td> <td class="tableblock halign-left valign-top"></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Double left arrow</p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre><=</pre></div></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>&#8656;</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">⇐</p></td> <td class="tableblock halign-left valign-top"></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Typographic apostrophe</p></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>Sam's</pre></div></td> <td class="tableblock halign-center valign-top"><div class="literal"><pre>Sam&#8217;s</pre></div></td> <td class="tableblock halign-center valign-top"><p class="tableblock">Sam’s</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">The typewriter apostrophe is replaced with the typographic (aka curly) apostrophe.</p></td> </tr> </tbody> </table> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> Any named, numeric or hexadecimal {uri-char-xml}[XML character reference] is supported. </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_escaping_text">19. Escaping Text</h2> <div class="sectionbody"> <div class="listingblock"> <div class="title">Backslash</div> <div class="content"> <pre>\*Stars* is not rendered as bold text. The asterisks around the word are preserved. \{author} is not resolved to the author name. The curly brackets around the word are preserved. `A\--Z` connects A to Z in monospace using two dashes. The dashes are not replaced by an em dash. \=> is an equal sign followed by a greater than sign. The two characters are not combined to form a double arrow. \[[Word]] is not interpreted as an anchor. The double brackets around the word are preserved. [\[[Word]]] is not interpreted as a bibliography anchor. The triple brackets around the word are preserved. In these cases, the backslash character is automatically removed.</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p>*Stars* is not rendered as bold text. The asterisks around the word are preserved.</p> </div> <div class="paragraph"> <p>{author} is not resolved to the author name. The curly brackets around the word are preserved.</p> </div> <div class="paragraph"> <p><code>A--Z</code> connects A to Z in monospace using two dashes. The dashes are not replaced by an em dash.</p> </div> <div class="paragraph"> <p>=> is an equal sign followed by a greater than sign. The two characters are not combined to form a double arrow.</p> </div> <div class="paragraph"> <p>[[Word]] is not interpreted as an anchor. The double brackets around the word are preserved.</p> </div> <div class="paragraph"> <p>[[[Word]]] is not interpreted as a bibliography anchor. The triple brackets around the word are preserved.</p> </div> <div class="paragraph"> <p>In these cases, the backslash character is automatically removed.</p> </div> </div> </div> <div class="listingblock"> <div class="title">Passthrough (“plus for passthrough”)</div> <div class="content"> <pre>Text between + characters, such as +/user/{name}+, is not substituted. However, special characters like +<+ and +>+ are still escaped. You can write `C++{plus}{plus}++` as `+{cpp}+`.</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p>Text between + characters, such as /user/{name}, is not substituted. However, special characters like < and > are still escaped.</p> </div> <div class="paragraph"> <p>You can write <code>C{plus}{plus}</code> as <code>{cpp}</code>.</p> </div> </div> </div> <div class="listingblock"> <div class="title">Raw (triple plus and inline pass macro)</div> <div class="content"> <pre>+++<u>underline me</u>+++ is underlined. pass:[<u>underline me</u>] is also underlined.</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="paragraph"> <p><u>underline me</u> is underlined.</p> </div> <div class="paragraph"> <p><u>underline me</u> is also underlined.</p> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_table_of_contents_toc">20. Table of Contents (ToC)</h2> <div class="sectionbody"> <div class="listingblock"> <div class="title">Document with ToC</div> <div class="content"> <pre>= AsciiDoc Writer's Guide Doc Writer <doc.writer@asciidoctor.org> v1.0, 2013-08-01 :toc:</pre> </div> </div> <div class="listingblock"> <div class="title">Document with ToC positioned on the right</div> <div class="content"> <pre>= AsciiDoc Writer's Guide Doc Writer <doc.writer@asciidoctor.org> v1.0, 2014-08-01 :toc: right</pre> </div> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> The ToC {uri-toc}[title, levels, and positioning] can be customized. </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_bibliography">21. Bibliography</h2> <div class="sectionbody"> <div class="listingblock"> <div class="title">Bibliography with inbound references</div> <div class="content"> <pre>_The Pragmatic Programmer_ <<pp>> should be required reading for all developers. To learn all about design patterns, refer to the book by the "`Gang of Four`" <<gof>>. [bibliography] == References - [[[pp]]] Andy Hunt & Dave Thomas. The Pragmatic Programmer: From Journeyman to Master. Addison-Wesley. 1999. - [[[gof,2]]] Erich Gamma, Richard Helm, Ralph Johnson & John Vlissides. Design Patterns: Elements of Reusable Object-Oriented Software. Addison-Wesley. 1994.</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 100%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph"> <p><em>The Pragmatic Programmer</em> <a href="#pp">[pp]</a> should be required reading for all developers. To learn all about design patterns, refer to the book by the “Gang of Four” <a href="#gof">[2]</a>.</p> </div> <div class="sect1"> <h2 id="_references">References</h2> <div class="sectionbody"> <div class="ulist bibliography"> <ul class="bibliography"> <li> <p><a id="pp"></a>[pp] Andy Hunt & Dave Thomas. The Pragmatic Programmer: From Journeyman to Master. Addison-Wesley. 1999.</p> </li> <li> <p><a id="gof"></a>[2] Erich Gamma, Richard Helm, Ralph Johnson & John Vlissides. Design Patterns: Elements of Reusable Object-Oriented Software. Addison-Wesley. 1994.</p> </li> </ul> </div> </div> </div></div></td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="section-footnotes">22. Footnotes</h2> <div class="sectionbody"> <div class="listingblock"> <div class="title">Normal and reusable footnotes</div> <div class="content"> <pre>A statement.footnote:[Clarification about this statement.] A bold statement!footnote:disclaimer[Opinions are my own.] Another bold statement.footnote:disclaimer[]</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <table class="tableblock frame-all grid-all stretch unstyled"> <colgroup> <col style="width: 100%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph"> <p>A statement.<sup class="footnote">[<a id="_footnoteref_1" class="footnote" href="#_footnotedef_1" title="View footnote.">1</a>]</sup></p> </div> <div class="paragraph"> <p>A bold statement!<sup class="footnote" id="_footnote_disclaimer">[<a id="_footnoteref_2" class="footnote" href="#_footnotedef_2" title="View footnote.">2</a>]</sup></p> </div> <div class="paragraph"> <p>Another bold statement.<sup class="footnoteref">[<a class="footnote" href="#_footnotedef_2" title="View footnote.">2</a>]</sup></p> </div> <div id="footnotes"> <hr> <div class="footnote" id="_footnotedef_1"> <a href="#_footnoteref_1">1</a>. Clarification about this statement. </div> <div class="footnote" id="_footnotedef_2"> <a href="#_footnoteref_2">2</a>. Opinions are my own. </div> </div></div></td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="markdown-compatibility">23. Markdown Compatibility</h2> <div class="sectionbody"> <div class="paragraph"> <p>Markdown compatible syntax is only available when using Asciidoctor.</p> </div> <div class="listingblock"> <div class="title">Markdown-style headings</div> <div class="content"> <pre># Document Title (Level 0) ## Section Level 1 ### Section Level 2 #### Section Level 3 ##### Section Level 4 ###### Section Level 5</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <h1 id="_document_title_level_0_3" class="float">Document Title (Level 0)</h1> <h2 id="_section_level_1_2" class="float">Section Level 1</h2> <h3 id="_section_level_2_2" class="float">Section Level 2</h3> <h4 id="_section_level_3_2" class="float">Section Level 3</h4> <h5 id="_section_level_4_2" class="float">Section Level 4</h5> <h6 id="_section_level_5_2" class="float">Section Level 5</h6> </div> </div> <div class="listingblock"> <div class="title">Fenced code block with syntax highlighting</div> <div class="content"> <pre>```ruby require 'sinatra' get '/hi' do "Hello World!" end ```</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-ruby" data-lang="ruby">require 'sinatra' get '/hi' do "Hello World!" end</code></pre> </div> </div> </div> </div> <div class="listingblock"> <div class="title">Markdown-style blockquote</div> <div class="content"> <pre>> 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. > -- Thomas Jefferson, Papers of Thomas Jefferson: Volume 11</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="quoteblock"> <blockquote> <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> </blockquote> <div class="attribution"> — Thomas Jefferson<br> <cite>Papers of Thomas Jefferson: Volume 11</cite> </div> </div> </div> </div> <div class="listingblock"> <div class="title">Markdown-style blockquote with block content</div> <div class="content"> <pre>> > What's new? > > I've got Markdown in my AsciiDoc! > > > Like what? > > * Blockquotes > * Headings > * Fenced code blocks > > > Is there more? > > Yep. AsciiDoc and Markdown share a lot of common syntax already.</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <div class="quoteblock"> <blockquote> <div class="quoteblock"> <blockquote> <div class="paragraph"> <p>What’s new?</p> </div> </blockquote> </div> <div class="paragraph"> <p>I’ve got Markdown in my AsciiDoc!</p> </div> <div class="quoteblock"> <blockquote> <div class="paragraph"> <p>Like what?</p> </div> </blockquote> </div> <div class="ulist"> <ul> <li> <p>Blockquotes</p> </li> <li> <p>Headings</p> </li> <li> <p>Fenced code blocks</p> </li> </ul> </div> <div class="quoteblock"> <blockquote> <div class="paragraph"> <p>Is there more?</p> </div> </blockquote> </div> <div class="paragraph"> <p>Yep. AsciiDoc and Markdown share a lot of common syntax already.</p> </div> </blockquote> </div> </div> </div> <div class="listingblock"> <div class="title">Markdown-style horizontal rules</div> <div class="content"> <pre>--- - - - *** * * *</pre> </div> </div> <div class="exampleblock result"> <div class="content"> <hr> <hr> <hr> <hr> </div> </div> </div> </div> <div class="sect1"> <h2 id="_user_manual_and_help">24. User Manual and Help</h2> <div class="sectionbody"> <div class="paragraph"> <p>To learn more about Asciidoctor and its capabilities, check out the other {docs}[Asciidoctor guides] and its {user}[User Manual]. Also, don’t forget to join the {uri-mailinglist}[Asciidoctor mailing list], where you can ask questions and leave comments.</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> <div class="title">Origin content</div> <div class="paragraph"> <p>INFO: <a href="https://asciidoctor.org/docs/asciidoc-syntax-quick-reference/" class="bare">https://asciidoctor.org/docs/asciidoc-syntax-quick-reference/</a></p> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> more: <a href="https://asciidoctor.org/docs/user-manual" class="bare">https://asciidoctor.org/docs/user-manual</a> </td> </tr> </table> </div> </td> </tr> </table> </div> </div> </div> <h1 id="_user_howto_convert" class="sect0">User HowTo convert</h1> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> <div class="title">If you need to convert only one file</div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>docker run --rm -v $(pwd):/documents/ registry.vlabs.uniwa.gr:5080/swarmlab-asciidoctor asciidoctor --safe -b html5 -a theme=flask -a toc2 -a toc-placement=right -o ./path/to/FILENAME.html ./path/from/FILENAME.adoc</code></pre> </div> </div> <div class="paragraph"> <p>Please note, there is a <strong>.</strong> in ./path</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p><br> <br> </p> </div> <hr> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> <div class="title">Reminder</div> <div class="paragraph"> <p>Caminante, no hay camino,<br> se hace camino al andar.</p> </div> <div class="paragraph"> <p>Wanderer, there is no path,<br> the path is made by walking.</p> </div> <div class="paragraph"> <p><strong>Antonio Machado</strong> Campos de Castilla</p> </div> </td> </tr> </table> </div> </div> <div id="footer"> <div id="footer-text"> Last updated 2020-10-16 13:16:32 UTC </div> </div> </body> </html>