Present how to render some common needs with asciidoc.
Useful symbol
You can display utf-8 characters with syntax: ✔ to display ✔.
|
✔ |
|
|
|
|
|
|
|
|
|
|
↑ |
↓ |
↥ |
↧ |
⇑ |
⇓ |
⇡ |
⇣ |
⇧ |
⇩ |
|
|
|
|
∆ |
∇ |
⋀ |
⋁ |
Show/Hide some document parts
You can use javascript and css to add some dynamic behavior in your page. Here we create a button to show/hide some text.
Native fonctionnality from asciidoc
Click to see source code
public class SimpleTest {
@RegisterExtension
static ApprovalsExtension doc = new SimpleApprovalsExtension();
}Custom solution injecting javascript
Hide
public void mySourceCode() {
// do something
}
Hide
public void anotherExample() {
// do something
}
Asciidoc source used
= Show/Hide some document parts
You can use javascript and css to add some dynamic behavior in your page.
Here we create a button to show/hide some text.
== Native fonctionnality from asciidoc
.Click to see source code
[%collapsible]
====
[,java]
----
public class SimpleTest {
@RegisterExtension
static ApprovalsExtension doc = new SimpleApprovalsExtension();
}
----
====
---
== Custom solution injecting javascript
// https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
++++
<script>
function myFunction(button, id) {
var x = document.getElementById(id);
var is_currently_hidden=x.classList.contains("hide_section")
if (is_currently_hidden) {
button.textContent = "Hide";
x.classList.remove("hide_section");
x.classList.add("show_section");
} else {
button.textContent = "Show more";
x.classList.add("hide_section");
x.classList.remove("show_section");
}
}
</script>
<style>
.myButton {
background-color: #B5C1FF;
width:10em;
padding: 0.6em;
margin-bottom:2px;
text-align:center;
border-radius: 2em;
}
.myButton:hover {
font-weight:bold;
background-color: #B5C1FFB0;
box-shadow: 2px 2px 2px #084f34;
}
.show_section {
pointer-events: auto;
transition: opacity 0.3s linear;
}
.hide_section {
pointer-events: none;
height:0px;
opacity: 0;
transition: opacity 0.1s;
}
</style>
++++
++++
<div class="myButton" onclick="myFunction(this, 'myTextToShowHide_1')" style="cursor:default">
Hide
</div>
++++
[#myTextToShowHide_1]
----
public void mySourceCode() {
// do something
}
----
++++
<div class="myButton" onclick="myFunction(this, 'myTextToShowHide_2')" style="cursor:default">
Hide
</div>
++++
[#myTextToShowHide_2]
----
public void anotherExample() {
// do something
}
----
Include once
To include something once, like css, javascript or a special page, we can use attribute and endif directive.
If the attribute is not defined (ifndef), we defined it and do what it have to do once (include a css, …). The second time, we not passe in the ifndef part.
Code we add in asciidoc file
ifndef::MY_ATTRIBUTE[]
:MY_ATTRIBUTE: First value
First declaration
endif::[]
ifndef::MY_ATTRIBUTE[]
:MY_ATTRIBUTE: Second value
Second declaration
endif::[]
MY_ATTRIBUTE value: *{MY_ATTRIBUTE}*
We can see below the result of the inclusion of those directives.
We only see First declaration text from the inside of first ifndef
and MY_ATTRIBUTE value is the default value of the first ifndef.
First declaration
MY_ATTRIBUTE value: First value
If we just want to define a default, you can use a more compact syntax.
Code we add in asciidoc file
ifndef::COMPACT_SYNTAX[:COMPACT_SYNTAX: My value]
COMPACT_SYNTAX value: *{COMPACT_SYNTAX}*
Below, what we can see on the document.
COMPACT_SYNTAX value: My value
Draw with a table
How to do
Cells must be interpreted as asciidoc using 'a'.
Here, we set all cells using cols attribute on table.
To set a style in a cell, you can add style using [.my_style] at the beginning of the cell.
It must be before the content with style to apply and must not have any content after it on the same line.
We need to put a text in cell.
We prefer to avoir some display problems when cell is too small.
|
|
|
|
Click to see asciidoc code
[.tableStyled]
[%autowidth, cols=2*a]
|====
|
| [.yellow]
|
|
|====Click to see css code
<style>
/* To fill the cell with background */
.tableStyled td {
padding: 0;
}
/* To make a square */
.tableStyled p {
width: 2em;
line-height: 2em;
}
.tableStyled .yellow {
background-color:yellow;
color:yellow;
}
</style>Draw a smiley
We can play a little and draw a smiley for example. It’s not very useful but we want to show how we can draw something using a table.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Click to see asciidoc code
[.tableStyled.smiley]
[%autowidth, cols=15*a]
|====
| | | | | | | | | | | | | | |
| | | | | | | | | | | | | | |
| | | | | | | | | | | | | | |
| | | | | | | | | | | | | | |
| | | | | | | | | | | | | | |
| | | | | | | | | | | | | | |
| | | | | | | | | | | | | | |
| | | | | | | | | | | | | | |
| | | | | | | | | | | | | | |
| | | | | | | | | | | | | | |
| | | | | | | | | | | | | | |
| | | | | | | | | | | | | | |
| | | | | | | | | | | | | | |
| | | | | | | | | | | | | | |
| | | | | | | | | | | | | | |
|====Click to see css code
<style>
/* To fill the cell with background */
.tableStyled.smiley td {
padding: 0;
}
.tableStyled.smiley p {
width: 5px;
line-height: 5px;
}
.tableStyled.smiley td {
background-color:white;
color:white;
border: none;
}
.tableStyled.smiley tr:nth-child(1) td:nth-child(n+6):nth-child(-n+10),
.tableStyled.smiley tr:nth-child(2) td:nth-child(n+4):nth-child(-n+12),
.tableStyled.smiley tr:nth-child(3) td:nth-child(n+3):nth-child(-n+13),
.tableStyled.smiley tr:nth-child(4) td:nth-child(n+2):nth-child(-n+14),
.tableStyled.smiley tr:nth-child(5) td:nth-child(n+2):nth-child(-n+14),
.tableStyled.smiley tr:nth-child(6) td,
.tableStyled.smiley tr:nth-child(7) td:nth-child(n+1):nth-child(-n+4),
.tableStyled.smiley tr:nth-child(7) td:nth-child(n+7):nth-child(-n+10),
.tableStyled.smiley tr:nth-child(7) td:nth-child(n+13):nth-child(-n+15),
.tableStyled.smiley tr:nth-child(8) td:nth-child(n+1):nth-child(-n+5),
.tableStyled.smiley tr:nth-child(8) td:nth-child(n+7):nth-child(-n+11),
.tableStyled.smiley tr:nth-child(8) td:nth-child(n+13):nth-child(-n+15),
.tableStyled.smiley tr:nth-child(9) td:nth-child(n+1):nth-child(-n+15),
.tableStyled.smiley tr:nth-child(10) td:nth-child(n+1):nth-child(-n+15),
.tableStyled.smiley tr:nth-child(11) td:nth-child(n+2):nth-child(-n+14),
.tableStyled.smiley tr:nth-child(12) td:nth-child(n+2):nth-child(-n+14),
.tableStyled.smiley tr:nth-child(13) td:nth-child(n+3):nth-child(-n+13),
.tableStyled.smiley tr:nth-child(14) td:nth-child(n+4):nth-child(-n+5),
.tableStyled.smiley tr:nth-child(14) td:nth-child(n+11):nth-child(-n+12),
.tableStyled.smiley tr:nth-child(15) td:nth-child(n+6):nth-child(-n+10)
{
background-color:black;
color:black;
}
.tableStyled.smiley tr:nth-child(2) td:nth-child(n+6):nth-child(-n+10),
.tableStyled.smiley tr:nth-child(3) td:nth-child(n+4):nth-child(-n+12),
.tableStyled.smiley tr:nth-child(4) td:nth-child(n+3):nth-child(-n+13),
.tableStyled.smiley tr:nth-child(5) td:nth-child(n+3):nth-child(-n+13),
.tableStyled.smiley tr:nth-child(7) td:nth-child(n+2):nth-child(-n+2),
.tableStyled.smiley tr:nth-child(7) td:nth-child(n+14):nth-child(-n+14),
.tableStyled.smiley tr:nth-child(8) td:nth-child(n+2):nth-child(-n+2),
.tableStyled.smiley tr:nth-child(8) td:nth-child(n+8):nth-child(-n+8),
.tableStyled.smiley tr:nth-child(8) td:nth-child(n+14):nth-child(-n+14),
.tableStyled.smiley tr:nth-child(9) td:nth-child(n+2):nth-child(-n+3),
.tableStyled.smiley tr:nth-child(9) td:nth-child(n+7):nth-child(-n+9),
.tableStyled.smiley tr:nth-child(9) td:nth-child(n+13):nth-child(-n+14),
.tableStyled.smiley tr:nth-child(10) td:nth-child(n+2):nth-child(-n+14),
.tableStyled.smiley tr:nth-child(11) td:nth-child(n+3):nth-child(-n+4),
.tableStyled.smiley tr:nth-child(11) td:nth-child(n+6):nth-child(-n+13),
.tableStyled.smiley tr:nth-child(12) td:nth-child(n+3):nth-child(-n+5),
.tableStyled.smiley tr:nth-child(12) td:nth-child(n+10):nth-child(-n+13),
.tableStyled.smiley tr:nth-child(13) td:nth-child(n+4):nth-child(-n+12),
.tableStyled.smiley tr:nth-child(14) td:nth-child(n+6):nth-child(-n+10)
{
background-color:yellow;
color:yellow;
}
</style>Using svg
We can create a svg included in asciidoc file to draw a table. It gives a lot of possibilities to draw what we need but, it’s a bit difficult to use the svg to code to understand difference wit the reference file. Moreover, the creation of the svg is not easy.
Click to see asciidoc code
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="91" height="91" >
<g id="square">
<rect height="30" width="30" stroke="grey" stroke-width="1">
</g>
<g id="blue_square">
<use xlink:href="#square" fill="blue"/>
</g>
<g id="white_square">
<use xlink:href="#square" fill="white"/>
</g>
<use xlink:href="#white_square" x="0" y="0"/>
<use xlink:href="#white_square" x="0" y="30"/>
<use xlink:href="#white_square" x="0" y="60"/>
<use xlink:href="#white_square" x="30" y="0"/>
<use xlink:href="#white_square" x="30" y="30"/>
<use xlink:href="#white_square" x="30" y="60"/>
<use xlink:href="#white_square" x="60" y="0"/>
<use xlink:href="#white_square" x="60" y="30"/>
<use xlink:href="#white_square" x="60" y="60"/>
<use xlink:href="#blue_square" x="30" y="30"/>
</svg>Graph
Using gnuplot
Gnuplot documentation
Default line style
plot for[col=2:4] "/home/runner/work/documentationtesting/documentationtesting/samples/demo_asciidoc/src/test/docs/data_gnuplot.txt" using 1:col title columnheader(col) with lines
View source
plot for[col=2:4] "{data_file}" using 1:col title columnheader(col) with lines
Line style
set style line 1 linewidth 1 linecolor rgb "blue"
set style line 2 linewidth 10 linecolor rgb "red" pointsize 4 pointtype 7
set style line 3 linewidth 5 linecolor rgb "yellow" pointsize 2 pointtype 5
plot col=2 "/home/runner/work/documentationtesting/documentationtesting/samples/demo_asciidoc/src/test/docs/data_gnuplot.txt" using 1:col title columnheader(col) with lines ls 1, \
col=3 "/home/runner/work/documentationtesting/documentationtesting/samples/demo_asciidoc/src/test/docs/data_gnuplot.txt" using 1:col title columnheader(col) with linespoints ls 2, \
col=4 "/home/runner/work/documentationtesting/documentationtesting/samples/demo_asciidoc/src/test/docs/data_gnuplot.txt" using 1:col title columnheader(col) with linespoints ls 3
View source
set style line 1 linewidth 1 linecolor rgb "blue"
set style line 2 linewidth 10 linecolor rgb "red" pointsize 4 pointtype 7
set style line 3 linewidth 5 linecolor rgb "yellow" pointsize 2 pointtype 5
plot col=2 "{data_file}" using 1:col title columnheader(col) with lines ls 1, \
col=3 "{data_file}" using 1:col title columnheader(col) with linespoints ls 2, \
col=4 "{data_file}" using 1:col title columnheader(col) with linespoints ls 3