OurBigBook
editor.html
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Ourbigbook editor demo</title>
<link rel="stylesheet" href="_obb/ourbigbook.css">
<link rel="stylesheet" href="_obb/editor.css">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
background-color: black;
}
#example {
display: none;
}
</style>
</head>
<body>
<div class="ourbigbook-editor"></div>
<div id="example">= Ourbigbook hello world
Welcome to Ourbigbook! Here's the table of contents:
== Paragraphs, code, math
My first paragraph is amazing!
And the second one with inline code `f(){}` and inline server-side rendered maths with KaTeX: $\sqrt{1+1}$.
But if we want block code here it is:
``
f() {
return 1;
}
``
and here is some block maths:
$$
\sqrt{1+1} \\
\sqrt{1+1}
$$
Ciro loves maths, and so equations can have titles, and references to math equations just work! See e.g.: \x[my-favorite-equation]
$$
\newcommand{\va}[1]{\overrightarrow{#1}}
\newcommand{\B}[0]{\va{\mathbf{B}}}
\newcommand{\E}[0]{\va{\mathbf{E}}}
\newcommand{\divergence}[1]{\nabla \cdot #1}
\newcommand{\vacuumPermittivity}[0]{\varepsilon_0}
\divergence{\E} = \frac{\rho}{\vacuumPermittivity} \\
\divergence{\B} = 0
$$
{title=This is my favorite equation in the entire world!!!}
{id=my-favorite-equation}
We try to make anything escapable with a backslash, e.g.:
* literal backslash \\notmacro
* code and math: \` and \$
If you want more than three backticks in your insane code block, you can add more to the open:
````
Here are three backticks:
```
Nice!
````
or you can also use the equivalent sane literals:
\C[[
Here are three backticks:
```
Nice!
]]
== Lists, tables, quotations
Meh, the usual. Insane list:
* first item
* second item
* some nesting
* and some more
* third item
Sane list with explicit `Ul`:
\Ul[
\L[first item]
\L[second item]
]
And now for tables, see this one: \x[table-my-table]. Try clicking next to the headers sort the columns!
\Table
{title=My table}
[
|| String col
|| Integer col
|| Float col
| ab
| 2
| 10.1
| a
| 10
| 10.2
| c
| 2
| 3.4
| c
| 3
| 3.3
]
And a quotation:
\Q[To be or not to be!
Ourbigbook is the answer.]
== References, headers, images
Ciro loves headers and headers!
Reference to a header: \x[paragraphs-code-math].
Make it show the section number as well with `{full}`: \x[paragraphs-code-math]{full}.
The following header is set to be uppercase by default due to the `{c}` (upperCase): \x[ciro-is-awesome]
This one isn't however: \x[dog]. But we can change:
* it to uppercase with `{c}`: \x[dog]{c}
* to plural with `{p}`: \x[dog]{p}
Reference to the following image: \x[image-my-xi-chrysanthemum].
\Image[https://raw.githubusercontent.com/cirosantilli/media/master/Chrysanthemum_Xi_Jinping_with_black_red_liusi_added_by_Ciro_Santilli.jpg]
{title=Xi Chrysanthemum is a very nice image}
{id=image-my-xi-chrysanthemum}
{source=https://commons.wikimedia.org/wiki/File:Lotus_flower_(978659).jpg}
=== Ciro is awesome
{c}
=== Dog
=== Unlimited header levels?!
==== My h4
===== My h5
====== My h6
\H[7][My h7]
\H[8][My h8]
\H[9][My h9]
\H[10][My h10]
\H[11][My h11]
\H[12][My h12]
\H[13][My h13]
= Parent determined by ID!!!
{parent=my-h9}
The parent of this header is determined by specifying it's ID with:
``
{parent=my-h9}
``
rather than by the number of `=` signs of this header.
This means that you don't need to worry about counting header anymore!
And it is much easier to move large chunks of headers around! You only need to change the `{parent=}` of the toplevel one.
This is why when creating large documents, you should use `parent` exclusively.
== Tags
{title2=child and parent arguments}
You can use the `{child}` or `{parent}` arguments of a link to tags headers with the current header.
These will show up on the metadata of a given header.
Note that metadata is only visible when the header is the toplevel header of a page, otherwise it would clutter your headers too much, so it is not very easy to see in this single page example.
But all headers get their own toplevel pages when using split headers: https://docs.ourbigbook.com/split-headers
=== Animal
==== Ant
==== Cow
Oh, and cows are also \x[mammal]{parent}{p}.
==== Flying animal
\x[bat]{child}{c}{p} can fly.
But \x[cat]{p} can't.
==== Mammal
===== Cat
===== Bat
== Mostly testing now I confess
Literal named argument:
``
my nice code
``
{{title=Nice code}}
</div>
<script src="editor.js"></script>
<script src="_obb/ourbigbook.js"></script>
<script src="_obb/ourbigbook_runtime.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/loader.min.js" integrity="sha512-SExj71Cw3B9C9EE8BC/ad3AKia5zQXDj/2SM4THgkeKh5GIFZhKM/R3uclUG8YZwJrjcVhydAlIHmfNvsBCKZA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
const example_elem = document.getElementById('example');
const root_elem = document.getElementsByClassName('ourbigbook-editor')[0];
require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs' }});
require(["vs/editor/editor.main"], () => {
new OurbigbookEditor(root_elem, example_elem.textContent, monaco, ourbigbook, ourbigbook_runtime.ourbigbook_runtime)
})
</script>
</body>
</html>