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.zig
      @@@ #code-snippet-1
      ''' 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.
    ↩︎