Kaku/webdemo/index.html

<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kaku - Kaku (write) is my own markup language</title>
    <style>
        body {
            margin:0;
            padding:0;
            font-family: sans-serif;
        }
        main {
            margin:20px;
            display:grid;
            grid-gap:20px;
            grid-template-columns:auto 2fr;
        }
        textarea {
            height:calc(100vh - 40px);
            position:sticky;
            top:20px;
            border: 2px dotted black;
        }

        pre {
            border: 1px dashed black;
            padding:5px;
            white-space: pre-wrap;
        }
        code {
            font-family: monospace;
        }
    </style>
</head>
<body>
    <main>
        <textarea name="demo1" id="demo" cols="50" rows="20">
# Kaku 書く

Kaku (write) is my own markup language. It's inspired by Markdown with a diferent syntax for quotes, links, images and lists handling, and more. It was created to fit my needs and exists inside my own (link: https://thomasorus.com/ronbun text: CMS).

## Parser

A parser for Kaku built in (link: https://go.dev/ text: Golang) can be found (link: https://git.thomasorus.com/thomasorus/Kaku text: here). It doesn't exists as a go module and must be added into your go project. It can also be built as WASM and used in the browser.

## License

Kaku 書く is a free to use by individuals and organizations that do not operate by capitalist principles. For more information see the (link: LICENSE text: license) file.

----

## Headings

`#` through `######` for heading levels 1 through 6. Each heading gets an auto-generated `id` and a clickable permalink anchor.

```
# Heading level 1
## Heading level 2
###### Heading level 6
```

Renders as:



# Heading level 1
## Heading level 2
###### Heading level 6

```html
<h1 id="heading-level-1">
    Heading level 1
    <a href="#heading-level-1" ...>#</a>
</h1>
```

----

## Basic inline formatting


```
This is *bold*, this is _emphasis_, this is ~strikethrough~, and this is `inline code`.

Or *_~`all at the same time`~_*.
```

Renders as:

This is *bold*, this is _emphasis_, this is ~strikethrough~, and this is `inline code`.

Or *_~`all at the same time`~_*.

```html
<p>This is <strong>bold</strong>, this is <em>emphasis</em>, this is <del>strikethrough</del>, and this is <code>inline code</code>..</p>

<p>Or <strong><em><del><code>all at the same time</code></del></em></strong>.</p>
```

Inline formatting can be combined with links and images (see below).

----

## Horizontal rule

Four dashes on their own line:

```
----
```

Renders as `<hr>`.

----

## Code blocks

Triple backticks, with an optional language right after the opening fence:


```go
func main() {
    fmt.Println("hello")
}
```


Renders as:

```html
<pre><code class="language-go">func main() {
    fmt.Println("hello")
}</code></pre>
```

Content inside a code block is never parsed for other Kaku syntax, everything stays literal.

----

## Lists

### Bullet list

```
- First item
- Second item
- Third item
```

Renders as:

- First item
- Second item
- Third item

```
<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>
```

### Ordered list

```
+ First item
+ Second item
+ Third item
```

Renders as:

+ First item
+ Second item
+ Third item

```html
<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>
```

### Definition list

```html
? Term one : Its definition
? Term two : Its definition
```

Renders as:

? Term one : Its definition
? Term two : Its definition

```html
<dl>
    <dt>Term one</dt>
    <dd>Its definition</dd>
    <dt>Term two</dt>
    <dd>Its definition</dd>
</dl>
```

Lists text supports inline formatting (bold, links, etc.):

- Check out (link: https://example.com text: this link)

----

## Links


```
(link: https://example.com text: Click here)
(link: https://example.com text: Click here title: Hover tooltip)
(link: https://example.com text: Click here label: Accessible label)
```

Renders as:

(link: https://example.com text: Link 1)
(link: https://example.com text: Link 2 title: Hover tooltip)
(link: https://example.com text: Link 3 label: Accessible label)

```html
<a href="https://example.com">Link 1</a>
<a href="https://example.com" title="Hover tooltip">Link 2</a>
<a href="https://example.com" aria-label="Accessible label">Link 3</a>
```

Fields:

- `link: ` (required)
- `text: ` (optional)
- `label: `(optional)
- `title: ` (optional)

Order doesn't matter.

Links also work inline, inside a paragraph or list item. Check out (link: https://example.com text: this inline link) for more info.

----

## Images

All images are rendered inside a `<figure>` tag and renders a `<figcaption>` with the link to the image.

```
(image: demo.jpg alt: A description of the photo)
```

Renders as:

(image: demo.jpg alt: A description of the photo)

```html
<figure>
    <img src="demo.jpg" alt="A description of the photo">
    <figcaption>
    <small>
        <a href="demo.jpg">Full size</a>
    </small>
    </figcaption>
</figure>
```

An optional caption can be added:

```
(image: demo.jpg alt: A description figcaption: An optional caption)
```
Renders as:

(image: demo.jpg alt: A description figcaption: An optional caption)

```html
<figure>
    <img src="demo.jpg" alt="A description of the photo">
    <figcaption>An optional caption |
    <small><a href="/demo.jpg">Full size</a>
    </small>
    </figcaption>
</figure>
```

Fields:

- `image: ` (required)
- `alt: ` (optional)
- `figcaption: ` (optional)

Images work inline too, and can be made clickable by nesting inside a link:

```
(link: https://example.com text: (image: demo.jpg alt: A photo))
```

Renders as:

(link: https://example.com text: (image: demo.jpg alt: A photo))

```html
<figure>
    <a href="https://example.com"><img src="demo.jpg" alt="A photo"></a>
    <figcaption><a href="https://example.com"><small></small></a><small><a href="demo.jpg">Full size</a></small>
    </figcaption>
</figure>
```

----

## Video

Plain video gets standard playback controls.

```
(video: demo.mp4)
```

Renders as:

(video: demo.mp4)

```html
<figure>
    <video controls="" preload="metadata" src="demo.mp4" type="video/mp4"></video>
</figure>
```

Adding `autoplay` makes it behave like a looping, muted, GIF-style clip instead.

```
(video: demo.mp4 autoplay)
```

Renders as:

(video: demo.mp4 autoplay)

```html
<figure>
    <video autoplay="true" playsinline="true" loop="true" muted="true" preload="metadata" src="demo.mp4" type="video/mp4">
    </video>
</figure>
```

----

## Audio

```
(audio: demo.mp3)
```

Renders as :

(audio: demo.mp3)

```html
<audio controls="" preload="metadata" src="demo.mp3" type="audio/mpeg"></audio>
```

----

## Quotes

Simple quote:

```
(quote: A quote can stand on its own.)
```

Renders as:

(quote: A quote can stand on its own.)

```html
<figure>
    <blockquote>A quote can stand on its own.</blockquote>
</figure>
```

A quote can have an author:

```
(quote: With an author. author: Jane Doe)
```

Renders as:

(quote: With an author. author: Jane Doe)

```html
<figure>
    <blockquote>With an author.</blockquote>
    <figcaption>—Jane Doe</figcaption>
</figure>
```

A quote can have an author and a source:

```
(quote: With a source too. author: Jane Doe source: Her Book)
```

Renders as:

(quote: With a source too. author: Jane Doe source: Her Book)

```html
<figure>
    <blockquote>With a source too.</blockquote>
    <figcaption>—Jane Doe, Her Book</figcaption></figure>
```

A quote can have a link on the source.

```
(quote: With a link as well. author: Jane Doe source: Her Book link: https://example.com)
```

Renders as:

(quote: With a link as well. author: Jane Doe source: Her Book link: https://example.com)

```html
<figure>
    <blockquote cite="https://example.com">With a link as well.</blockquote>
    <figcaption>—Jane Doe, <a href="https://example.com">Her Book</a>
    </figcaption>
</figure>
```


Fields:
- `quote :` (required)
- `author :` (optional)
- `source :`(optional)
- `link :`(optional)

----

## Asides

A line wrapped entirely in curly braces becomes a side note:

```
{This is a side note, separate from the main flow of the text.}
```

Renders as:

{This is a side note, separate from the main flow of the text.}

```html
<aside>
    <p>Side note</p>
    This is a side note, separate from the main flow of the text.
</aside>
```

----

## Details / collapsible sections


```
(details: The hidden content goes here. summary: Click to expand)
```

Renders as:

(details: The hidden content goes here. summary: Click to expand)

```html
<details>
    <summary>Click to expand</summary>
The hidden content goes here.
</details>
```

Fields:
- `details` (the hidden content)
- `summary` (the always-visible label)



----

## Todo lists

```
[ ] Not started
[@] In progress
[~] Paused or abandoned
[x] Completed
```

Renders as:

[ ] Not started
[@] In progress
[~] Paused or abandoned
[x] Completed


```html
<ul>
    <li><code aria-hidden="true">[ ]</code><span class="visually-hidden">Opened task</span> Not started</li>
    <li><code aria-hidden="true">[@]</code><span class="visually-hidden">Ongoing task</span> In progress</li>
    <li><code aria-hidden="true">[~]</code><span class="visually-hidden">Paused or abandonned task</span> Paused or abandoned</li>
    <li><code aria-hidden="true">[x]</code><span class="visually-hidden">Completed task</span> Completed</li>
</ul>
```


Consecutive todo lines are grouped into a single list. Each state renders with a visually-hidden accessible label.

----

## Paragraphs


```
Any line that isn't one of the above is treated as regular paragraph text.
Consecutive lines are joined into a single paragraph.

A blank line starts a new one.
```

Renders as:


Any line that isn't one of the above is treated as regular paragraph text.
Consecutive lines are joined into a single paragraph.

A blank line starts a new one.

</textarea>
<article></article>
</main>

<script src="wasm_exec.js"></script>
<script type="module">
const formated = document.querySelector("article");
const textarea = document.querySelector("textarea");

const go = new Go();

const { instance } = await WebAssembly.instantiateStreaming(
    fetch("parser.wasm"),
    go.importObject
);

// Start Go runtime
go.run(instance);

function update() {
    formated.innerHTML = parse(textarea.value);
}

update();

textarea.addEventListener("input", update);
</script>

</body>
</html>