Some Simple TapirMD Demos

The page is written in TapirMD (source is available here).

This page presents a few simple demos using TapirMD. For detailed explanations, please refer to the specification.

Demo 1 (span styles)

TapirMD Source Render Result
**bold text** and ^**dimmed text**.

%%italic text%% and ^%%revert italic text%%.

::smaller font size:: and ^::larger font size::.

~~deleted text~~ and invisible text:
^~~invisible text~~ (non-selectable, still occupy space).

||marked text|| and ^||marked text with mistake smell||.

$$subscript$$ and ^$$superscript$$.

This is __a self-defined link``https://go101.org__,
this is __a broken link__,
and this is ^__an underlined text__.

This is a code span: ` var z = foo::x || bar::y `.
And this is a mono font text span:
^` var z = x$$ 2 $$ + y^$$ n $$`.
bold text and dimmed text.

italic text and revert italic text.

smaller font size and larger font size.

deleted text and invisible text: invisible text (non-selectable, still occupy space).

marked text and marked text with mistake smell.

subscript and superscript.

This is a self-defined link, this is a broken link, and this is an underlined text.

This is a code span: var z = foo::x || bar::y. And this is a mono font text span: var z = x2 + yn.

Demo 2 (line leading marks)

TapirMD Source Render Result
A comment line is between the following two words: foo
// comment text
bar.

This block
\\ is
\\ line-broken
\\ several times.
\\ The following is an image.

The answer is:
?? 997
(visible when selected).

&& ./static/image/sample-image.png
A comment line is between the following two words: foo bar.

This block
is
line-broken
several times.
The following is an image.

The answer is: 997 (visible when selected).

Demo 3 (link definitions)

TapirMD Source Render Result
// __Go 101 website ` https://go101.org

Visit __Go 101 website__ (the link is defined above) __#note-go101__.

Go 1.22 broke backwards compatibility. More information
is on __`for` Loop Semantic Changes in Go 1.22:
Be Aware of the Impact__ (the link is defined below).

// __for Loop... :: https://go101.org/blog/2024-03-01-for-loop-semantic-changes-in-go-1.22.html

__No Safe Efficient Ways to Do Three-way String Comparisons in Go__
(the link is defined below).

// __...in Go ~~ https://go101.org/blog/2022-10-01-three-way-string-comparison.html

Visit Go 101 website (the link is defined above) [1].

Go 1.22 broke backwards compatibility. More information is on for Loop Semantic Changes in Go 1.22: Be Aware of the Impact (the link is defined below).

Demo 4 (built-in containers)

TapirMD Source Render Result
*. This is a 1st-level list item (ordered)..
  {
  - This is a 2nd-level list item
  - This is another 2nd-level list item.
  }
  This is still in the 1st-level list item.

*. This is another 1st-level list item (ordered).
  The following is a definition list:
  : ### Term 1
    ;;; Explanations of term 1.
  : ### Term 2
    ;;; Explanations of term 2.

. // force ending of a container

* ### Tab 1
  ;;; Content of tab 1.
  {
    
  Another definition list:
  :. ### Zig
    ;;; A programming language optimized for performance 
        and featuring a robust metaprogramming system.
  :. ### Go
    ;;; A statically-typed programming language with
        dynamic language flexibility and moderate performance.
  }
* ### Tab 2
  ;;; Content of tab 2.
  ;;;
  && ./static/image/sample-image.png
  

> This is a quotation text.
  ;;; a footer
  @@@

> ### This is a quotation block which font looks larger.
  {
  footer line 1
  \\ footer line 2
  }
  @@@

! This is a notice box without header.

! ### WARNING!
  {
  This is a notice box with header.
  }

? This is a reveal box without summary.

? ### Why TapirMD?
  {
  Because traditional markdown formats
  have many ambiguities and not powerful enough.
  }
  1. This is a 1st-level list item (ordered)..
    • This is a 2nd-level list item
    • This is another 2nd-level list item.
    This is still in the 1st-level list item.

  2. This is another 1st-level list item (ordered). The following is a definition list:
    Term 1
    Explanations of term 1.
    Term 2
    Explanations of term 2.

Content of tab 1.

Another definition list:
Zig
A programming language optimized for performance and featuring a robust metaprogramming system.
Go
A statically-typed programming language with dynamic language flexibility and moderate performance.
Content of tab 2.

This is a quotation text.
a footer

This is a quotation block which font looks larger.
footer line 1
footer line 2

This is a notice box without header.

WARNING!
This is a notice box with header.

This is a reveal box without summary.

Why TapirMD?
Because traditional markdown formats have many ambiguities and not powerful enough.

Demo 5 (table)

TapirMD Source Render Result
A table (row-major):

# ;;; 11
  {..2:2
  22
  }
  {..2:1
  21
  }
  -----
  ;;; 11
  {:3
  13
  }
  ;;; 11
  ---------
  {..4
  31
  }
  {..1:2
  12
  }
  ---------
  ;;; 11
  ;;; 11
  ;;; 11

Another table (column-major):

#
  ;;; 11
  {..2:2
  22
  }
  {..2:1
  21
  }
  -----
  ;;; 11
  {:3
  13
  }
  ;;; 11
  ---------
  {..4
  31
  }
  {..1:2
  12
  }
  ---------
  ;;; 11
  ;;; 11
  ;;; 11
A table (row-major):

11
22
21
11
13
11
31
12
11
11
11

Another table (column-major):

11
11
31
11
22
11
11
21
13
11
12

Demo 6 (atom blocks)

TapirMD Source Render Result
####### Header 1 %%::(for titles generally)

###====== Header 2

###++++++ Header 3

###------ Header 4

This is a usual block. Nothing special.

;;; This is also a usual block.
The below is a horizontal line.

---

@@@ This is an attributes block. 
@@@ The texts here must be of 
@@@ certain formats to be meaningful.
@@@ We can specify ID and classes
@@@ for the next sibling block here.

@@@ #code-snippet-1
. ### code-snippet-1.zig
'''zig
  const std = @import("std");

  pub fn main() void {
    std.log.info("TMD, yes!", .{});
  }
'''

Header 1 (for titles generally)

Header 2

Header 3

Header 4

This is a usual block. Nothing special.

This is also a usual block. The below is a horizontal line.


code-snippet-1.zig
  const std = @import("std");

  pub fn main() void {
    std.log.info("TMD, yes!", .{});
  }

Demo 7 (line end spacing)

TapirMD Source Render Result

hello
world

hello``
world

hello
``world

你好
世界

你好 ``
世界

hello
世界

hello ``
世界

hello
`` 世界

hello world

helloworld

helloworld

你好世界

你好 世界

hello世界

hello 世界

hello 世界

Demo 8 (character escaping)

TapirMD Source Render Result
*``* all marks %``% are escaped *``* ^````.

!! ** all marks %% are escaped ** ``.

Backticks in code span: `^``code^```

Backticks in code span: `
!! `code`
`

`` ! This is not a **notice box**.

`` // This is not a %%comment line%%.
** all marks %% are escaped ** ``.

** all marks %% are escaped ** ``.

Backticks in code span: `code`

Backticks in code span: `code`

! This is not a notice box.

// This is not a comment line.


  1. The Go 101 website is an up-to-date knowledge base for Go programming self learning.
    ↩︎