##### Some Simple TapirMD Demos

!  { ><
   :: The page is written in TapirMD (source is available __here__).
   }
       === here :: https://raw.githubusercontent.com/tapirmd/tmd/refs/heads/master/documentation/pages/demos.tmd

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

    === the specification:: specification.tmd

###-

@@@ #section-demo-1
###+++++++++++++++++++++++++++++++++++++++++
    Demo 1 (span styles)

*  ### TapirMD Source
   '''''
   ''''' << #demo-1

*  ### Render Result
   @@@ #demo-1
   {
   **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 $$`.
   }

@@@ #section-demo-2
###+++++++++++++++++++++++++++++++++++++++++
    Demo 2 (line leading marks)

*  ### TapirMD Source
   '''''
   ''''' << #demo-2

*  ### Render Result
   @@@ #demo-2
   {
   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/tmd.png

   Line-height image: ``
   && ./static/image/tmd.png
   }

@@@ #section-demo-3
###+++++++++++++++++++++++++++++++++++++++++
    Demo 3 (link definitions)

*  ### TapirMD Source
   '''''
   ''''' << #demo-3

*  ### Render Result
   @@@ #demo-3
   {
       === Go 101 website :: https://go101.org

   Visit __Go 101 website__ (the link is defined above).

   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
   }

@@@ #section-demo-4
###+++++++++++++++++++++++++++++++++++++++++
    Demo 4 (built-in containers)

*  ### TapirMD Source
   '''''
   ''''' << #demo-4

*  ### Render Result
   @@@ #demo-4
   {
   *. 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/tmd.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 callout box without header.

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

   ?  This is a reveal box without summary.

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



@@@ #section-demo-5
###+++++++++++++++++++++++++++++++++++++++++
    Demo 5 (table)

*  ### TapirMD Source
   '''''
   ''''' << #demo-5

*  ### Render Result
   @@@ #demo-5
   {
   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
   }

@@@ #section-demo-6
###+++++++++++++++++++++++++++++++++++++++++
    Demo 6 (atom blocks)

*  ### TapirMD Source
   '''''
   ''''' << #demo-6

*  ### Render Result
   @@@ #demo-6
   {
   ####### 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!", .{});
}
      '''
   }

@@@ #section-demo-7
###+++++++++++++++++++++++++++++++++++++++++
    Demo 7 (line end spacing)

*  ### TapirMD Source
   '''
   ''' << #demo-7

*  ### Render Result
   @@@ #demo-7
   {

   hello
   world

   hello``
   world

   hello
   ``world

   你好
   世界

   你好 ``
   世界

   hello
   世界

   hello ``
   世界

   hello
   `` 世界
   }

@@@ #section-demo-8
###+++++++++++++++++++++++++++++++++++++++++
    Demo 8 (character escaping)

*  ### TapirMD Source
   '''''
   ''''' << #demo-8

*  ### Render Result
   @@@ #demo-8
   {
   *``* all marks /``/ are escaped *``* ^````.

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

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

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

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

   `` %% This is not a //comment line//.
   }