Published
Edited
Apr 5, 2021
Importers
1 star
Insert cell
Insert cell
adoc`http://asciidoctor.org[*Asciidoctor*] running on https://opalrb.com[_Opal_] brings AsciiDoc to +++<del>+++Node.js+++</del>+++ the browser!`
Insert cell
adoc`${cheatsheet}`
Insert cell
// Note: by default the first header is not rendered.
// To add this title, add the [float] directive
// See: https://coderwall.com/p/fkjwxg/h1-heading-in-asciidoc-documents-on-github
description = `[float]
= Hello Asciidoctor!

https://asciidoc.org/index.html[AsciiDoc] is a text document format for writing notes, documentation, articles, books, ebooks, slideshows, web pages, man pages and blogs. AsciiDoc files can be translated to many formats including HTML, PDF, EPUB, man page.

See below for a cheat-sheet of the basic markup, https://powerman.name/doc/asciidoc[or check here for a larger summary].

This notebook imports https://asciidoctor.org/docs/asciidoctor.js/#quickstart[Asciidoctor.js], which lets us convert raw AsciiDoc markup into html on the fly. For convenience, it also defines a tagged template function. To use it in your notebooks, run:

[source,javascript]
import {adoc} from "@jobleonard/hello-asciidoctor"

After this you can use the tagged template:`
Insert cell
cheatsheet = `AsciiDoc Mini Cheat Sheet, grabbed from https://asciidoclive.com/[AsciiDocLive]
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

To help you get started, here're some snippets from the
http://powerman.name/doc/asciidoc[AsciiDoc Cheet Sheet^]. Feel free to poke
around :)

Text Styles
^^^^^^^^^^^
* normal, _italic_, *bold*, +mono+.
* normal, ^super^, ~sub~.
* \`passthru *bold*\`

Tables
^^^^^^
.An example table
[options="header,footer"]
|=======================
|Col 1|Col 2 |Col 3
|1 |Item 1 |a
|2 |Item 2 |b
|3 |Item 3 |c
|6 |Three items|d
|=======================

Lists
^^^^^

* Q: How did the programmer die in the shower?
A: He read the shampoo instructions:

. Lather, rinse.
. Repeat.

* There are only 10 kinds of people in this world:
- Those who understand binary.
- Those who don't.

Misc
^^^^

* Code listings:
+
[source,python]
-----------------
#!/usr/bin/env python
import antigravity
try:
antigravity.fly()
except FlytimeError as e:
# um...not sure what to do now.
pass
-----------------

* Quotes:
+
[quote,"Charles Dickens","A Tale of Two Cities"]
It was the best of times, it was the worst of times, it was the age of wisdom,
it was the age of foolishness...

* Links:
** http://asciidoclive.com/[AsciiDocLIVE^] is awesome!

* Images:
+
image:https://i.imgur.com/AEkqoRn.jpg[alt="not bad.",width=128,height=128]

* Videos:
+
video::th_H1gixMEE[youtube]

* Pass-through: pass:[<div align="center"><b>pass through content</b></div>]`
Insert cell
function adoc(strings, ...rest) {
const output = [];
for (let i = 0; i < rest.length; i++) {
output.push(strings[i], rest[i]);
}
output.push(strings[strings.length-1]);
return html`${asciidoctor.convert(output.join(''))}`;
}

Insert cell
asciidoctor = (await require('https://bundle.run/asciidoctor@2.2.2'))()
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more