Advanced Syntax Quick Reference

Recommended reading: xLog flavored Markdown
Those marked with + are special styles of this site

Collapsible Block#

Click me

Just like this

Click me, but open by default

Just like this

<details>
<summary>Click me</summary>
  Just like this
</details>

<details open>
<summary>Click me, but open by default</summary>
  Just like this
</details>

Pinyin#

汉 hàn 字 zì

<ruby>
汉
<rt>hàn</rt>
字
<rt>zì</rt>
</ruby>

Centered Block#

Your clouds are splendid,

Twisting and turning.

The sun and moon shine brightly,

Dawn comes again.

<div style="text-align: center;">

</div>

Comment#

<!--Will not be displayed-->

Line Break#

Line
break

Line<br>break

Horizontal Line#

Markdown:

HTML:

Markdown:

---

***

___

HTML:

<hr>

+Key Style#

Ctrl+Alt+Del

<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd>

Task List#

- [ ] 1st
- [x] 2nd

Font Color#

Miku

<span style="color:#39c5bb">Miku</span>

Background Color#

Tianyi

<span style="background-color:#66ccff;">Tianyi</span>

Vertical Text#

The long wind will break the waves
And the bright moon decorates your window

<span style="writing-mode: vertical-rl;">The long wind will break the waves<br>And the bright moon decorates your window</span>

Escape Characters & Disable Automatic URL and AT Recognition#

https://cloud.sd.cn
@sino
https://www.bilibili.com/video/BV1qH4y1X7KZ/

`https://cloud.sd.cn`
`@sino`
`https://www.bilibili.com/video/BV1qH4y1X7KZ/`

**Hello**
**Hello**

\*\*Hello\*\*
`**Hello**`

Embed Page#

<iframe src="https://xlog.app" seamless width="100%" height="auto" ></iframe>

A Simple Two-Column Layout#

You stand on the bridge looking at the scenery,
While the people in the building above are looking at you.
The bright moon decorates your window,
You decorate others' dreams.
--

<div style="float:left; width: 40%; padding: 0 4%">

You stand on the bridge looking at the scenery,<br>While the people in the building above are looking at you.<br>The bright moon decorates your window,<br>You decorate others' dreams. <br>--<Poem>

</div>
<div style="float:left; width: 40%; padding: 0 4%">

<img src="https://ipfs.crossbell.io/ipfs/Qme355FvYXeLaDxNKWisf3WiwbjDvJo1e7GJKiYFiQKER7?img-quality=75&img-format=auto&img-onerror=redirect&img-width=384">

</div>
<div style="clear:both;"></div>

+Black Screen#

Strange and Weird

<span class="heimu" title="You know too much">Strange and Weird</span>

Footnote#

Thus it can be seen¹

Thus it can be seen[^1]

[^1]: Obviously

Obviously ↩