Some Simple TapirMD Demos
This page presents a few simple demos using TapirMD. For detailed explanations, please refer to the specification.
- Demo 1 (text styles)
- Demo 2 (line leading marks)
- Demo 3 (link definitions)
- Demo 4 (built-in containers)
- Demo 5 (table)
- Demo 6 (atom blocks)
- Demo 7 (line end spacing)
- Demo 8 (character escaping)
Demo 1 (text styles)
**bold text** and ^**dimmed text**. //italic text// and ^//revert italic text//. ::smaller text:: and ^::larger text::. ~~deleted text~~ and invisible text: ^~~unimportant_password~~ (always invisible but selectable). ||marked text|| and ^||marked text with mistake smell||. $$subscript$$ and ^$$superscript$$. This is __a self-defined link``https://go101.org__. This is ^__another self-defined link`` https://ziglang.org__ which will be opened in a new window. This is __a broken link__. 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 text and larger text.
deleted text and invisible text: unimportant_password (always invisible but selectable).
marked text and marked text with mistake smell.
subscript and superscript.
This is a self-defined link. This is another self-defined link which will be opened in a new window. This is a broken link.
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)
The next line is not displayed. Foo %% undisplayed text bar. The answer is: ?? 997 (visible when selected). This block \\ is \\ line-broken \\ several times. \\ The following is an image. && ../../static/image/tmd-v1.png Line-height image: `` && ../../static/image/tmd-v1.png Here are two images floating at both sides. The texts will wrap around them. >> ../../static/image/tmd-v1.png The texts will wrap around them. The texts will wrap around them. The texts will wrap around them. The texts will wrap around them. << ../../static/image/tmd-v1.png The texts will wrap around them. The texts will wrap around them.
The next line is not displayed. Foo bar.
The answer is: 997 (visible when selected).
This block
is
line-broken
several times.
The following is an image.
is
line-broken
several times.
The following is an image.
Line-height image:
Here are two images floating at both sides. The texts will wrap around them.
The texts will wrap around them. The texts will wrap around them. The texts will wrap around them. The texts will wrap around them.
The texts will wrap around them. The texts will wrap around them.
The texts will wrap around them. The texts will wrap around them. The texts will wrap around them. The texts will wrap around them.
The texts will wrap around them. The texts will wrap around them.
Demo 3 (link definitions)
=== 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
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).
No Safe Efficient Ways to Do Three-way String Comparisons in Go (the link is defined below).
Demo 4 (built-in containers)
*. 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.
* ### 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-v1.png
-
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.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 content is explained in the friend block.
| ###
;;; Some explanations.
This is a quotation text.
This content is explained in the friend block.
Some explanations.
! This is a callout box without header.
! ### WARNING!
{
This is a callout box with header.
}
? This is a foldable box without summary.
? ### Why TapirMD?
{
Because traditional markdown formats
have many ambiguities and not powerful enough.
}
This is a callout box without header.
WARNING!
This is a callout box with header.
This is a foldable box without summary.
Why TapirMD?
Because traditional markdown formats have many ambiguities and not powerful enough.
. This is in a vanilla container block,
which has no special styles.
This is in a vanilla container block, which has no special styles.
Demo 5 (table)
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)
####### 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 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)
hello world hello`` world hello ``world 你好 世界 你好 `` 世界 hello 世界 hello `` 世界 hello `` 世界
hello world
helloworld
helloworld
你好世界
你好 世界
hello世界
hello 世界
hello 世界
Demo 8 (character escaping)
*``* 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 an //undisplayed line//.
** 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 an undisplayed line.