##### Some Simple TapirMD Demos

! {><
  :: The page is written in TapirMD (source is available __here__).
  }
  // __here :: https://raw.githubusercontent.com/zig-101/tmd/refs/heads/master/doc/pages/demos.tmd

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

  // __TapirMD:: index.html
  // __the specification:: specification.html

###-

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

# ### TapirMD Source
  ### Render Result
--------------------------
'''''
''''' << #demo-1
@@@ #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
  ### Render Result
--------------------------
'''''
''''' << #demo-2
@@@ #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/sample-image.png
}

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

# ### TapirMD Source
  ### Render Result
--------------------------
'''''
''''' << #demo-3
@@@ #demo-3
{
// __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
}

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

# ### TapirMD Source
  ### Render Result
--------------------------
'''''
''''' << #demo-4
@@@ #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/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.
  }
}



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

# ### TapirMD Source
  ### Render Result
--------------------------
'''''
''''' << #demo-5
@@@ #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
  ### Render Result
--------------------------
'''''
''''' << #demo-6
@@@ #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
. ### code-snippet-1.zig
'''zig
  const std = @import("std");

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

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

# ### TapirMD Source
  ### Render Result
--------------------------
'''
''' << #demo-7
@@@ #demo-7
{

hello
world

hello``
world

hello
``world

你好
世界

你好 ``
世界

hello
世界

hello ``
世界

hello
`` 世界
}

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

# ### TapirMD Source
  ### Render Result
--------------------------
'''''
''''' << #demo-8
@@@ #demo-8
{
*``* 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%%.
}

---

{//
@@@ #note-go101
The **%% Go 101 %%** website is an up-to-date knowledge base for Go programming self learning.
}