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 CMS.

Parser#

A parser for Kaku built in Golang can be found 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.

Demo#

A demo page using the WASM version is available here to play with.

License#

Kaku 書く is a free to use by individuals and organizations that do not operate by capitalist principles. For more information see the 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#

<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~~.

<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:

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

Renders as:

<pre>
  <code class="language-go">func main() {
    fmt.Println("hello")
}</code>
(image: demo.jpg alt: (video: demo.mp4 autoplay figcaption: (audio: demo.mp3)))</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

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

Definition list#

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

Renders as:

Term one: Its definition
Term two: Its definition

<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 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 1 Link 2 Link 3

<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 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:

<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:

A description — An optional caption | Full size

<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:

<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:

<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:

<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 controls="" preload="metadata" src="demo.mp3" type="audio/mpeg"></audio>

Quotes#

Simple quote:

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

Renders as:

A quote can stand on its own.

<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:

With an author.

—Jane Doe

<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:

With a source too.

—Jane Doe, Her Book

<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:

With a link as well.

—Jane Doe, Her Book

<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:

<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:

Click to expand

The hidden content goes here.

<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:

Opened task Not started
Ongoing task In progress
Paused or abandonned task Paused or abandoned
Completed task Completed

<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.