Table of contents (generated automatically using {{ toc }}):

• LaTeX expressions
• D2 diagram
• Mermaid Mindmap
• Pikchr diagram
• Embed YouTube videos & audio files
• Syntax highlighting
• Life Inside Fences
• Callouts
• Image figures
• Other extensions
  • This is a red heading made with the CommonMark attribute syntax
  • East Asian line breaks
  • Escaped space

Hello, world! This is a demo of the Trash website compiler. <- :wastebasket:

To view it properly, you can ask Trash to serve it with live-reloading:

$ cd examples/blog
$ trash serve
Build complete in 324.5177ms.
Server starting on http://localhost:8080
Watching for changes...

All of the following elements can be compiled fully on the server side, serving zero client-side JS!

$LaTeX$ expressions ¶

Given the radius $r$ of a circle, the area $A$ is:

And the circumference $C$ is:

The page will live-reload if you change any of this!

D2 diagram: ¶

Mermaid Mindmap: ¶

Pikchr diagram: ¶

Embed YouTube videos & audio files ¶

…with native Markdown syntax!

Syntax highlighting ¶

Go:

func main() {
    fmt.Println("ok")
}

JavaScript:

"b" + "a" + +"a" + "a"; // -> 'baNaNa'

Callouts ¶

Trash also supports GitHub style callouts:

Image figures ¶

This is an extension of Markdown that allows you to place <figure> elements by typing text below an image:

Notice how we’re appending ?w=100px after the image URL and Trash automatically knows to make it 100px, even though the host doesn’t support it:

![](https://your-image.com/image.png?w=100px)
![alt text](https://example.com/image.png|200 "title")
![alt text|200x300](https://example.com/image.png "title")
![alt text|200px](https://example.com/image.png "title")
![alt text|50%](https://example.com/image.png "title")
![alt text|50%](https://example.com/image.png?align=left "title")

(you might remember this from Obsidian).

Other extensions ¶

This is a red heading made with the CommonMark attribute syntax ¶

Trash fully supports all extensions of GitHub Flavored Markdown (including tables, autolinks, strikethrough text, tasklists, definition lists and footnotes):

• foo
  • bar
  • baz
• bim

This is a test of the typographer extension – this should’ve been an em dash --, «this should be in quotation marks», “this should be in quotes” and this should be an ellipsis…

This is some small subtext.

Use Ctrl + C or ⌘ + C to copy text (<kbd> tag).

You can highlight text by wrapping it in ==.

Twemojis (toggled by emoji.custom in the config):

East Asian line breaks ¶

Soft line breaks are rendered as a newline.

小马宝莉的朋友们
她们一起经历冒险。
トワイライトスパークルと仲間たち
彼女たちは友情の魔法を信じています。
마이리틀포니 친구들
그들은 언제나 우정을 소중히 합니다。

Escaped space ¶

The backslashes before the spaces are rendered as visible spaces instead of collapsing.

小马宝莉朋友们
トワイライトスパークル
마이리틀포니친구들