Kaku 書く#

Kaku 書く (write) is my own markup language. It's inspired by Markdown with a few modification for quotes, links, images and lists handling. It was created to fit my needs and is currently used on this website.

Purpose and mission#

Kaku was created as a replacement for Markdown in my own projects. There are two main reasons for its creation:

1. I don't like some syntax choices of Markdown, for example the use of of square brackets both for images and links.
2. Markdown does not allow using some HTML tags like <video>, <audio> or <dl>.

Syntax#

Typography#

Title 1#

# Title

Will return:

<h1>Title</h1>

Title#

Title 2#

## Title 2

Will return:

<h2>Title 2</h2>

Title 2#

Same for titles 3 to 6...

Bold#

*bold*

Will return:

<strong>bold</strong>

Emphasis#

_emphasis_

Will return:

<em>emphasis</em>

Code#

`code`

Will return:

<code>code</code>

Code Block#

code block

Will return:

<pre>
  <code>code block</code>
</pre>

code block

Strike through#

~strike~

Will return:

<del>strike</del>

Quotes#

Quotes can take up to 4 arguments:

1. The quote itself
2. The author
3. The source of the quote
4. The url of the quote

Example:

(quote: I am the quoted text! author: Author of quote source: Source of quote link: url_of_quote)

Will return:

<figure>
    <blockquote cite="url_of_quote">
        I am the quoted text! 
    </blockquote>
    <figcaption>—Author of quote, <a href="url_of_quote"> Source of quote</a></figcaption>
</figure>

Links#

Links can take up to 3 arguments:

1. The link url
2. The text of the link
3. The text for the accessibility label (optional)
4. The text for the title (optional)

Example:

(link: https://thomasorus.com text: My link text label: My label title: My title)

Will return:

<a href="https://thomasorus.com" aria-label="My label" title="My title">
My link text
</a>

Images#

Images can take up to 3 arguments:

1. The image name or url
2. The image alt text for accessibility
3. The image caption (optionnal, will create a figure and figcaption)

Image with alt text : (image: img_url, alt: the alternate text)

Will return:

(image: sailor.jpeg alt: the alternate text)

Image with caption :

(image: sailor.jpeg alt: the alternate text figcaption: the text under the image)

Will return:

<figure>
     <img src="/sailor.jpeg alt="the alternate text">
     <figcaption>the text under the image</figcaption>
</figure>

Bullet lists#

- AAA
- BBB
- CCC

Will return:

<ul>
    <li>AAA</li>
    <li>BBB</li>
    <li>CCC</li>
</ul>

• AAA
• BBB
• CCC

Ordered lists#

+ Number 1
+ Number 1
+ Number 1

Will return:

<ol>
    <li>Number 1</li>
    <li>Number 2</li>
    <li>Number 3</li>
</ol>

1. Number 1
2. Number 1
3. Number 1

Descriptive lists#

? Term 1 : definition 1
? Term 2 : definition 2

Will return:

<dl>
    <dt>Term 1</dt>
    <dd>definition 1</dd>
    <dt>Term 2</dt>
    <dd>definition 2</dd>
</dl>

Term 1

definition 1

Term 2

definition 2

HR#

----

Will return:

<hr>

Videos and audios#

Videos can take up to 2 arguments:

1. The video name or url (mp3 only for audio)
2. If a video you can add a autoplay parameter to use the video as a gif

Classic video:

(video: sailor-arcade.mp4 figcaption: My figcaption)

Will return:

<video controls="" preload="metadata" src="sailor-arcade.mp4" type="video/mp4"></video>

Video as gif:

(video: sailor-arcade.mp4 autoplay figcaption: My figcaption)

Will return:

<video autoplay="true" playsinline="true" loop="true" mute="true" preload="metadata" src="sailor-arcade.mp4" type="video/mp4"></video>

Audio:

(audio: audioUrl)

Will return:

<audio controls="" preload="metadata" src="audioUrl" type="audio/mpeg"></audio>

Note: all audio and video elements come with the preload="metadata" attribute to help slower connections.

Side note#

{ Some text }

Will return:

<aside>
<p>Side note</p>
Some text
</aside>

Details / Summary#

(details: This is the main text summary: This is the summary)

Will return:

<details>
<summary>This is the summary</summary> 
This is the main text
</details>