AsciiDoc Playground

HTML

Eigene Stylesheets und HTML-Codes können über ein Docinfo File und Passthrough Blocks in das Asciidoc-Document aufgenommen werden.

Details

docinfo.html

<link rel="stylesheet" media="screen" type="text/css" href="file.css" />

Variante: html-Code

++++
<div class=""><p>...</p></div>
++++

Variante: html-Datei

++++
include::file.html[]
++++

Bilanztabelle

1000
100

500
20

CSS

.my-balanceTable {
    box-sizing: border-box;
    overflow: hidden; margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.my-balanceTable, .my-balanceTable .header,
.my-balanceTable .left, .my-balanceTable .right {
    box-sizing: border-box;
}

.my-balanceTable .header {
    text-align: center;
    border-bottom: 1px solid #000;
    padding: 5px;
    font-weight: bold
}

.my-balanceTable .header .leftTitle {
    float: left;
}

.my-balanceTable .header .rightTitle {
    float: right;
}

.my-balanceTable .left {
    float: left; width: 50%; border-right: 1px solid #000;
}

.my-balanceTable .right {
    float: right; width: 50%; text-align: right;
}

.my-balanceTable .left, .my-balanceTable .right {
    padding: 5px; line-height: 1.25em;
}

HTML

<div class="my-balanceTable"  style="width: 400px">
    <div class="header">
        <span class="leftTitle">H</span>
        Bilanz
        <span class="rightTitle">S</span>
    </div>
    <div class="left">
        1000<br />
        100
    </div>
    <div class="right">
        500<br />
        20
    </div>
</div>