www

My personal website(s)
Log | Files | Refs

sandbox.html (25326B)


      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4 <!-- Sep 03, 2024 -->
      5 <meta charset="utf-8" />
      6 <meta name="viewport" content="width=device-width, initial-scale=1" />
      7 <title>Emacs org-mode sandbox</title>
      8 <meta name="author" content="Vincent Demeester" />
      9 <meta name="keywords" content="article" />
     10 <meta name="generator" content="Org Mode" />
     11 <link rel='icon' type='image/x-icon' href='/images/favicon.ico'/>
     12 <meta name='viewport' content='width=device-width, initial-scale=1'>
     13 <link rel='stylesheet' href='/css/new.css' type='text/css'/>
     14 <link rel='stylesheet' href='/css/syntax.css' type='text/css'/>
     15 <link href='/index.xml' rel='alternate' type='application/rss+xml' title='Vincent Demeester' />
     16 <script>
     17   window.MathJax = {
     18     tex: {
     19       ams: {
     20         multlineWidth: '85%'
     21       },
     22       tags: 'ams',
     23       tagSide: 'right',
     24       tagIndent: '.8em'
     25     },
     26     chtml: {
     27       scale: 1.0,
     28       displayAlign: 'center',
     29       displayIndent: '0em'
     30     },
     31     svg: {
     32       scale: 1.0,
     33       displayAlign: 'center',
     34       displayIndent: '0em'
     35     },
     36     output: {
     37       font: 'mathjax-modern',
     38       displayOverflow: 'overflow'
     39     }
     40   };
     41 </script>
     42 
     43 <script
     44   id="MathJax-script"
     45   async
     46   src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
     47 </script>
     48 </head>
     49 <body>
     50 <main id="content" class="content">
     51 <header>
     52 <h1 class="title">Emacs org-mode sandbox</h1>
     53 <p class="subtitle" role="doc-subtitle">A Clean and Comfort Stylesheet</p>
     54 </header><div class="abstract" id="orgc3bc53c">
     55 <p>
     56 
     57 </p>
     58 
     59 <p>
     60 This article serves as a complete demonstration for my <a href="notes.css">org.css</a>, a simple and
     61 clean stylesheet for org-exported HTML file.  You may switch between the default
     62 style provided by Emacs Org mode, i.e., styles specified in the variable
     63 <code>org-html-style-default</code> and my customized stylesheet using the button at the
     64 top left corner.
     65 </p>
     66 
     67 </div>
     68 
     69 <nav id="table-of-contents" role="doc-toc">
     70 <h2>Table of Contents</h2>
     71 <div id="text-table-of-contents" role="doc-toc">
     72 <ul>
     73 <li><a href="#sec:demo">Demo</a>
     74 <ul>
     75 <li><a href="#Title%20with%20TODO"><span class="todo TODO">TODO</span> Title with TODO</a></li>
     76 <li><a href="#Title%20with%20DONE"><span class="done DONE">DONE</span> Title with DONE</a></li>
     77 <li><a href="#Title%20with%20Priority">Title with Priority</a></li>
     78 <li><a href="#Title%20with%20Tag">Title with Tag&#xa0;&#xa0;&#xa0;<span class="tag"><span class="tag0">tag0</span>&#xa0;<span class="tag1">tag1</span></span></a></li>
     79 <li><a href="#Miscellaneous">Miscellaneous</a></li>
     80 </ul>
     81 </li>
     82 <li><a href="#Org-mode%20links">Org-mode links&#xa0;&#xa0;&#xa0;<span class="tag"><span class="emacs">emacs</span></span></a>
     83 <ul>
     84 <li><a href="#Host%20dependent%20link"><span class="todo TODO">TODO</span> Host dependent link</a></li>
     85 <li><a href="#Github%20links">Github links</a></li>
     86 <li><a href="#~man~"><code>man</code></a></li>
     87 <li><a href="#Others">Others</a></li>
     88 </ul>
     89 </li>
     90 <li><a href="#Org-babel">Org-babel</a>
     91 <ul>
     92 <li><a href="#~emacs-lisp~"><code>emacs-lisp</code></a></li>
     93 <li><a href="#~go~"><code>go</code></a></li>
     94 <li><a href="#~http~"><code>http</code></a></li>
     95 <li><a href="#~rust~"><code>rust</code></a></li>
     96 <li><a href="#~typescript~"><code>typescript</code></a></li>
     97 <li><a href="#Ditaa">Ditaa</a></li>
     98 <li><a href="#Graphviz">Graphviz</a></li>
     99 <li><a href="#References%20and%20labels%20%21">References and labels !</a></li>
    100 </ul>
    101 </li>
    102 <li><a href="#Counsel">Counsel</a></li>
    103 <li><a href="#sec:known-issues">Known Issues</a>
    104 <ul>
    105 <li><a href="#sec:dangling-element"><del>Dangling Element</del>&#xa0;&#xa0;&#xa0;<span class="tag"><span class="solved">solved</span></span></a></li>
    106 </ul>
    107 </li>
    108 </ul>
    109 </div>
    110 </nav>
    111 
    112 <p>
    113 Hello <code>world</code> vs <code>world</code> 🙃
    114 </p>
    115 <section id="outline-container-sec:demo" class="outline-2">
    116 <h2 id="sec:demo">Demo</h2>
    117 <div class="outline-text-2" id="text-sec:demo">
    118 <p>
    119 <span class="timestamp-wrapper"><span class="timestamp">&lt;2015-11-09 Mon 14:41&gt;</span></span>
    120 </p>
    121 
    122 <blockquote>
    123 <p>
    124 
    125 </p>
    126 
    127 <p>
    128 <a href="http://orgmode.org/">Org mode</a> is for keeping notes, maintaining TODO lists, planning projects,
    129 and authoring documents with a fast and effective <i>plain-text</i> system
    130 cite:dominik2003-org.
    131 </p>
    132 </blockquote>
    133 
    134 
    135 <p>
    136 We use <a href="https://en.wikipedia.org/wiki/Lorem_ipsum">Lorem ipsum</a> text to demonstrate all elements you would expect to see in
    137 the org-exported HTML pages.  Note however that the <code>.title</code>, <code>.subtitle</code> and
    138 <code>#postamble</code> element are not included in this section.
    139 </p>
    140 </div>
    141 <div id="outline-container-Title%20with%20TODO" class="outline-3">
    142 <h3 id="Title%20with%20TODO"><span class="todo TODO">TODO</span> Title with TODO</h3>
    143 </div>
    144 
    145 <div id="outline-container-Title%20with%20DONE" class="outline-3">
    146 <h3 id="Title%20with%20DONE"><span class="done DONE">DONE</span> Title with DONE</h3>
    147 <div class="outline-text-3" id="text-Title%20with%20DONE">
    148 <p>
    149 Some inactive timestamps
    150 </p>
    151 
    152 <p>
    153 <span class="timestamp-wrapper"><span class="timestamp">[2019-02-20 Wed 12:03] </span></span> With time !
    154 </p>
    155 
    156 <p>
    157 Let&rsquo;s write some stuff between the two !
    158 </p>
    159 
    160 <p>
    161 <span class="timestamp-wrapper"><span class="timestamp">[2019-02-20 Wed] </span></span> Without time
    162 </p>
    163 </div>
    164 </div>
    165 <div id="outline-container-Title%20with%20Priority" class="outline-3">
    166 <h3 id="Title%20with%20Priority">Title with Priority</h3>
    167 </div>
    168 
    169 <div id="outline-container-Title%20with%20Tag" class="outline-3">
    170 <h3 id="Title%20with%20Tag">Title with Tag&#xa0;&#xa0;&#xa0;<span class="tag"><span class="tag0">tag0</span>&#xa0;<span class="tag1">tag1</span></span></h3>
    171 </div>
    172 
    173 <div id="outline-container-Miscellaneous" class="outline-3">
    174 <h3 id="Miscellaneous">Miscellaneous</h3>
    175 <div class="outline-text-3" id="text-Miscellaneous">
    176 <div id="text-table-of-contents-1" role="doc-toc">
    177 <ul>
    178 <li><a href="#Table">Table</a></li>
    179 <li><a href="#List">List</a></li>
    180 <li><a href="#Picture">Picture</a></li>
    181 <li><a href="#Math">Math</a></li>
    182 </ul>
    183 </div>
    184 </div>
    185 <div id="outline-container-Table" class="outline-4">
    186 <h4 id="Table">Table</h4>
    187 <div class="outline-text-4" id="text-Table">
    188 <table>
    189 <caption class="t-above"><span class="table-number">Table 1:</span> Table Caption</caption>
    190 
    191 <colgroup>
    192 <col  class="org-right">
    193 
    194 <col  class="org-right">
    195 
    196 <col  class="org-right">
    197 
    198 <col  class="org-right">
    199 
    200 <col  class="org-right">
    201 
    202 <col  class="org-right">
    203 </colgroup>
    204 <thead>
    205 <tr>
    206 <th scope="col" class="org-right">\(N\)</th>
    207 <th scope="col" class="org-right">\(N^2\)</th>
    208 <th scope="col" class="org-right">\(N^3\)</th>
    209 <th scope="col" class="org-right">\(N^4\)</th>
    210 <th scope="col" class="org-right">\(\sqrt n\)</th>
    211 <th scope="col" class="org-right">\(\sqrt[4]N\)</th>
    212 </tr>
    213 </thead>
    214 <tbody>
    215 <tr>
    216 <td class="org-right">1</td>
    217 <td class="org-right">1</td>
    218 <td class="org-right">1</td>
    219 <td class="org-right">1</td>
    220 <td class="org-right">1</td>
    221 <td class="org-right">1</td>
    222 </tr>
    223 
    224 <tr>
    225 <td class="org-right">2</td>
    226 <td class="org-right">4</td>
    227 <td class="org-right">8</td>
    228 <td class="org-right">16</td>
    229 <td class="org-right">1.4142</td>
    230 <td class="org-right">1.1892</td>
    231 </tr>
    232 
    233 <tr>
    234 <td class="org-right">3</td>
    235 <td class="org-right">9</td>
    236 <td class="org-right">27</td>
    237 <td class="org-right">81</td>
    238 <td class="org-right">1.7321</td>
    239 <td class="org-right">1.3161</td>
    240 </tr>
    241 </tbody>
    242 </table>
    243 </div>
    244 </div>
    245 <div id="outline-container-List" class="outline-4">
    246 <h4 id="List">List</h4>
    247 <div class="outline-text-4" id="text-List">
    248 </div>
    249 <ul class="org-ul">
    250 <li><a id="The%20ordered%20list"></a>The ordered list<br>
    251 <div class="outline-text-5" id="text-The%20ordered%20list">
    252 <ol class="org-ol">
    253 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    254 <li>Donec et massa sit amet ligula maximus feugiat.</li>
    255 <li>Morbi consequat orci et tincidunt sagittis.</li>
    256 </ol>
    257 </div>
    258 </li>
    259 <li><a id="Unordered%20list"></a>Unordered list<br>
    260 <div class="outline-text-5" id="text-Unordered%20list">
    261 <ul class="org-ul">
    262 <li>Aliquam non metus nec elit pellentesque scelerisque.</li>
    263 <li>In accumsan nunc ac orci varius hendrerit.</li>
    264 <li>Suspendisse non eros eu nisi finibus maximus.</li>
    265 </ul>
    266 </div>
    267 </li>
    268 <li><a id="Unordered%20checked%20list%20%5B1%2F3%5D"></a>Unordered checked list <code>[1/3]</code><br>
    269 <div class="outline-text-5" id="text-Unordered%20checked%20list%20%5B1%2F3%5D">
    270 <ul class="org-ul">
    271 <li class="on">&#x2611; Aliquam non metus nec elit pellentesque scelerisque.</li>
    272 <li class="off">&#x2610; In accumsan nunc ac orci varius hendrerit.</li>
    273 <li class="off">&#x2610; Suspendisse non eros eu nisi finibus maximus.</li>
    274 </ul>
    275 </div>
    276 </li>
    277 <li><a id="Definition%20list"></a>Definition list<br>
    278 <div class="outline-text-5" id="text-Definition%20list">
    279 <aside id="org57b22b0">
    280 <p>
    281 This is a side note. If collection is a string, item must also be a string, and is
    282 compared using <code>strings.Contains()</code>. If collection is a Map, contains will succeed if item
    283 is a key in the map.
    284 </p>
    285 </aside>
    286 
    287 <dl class="org-dl">
    288 <dt>Lorem ipsum</dt><dd>dolor sit amet, consectetur adipiscing elit.  Mauris laoreet
    289 sollicitudin venenatis.  Duis sed consequat dolor.</dd>
    290 <dt>Etiam feugiat</dt><dd>pharetra sapien et semper.  Nunc ornare lacus sit amet massa
    291 auctor, vitae aliquam eros interdum.  Mauris arcu ante, imperdiet vel purus
    292 ac, bibendum faucibus diam.  Ut blandit nec mi at ultricies.  Donec eget
    293 mattis nisl.  In sed nibh felis.  Cras quis convallis orci.</dd>
    294 <dt>Sed aliquam</dt><dd>odio sed faucibus aliquam, arcu augue elementum justo, ut
    295 vulputate ligula sem in augue.  Maecenas ante felis, pellentesque auctor
    296 semper non, eleifend quis ante.  Fusce enim orci, suscipit ac dapibus et,
    297 fermentum eu tortor.  Duis in facilisis ante, quis faucibus dolor.  Etiam
    298 maximus lorem quis accumsan vehicula.</dd>
    299 </dl>
    300 </div>
    301 </li>
    302 <li><a id="Drawers"></a>Drawers<br>
    303 <div class="outline-text-5" id="text-Drawers">
    304 <p>
    305 Still outside the drawer
    306 </p>
    307 
    308 <div class='drawer generic'>
    309 <h6>Generic</h6>
    310 <p>
    311 This is inside the drawer.
    312 </p>
    313 </div>
    314 
    315 <p>
    316 And an update 😉
    317 </p>
    318 
    319 <div class='drawer update'>
    320 <h6>Update</h6>
    321 <p>
    322 This is an update :)
    323 </p>
    324 </div>
    325 
    326 <p>
    327 After the drawer.
    328 </p>
    329 
    330 <div class='drawer note'>
    331 <h6>Note</h6>
    332 <p>
    333 This is a note
    334 </p>
    335 </div>
    336 <div class='drawer info'>
    337 <h6>Info</h6>
    338 <p>
    339 This is an info
    340 </p>
    341 </div>
    342 <div class='drawer tip'>
    343 <h6>Tip</h6>
    344 <p>
    345 This is a tip
    346 </p>
    347 </div>
    348 <div class='drawer warning'>
    349 <h6>Warning</h6>
    350 <p>
    351 This is a warning
    352 </p>
    353 </div>
    354 </div>
    355 </li>
    356 </ul>
    357 </div>
    358 <div id="outline-container-Picture" class="outline-4">
    359 <h4 id="Picture">Picture</h4>
    360 <div class="outline-text-4" id="text-Picture">
    361 
    362 <figure id="org6b83ff7">
    363 <img src="./images/sandbox/pic-demo.png" alt="pic-demo.png" class="shadow">
    364 
    365 <figcaption><span class="figure-number">Figure 1: </span>Demo Picture with Caption</figcaption>
    366 </figure>
    367 
    368 <p>
    369 And a really wide picture.
    370 </p>
    371 
    372 
    373 <figure id="org722edde">
    374 <img src="./images/sandbox/long-img.png" alt="long-img.png" width="100%">
    375 
    376 <figcaption><span class="figure-number">Figure 2: </span>A really long picture</figcaption>
    377 </figure>
    378 </div>
    379 </div>
    380 <div id="outline-container-Math" class="outline-4">
    381 <h4 id="Math">Math</h4>
    382 <div class="outline-text-4" id="text-Math">
    383 \begin{align}
    384 \mathcal{F}(a) &= \frac{1}{2\pi i}\oint_\gamma \frac{f(z)}{z - a}\,dz\\
    385 \int_D (\nabla\cdot \mathcal{F})\,dV &=\int_{\partial D}\mathcal{F}\cdot n\, dS
    386 \end{align}
    387 </div>
    388 </div>
    389 </div>
    390 </section>
    391 <section id="outline-container-Org-mode%20links" class="outline-2">
    392 <h2 id="Org-mode%20links">Org-mode links&#xa0;&#xa0;&#xa0;<span class="tag"><span class="emacs">emacs</span></span></h2>
    393 <div class="outline-text-2" id="text-Org-mode%20links">
    394 </div>
    395 <div id="outline-container-Host%20dependent%20link" class="outline-3">
    396 <h3 id="Host%20dependent%20link"><span class="todo TODO">TODO</span> Host dependent link</h3>
    397 <div class="outline-text-3" id="text-Host%20dependent%20link">
    398 <ul class="org-ul">
    399 <li>grep:foo:~/src/github.com/vdemeester</li>
    400 <li>rg:foo:~/src/github.com/vdemeester</li>
    401 </ul>
    402 </div>
    403 </div>
    404 <div id="outline-container-Github%20links" class="outline-3">
    405 <h3 id="Github%20links">Github links</h3>
    406 <div class="outline-text-3" id="text-Github%20links">
    407 <ul class="org-ul">
    408 <li><a hrefl="_blank" href="https://github.com/vdemeester/ape">vdemeester/ape</a></li>
    409 <li><a hrefl="_blank" href="https://github.com/knative/build-pipeline/issues/123">A super PR here</a></li>
    410 <li><a hrefl="_blank" href="https://github.com/knative/build-pipeline/issues/123">knative/build-pipeline#123</a></li>
    411 </ul>
    412 </div>
    413 </div>
    414 <div id="outline-container-~man~" class="outline-3">
    415 <h3 id="~man~"><code>man</code></h3>
    416 <div class="outline-text-3" id="text-~man~">
    417 <ul class="org-ul">
    418 <li><a target="_blank" href="http://man.he.net/?topic=tmux&section=all">tmux</a></li>
    419 <li><a target="_blank" href="http://man.he.net/?topic=git&section=all">git</a></li>
    420 
    421 <li><a target="_blank" href="http://man.he.net/?topic=git-commit&section=all">Manpage for git-commit</a></li>
    422 <li><a href="https://orgmode.org/manual/store_002dlink-protocol.html">The Org Manual: store-link protocol</a></li>
    423 </ul>
    424 </div>
    425 </div>
    426 <div id="outline-container-Others" class="outline-3">
    427 <h3 id="Others">Others</h3>
    428 <div class="outline-text-3" id="text-Others">
    429 <ul class="org-ul">
    430 <li>tag:foo</li>
    431 
    432 <li>orgit:~/src/tektoncd/pipeline</li>
    433 </ul>
    434 </div>
    435 </div>
    436 </section>
    437 <section id="outline-container-Org-babel" class="outline-2">
    438 <h2 id="Org-babel">Org-babel</h2>
    439 <div class="outline-text-2" id="text-Org-babel">
    440 </div>
    441 <div id="outline-container-~emacs-lisp~" class="outline-3">
    442 <h3 id="~emacs-lisp~"><code>emacs-lisp</code></h3>
    443 <div class="outline-text-3" id="text-~emacs-lisp~">
    444 <div class="org-src-container">
    445 <pre class="src src-emacs-lisp">(message "foo is bar")
    446 </pre>
    447 </div>
    448 
    449 <div class='drawer results'>
    450 <h6>Results</h6>
    451 <p>
    452 foo is bar
    453 </p>
    454 </div>
    455 </div>
    456 </div>
    457 <div id="outline-container-~go~" class="outline-3">
    458 <h3 id="~go~"><code>go</code></h3>
    459 <div class="outline-text-3" id="text-~go~">
    460 <div class="org-src-container">
    461 <pre class="src src-go">fmt.Println("Hello, 世界")
    462 </pre>
    463 </div>
    464 
    465 <div class='drawer results'>
    466 <h6>Results</h6>
    467 <p>
    468 Hello, 世界
    469 </p>
    470 </div>
    471 </div>
    472 </div>
    473 <div id="outline-container-~http~" class="outline-3">
    474 <h3 id="~http~"><code>http</code></h3>
    475 <div class="outline-text-3" id="text-~http~">
    476 <div class="org-src-container">
    477 <pre class="src src-http">POST http://httpbin.org/post
    478 Content-Type: application/json
    479 
    480 {
    481   "key": "value"
    482 }
    483 </pre>
    484 </div>
    485 
    486 <div class='drawer results'>
    487 <h6>Results</h6>
    488 <p>
    489 {
    490   &ldquo;url&rdquo;: &ldquo;<a href="http://httpbin.org/post">http://httpbin.org/post</a>&rdquo;,
    491   &ldquo;json&rdquo;: {
    492     &ldquo;key&rdquo;: &ldquo;value&rdquo;
    493   },
    494   &ldquo;headers&rdquo;: {
    495     &ldquo;User-Agent&rdquo;: &ldquo;curl/7.35.0&rdquo;,
    496     &ldquo;Host&rdquo;: &ldquo;httpbin.org&rdquo;,
    497     &ldquo;Content-Type&rdquo;: &ldquo;application/json&rdquo;,
    498     &ldquo;Content-Length&rdquo;: &ldquo;18&rdquo;,
    499     &ldquo;Accept&rdquo;: &ldquo;<b>/</b>&rdquo;
    500   },
    501   &ldquo;form&rdquo;: {},
    502   &ldquo;files&rdquo;: {},
    503   &ldquo;data&rdquo;: &ldquo;{  \&rdquo;key\&ldquo;: \&rdquo;value\&ldquo;}&rdquo;,
    504   &ldquo;args&rdquo;: {}
    505 }
    506 </p>
    507 </div>
    508 </div>
    509 </div>
    510 <div id="outline-container-~rust~" class="outline-3">
    511 <h3 id="~rust~"><code>rust</code></h3>
    512 <div class="outline-text-3" id="text-~rust~">
    513 <div class="org-src-container">
    514 <pre class="src src-rust">fn main() {
    515     let greetings = ["Hello", "Hola", "Bonjour",
    516                      "Ciao", "こんにちは", "안녕하세요",
    517                      "Cześć", "Olá", "Здравствуйте",
    518                      "chào bạn", "您好"];
    519 
    520     for (num, greeting) in greetings.iter().enumerate() {
    521         print!("{} : ", greeting);
    522         match num {
    523             0 =&gt;  println!("This code is editable and runnable!"),
    524             1 =&gt;  println!("Este código es editable y ejecutable!"),
    525             2 =&gt;  println!("Ce code est modifiable et exécutable!"),
    526             3 =&gt;  println!("Questo codice è modificabile ed eseguibile!"),
    527             4 =&gt;  println!("このコードは編集して実行出来ます!"),
    528             5 =&gt;  println!("여기에서 코드를 수정하고 실행할 수 있습니다!"),
    529             6 =&gt;  println!("Ten kod można edytować oraz uruchomić!"),
    530             7 =&gt;  println!("Esse código é editável e executável!"),
    531             8 =&gt;  println!("Этот код можно отредактировать и запустить!"),
    532             9 =&gt;  println!("Bạn có thể edit và run code trực tiếp!"),
    533             10 =&gt;  println!("这段代码是可以编辑并且能够运行的!"),
    534             _ =&gt;  {},
    535         }
    536     }
    537 }
    538 </pre>
    539 </div>
    540 
    541 <div class='drawer results'>
    542 <h6>Results</h6>
    543 <p>
    544 Hello : This code is editable and runnable!
    545 Hola : Este código es editable y ejecutable!
    546 Bonjour : Ce code est modifiable et exécutable!
    547 Ciao : Questo codice è modificabile ed eseguibile!
    548 こんにちは : このコードは編集して実行出来ます!
    549 안녕하세요 : 여기에서 코드를 수정하고 실행할 수 있습니다!
    550 Cześć : Ten kod można edytować oraz uruchomić!
    551 Olá : Esse código é editável e executável!
    552 Здравствуйте : Этот код можно отредактировать и запустить!
    553 chào bạn : Bạn có thể edit và run code trực tiếp!
    554 您好 : 这段代码是可以编辑并且能够运行的!
    555 </p>
    556 </div>
    557 </div>
    558 </div>
    559 <div id="outline-container-~typescript~" class="outline-3">
    560 <h3 id="~typescript~"><code>typescript</code></h3>
    561 <div class="outline-text-3" id="text-~typescript~">
    562 </div>
    563 <div id="outline-container-Execute%20with%20node.js" class="outline-4">
    564 <h4 id="Execute%20with%20node.js">Execute with node.js</h4>
    565 <div class="outline-text-4" id="text-Execute%20with%20node.js">
    566 <div class="org-src-container">
    567 <pre class="src src-typescript">module Greeting {
    568     export class Hello {
    569         constructor(private text : string) {
    570         }
    571         say() :void{
    572             console.log(this.text);
    573         }
    574     }
    575 }
    576 
    577 var hello : Greeting.Hello = new Greeting.Hello("Hello, World!");
    578 hello.say();
    579 </pre>
    580 </div>
    581 
    582 <div class='drawer results'>
    583 <h6>Results</h6>
    584 <p>
    585 Hello, World!
    586 </p>
    587 </div>
    588 </div>
    589 </div>
    590 <div id="outline-container-Transpile" class="outline-4">
    591 <h4 id="Transpile">Transpile</h4>
    592 <div class="outline-text-4" id="text-Transpile">
    593 <p>
    594 You can see transpile results by specifying &ldquo;:wrap SRC js&rdquo; header argument.
    595 </p>
    596 
    597 <div class="org-src-container">
    598 <pre class="src src-typescript">module Greeting {
    599     export class Hello {
    600         constructor(private text : string) {
    601         }
    602         say() :void{
    603             consonle.log(this.text);
    604         }
    605     }
    606 }
    607 
    608 var hello : Greeting.Hello = new Greeting.Hello("Hello, World!");
    609 hello.say();
    610 </pre>
    611 </div>
    612 
    613 <div class='drawer results'>
    614 <h6>Results</h6>
    615 <div class="org-src-container">
    616 <pre class="src src-js">var Greeting;
    617 (function (Greeting) {
    618     var Hello = (function () {
    619         function Hello(text) {
    620             this.text = text;
    621         }
    622         Hello.prototype.say = function () {
    623             console.log(this.text);
    624         };
    625         return Hello;
    626     })();
    627     Greeting.Hello = Hello;
    628 })(Greeting || (Greeting = {}));
    629 var hello = new Greeting.Hello("Hello, World!");
    630 hello.say();
    631 </pre>
    632 </div>
    633 </div>
    634 </div>
    635 </div>
    636 </div>
    637 <div id="outline-container-Ditaa" class="outline-3">
    638 <h3 id="Ditaa">Ditaa</h3>
    639 <div class="outline-text-3" id="text-Ditaa">
    640 <p>
    641 Let&rsquo;s try something with <code>ditaa</code>
    642 </p>
    643 
    644 <div class="org-src-container">
    645 <pre class="src src-ditaa">    +-----------+        +---------+
    646     |    PLC    |        |         |
    647     |  Network  +&lt;------&gt;+   PLC   +&lt;---=---------+
    648     |    cRED   |        |  c707   |              |
    649     +-----------+        +----+----+              |
    650                               ^                   |
    651                               |                   |
    652                               |  +----------------|-----------------+
    653                               |  |                |                 |
    654                               v  v                v                 v
    655       +----------+       +----+--+--+      +-------+---+      +-----+-----+       Windows clients
    656       |          |       |          |      |           |      |           |      +----+      +----+
    657       | Database +&lt;-----&gt;+  Shared  +&lt;----&gt;+ Executive +&lt;-=--&gt;+ Operator  +&lt;----&gt;|cYEL| . . .|cYEL|
    658       |   c707   |       |  Memory  |      |   c707    |      | Server    |      |    |      |    |
    659       +--+----+--+       |{d} cGRE  |      +------+----+      |   c707    |      +----+      +----+
    660          ^    ^          +----------+             ^           +-------+---+
    661          |    |                                   |
    662          |    +--------=--------------------------+
    663          v
    664 +--------+--------+
    665 |                 |
    666 | Millwide System |            -------- Data ---------
    667 | cBLU            |            --=----- Signals ---=--
    668 +-----------------+
    669 </pre>
    670 </div>
    671 
    672 
    673 <figure id="org6ece6fc">
    674 <img src="./images/sandbox/some_filename.png" alt="some_filename.png">
    675 
    676 </figure>
    677 </div>
    678 </div>
    679 <div id="outline-container-Graphviz" class="outline-3">
    680 <h3 id="Graphviz">Graphviz</h3>
    681 </div>
    682 
    683 <div id="outline-container-References%20and%20labels%20%21" class="outline-3">
    684 <h3 id="References%20and%20labels%20%21">References and labels !</h3>
    685 <div class="outline-text-3" id="text-References%20and%20labels%20%21">
    686 <p>
    687 foo is bar
    688 </p>
    689 
    690 <div class="org-src-container">
    691 <pre class="src src-emacs-lisp"><span id="coderef-foo" class="coderef-off">(save-excursion                ;; (foo)</span>
    692   (message "this is baz")
    693 <span id="coderef-bar" class="coderef-off">  (goto-char (point-min))    ;; (bar)</span>
    694 </pre>
    695 </div>
    696 
    697 <p>
    698 In line <a href="#coderef-foo" class="coderef" onmouseover="CodeHighlightOn(this, 'coderef-foo');" onmouseout="CodeHighlightOff(this, 'coderef-foo');">foo</a> we remember the current position. <a href="#coderef-bar" class="coderef" onmouseover="CodeHighlightOn(this, 'coderef-bar');" onmouseout="CodeHighlightOff(this, 'coderef-bar');">Line bar</a> jumps to
    699 point-min.
    700 </p>
    701 
    702 <div class="org-src-container">
    703 <pre class="src src-emacs-lisp"><span id="coderef-sc" class="coderef-off"><span class="linenr">1: </span>(save-excursion</span>
    704 <span class="linenr">2: </span>  (message "this is sparta")
    705 <span id="coderef-jump" class="coderef-off"><span class="linenr">3: </span>  (goto-char (point-min))</span>
    706 </pre>
    707 </div>
    708 
    709 <p>
    710 In line <a href="#coderef-sc" class="coderef" onmouseover="CodeHighlightOn(this, 'coderef-sc');" onmouseout="CodeHighlightOff(this, 'coderef-sc');">1</a> we remember the current position. <a href="#coderef-jump" class="coderef" onmouseover="CodeHighlightOn(this, 'coderef-jump');" onmouseout="CodeHighlightOff(this, 'coderef-jump');">Line 3</a> jumps to point-min.
    711 </p>
    712 </div>
    713 </div>
    714 </section>
    715 <section id="outline-container-Counsel" class="outline-2">
    716 <h2 id="Counsel">Counsel</h2>
    717 <div class="outline-text-2" id="text-Counsel">
    718 <p>
    719 <i>this is italic</i>
    720 <span class="underline">this should be underlined</span>
    721 </p>
    722 </div>
    723 </section>
    724 <section id="outline-container-sec:known-issues" class="outline-2">
    725 <h2 id="sec:known-issues">Known Issues</h2>
    726 <div class="outline-text-2" id="text-sec:known-issues">
    727 <p>
    728 The citation exporter, <code>ox-bibtex</code>, does NOT work seamlessly.  As of <code>Org-mode
    729 8.3.2</code>, I have the following issues.
    730 </p>
    731 </div>
    732 <div id="outline-container-sec:dangling-element" class="outline-3">
    733 <h3 id="sec:dangling-element"><del>Dangling Element</del>&#xa0;&#xa0;&#xa0;<span class="tag"><span class="solved">solved</span></span></h3>
    734 <div class="outline-text-3" id="text-sec:dangling-element">
    735 <p>
    736 The lisp function <code>insert-file-contents</code> used in <code>ox-bibtex</code> does not move point
    737 and insertion-marker to the end of inserted text (I&rsquo;m not sure it is a bug or an
    738 intention).  The result is that the citation is a dangling table not included in
    739 the bibliography div.
    740 </p>
    741 
    742 <p>
    743 The expected result is
    744 </p>
    745 
    746 <div class="org-src-container">
    747 <pre class="src src-html">&lt;div id="bibliography"&gt;
    748   &lt;h2&gt;Bibliography&lt;/h2&gt;
    749   &lt;table&gt;
    750   &lt;!-- Citation content goes here --&gt;
    751   &lt;/table&gt;
    752 &lt;/div&gt;
    753 </pre>
    754 </div>
    755 
    756 <p>
    757 But we got
    758 </p>
    759 
    760 <div class="org-src-container">
    761 <pre class="src src-html">&lt;div id="bibliography"&gt;
    762   &lt;h2&gt;Bibliography&lt;/h2&gt;
    763 &lt;/div&gt;
    764 &lt;table&gt;
    765 &lt;!-- Citation content goes here --&gt;
    766 &lt;/table&gt;
    767 </pre>
    768 </div>
    769 
    770 <p>
    771 Unless a patch is submitted, we may need to manually adjust this weird result.
    772 </p>
    773 </div>
    774 </div>
    775 </section>
    776 </main>
    777 <footer id="postamble" class="status">
    778 <footer>
    779      <small><a href="/" rel="history">Index</a> • <a href="/sitemap.html">Sitemap</a> • <a href="https://dl.sbr.pm/">Files</a></small><br/>
    780      <small class='questions'>Questions, comments ? Please use my <a href="https://lists.sr.ht/~vdemeester/public-inbox">public inbox</a> by sending a plain-text email to <a href="mailto:~vdemeester/public-inbox@lists.sr.ht">~vdemeester/public-inbox@lists.sr.ht</a>.</small><br/>
    781      <small class='copyright'>
    782       Content and design by Vincent Demeester
    783       (<a rel='licence' href='http://creativecommons.org/licenses/by-nc-sa/3.0/'>Some rights reserved</a>)
    784     </small><br />
    785 </footer>
    786 </footer>
    787 </body>
    788 </html>