:::div{style="max-width: 100px"} ![image](ipfs://bafkreibwy56ljpiukgxzhfct4eutl5rvllshcbsoaftceodmlorzkbqmgq) ::: This post is to explain and demonstrate the Markdown syntax supported by xLog. If you have any questions or suggestions, feel free to submit an issue or comment. ## Follows GitHub Flavored Markdown (GFM) Specification details: https://github.github.com/gfm Introduction with some advanced usage: https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/quickstart-for-writing-on-github Examples: ### Heading ```md ## Heading level 2 ``` ### Bold ```md **Bold** ``` **Bold** ### Quote ```md > Quote ``` > Quote ### List #### Normal list ```md - list 1 - list 2 ``` - list 1 - list 2 #### Ordered list ```md 1. ordered list 1 1. ordered list 2 ``` 1. ordered list 1 1. ordered list 2 #### Task list ```md - [ ] task list 1 - [x] task list 2 ``` - [ ] task list 1 - [x] task list 2 ### Code ```md `console.log("xLog")` ``` `console.log("xLog")` ```md ```js console.log("xLog") console.log("is the best!") ```\ ``` ```js console.log("xLog") console.log("is the best!") ``` ### Thematic break ```md --- ``` --- ### Link ```md `[link title](url)` ``` [link title](url) ### Image ```md ![image title](ipfs://bafkreiabgixxp63pg64moxnsydz7hewmpdkxxi3kdsa4oqv4pb6qvwnmxa) ``` ![image title](ipfs://bafkreiabgixxp63pg64moxnsydz7hewmpdkxxi3kdsa4oqv4pb6qvwnmxa) ### Italic ```md *Italic* ``` *Italic* ### Autolink https://xlog.app ### Strikethrough ```md ~~Strikethrough~~ ``` ~~Strikethrough~~ ### Table ```md | foo | bar | | --- | --- | | baz | bim | ``` | foo | bar | | --- | --- | | baz | bim | ### Mention To mention someone in xLog, simply use "@" followed by their handle. ```md @xlog ``` @xlog ### Alerts ``` > [!NOTE] > Useful information that users should know, even when skimming content. > [!TIP] > Helpful advice for doing things better or more easily. > [!IMPORTANT] > Key information users need to know to achieve their goal. > [!WARNING] > Urgent info that needs immediate user attention to avoid problems. > [!CAUTION] > Advises about risks or negative outcomes of certain actions. ``` > [!NOTE] > Useful information that users should know, even when skimming content. > [!TIP] > Helpful advice for doing things better or more easily. > [!IMPORTANT] > Key information users need to know to achieve their goal. > [!WARNING] > Urgent info that needs immediate user attention to avoid problems. > [!CAUTION] > Advises about risks or negative outcomes of certain actions. ## Allowed HTML Tags and Attributes See: https://github.com/Crossbell-Box/xLog/blob/main/src/markdown/sanitize-schema.ts For security reasons, only whitelisted HTML tags and attributes are allowed, but this is not set in stone, so if you need other tags or attributes, feel free to submit a pr or issue. Examples: 1. Image centering and sizing ```html

```

2. Side-by-side display ```html

```

3. Colors ```md Redf Orange Yellow Green Blue Purple Pink ``` Redf Orange Yellow Green Blue Purple Pink ## Supports Generic Directives Proposal Specification details: https://talk.commonmark.org/t/generic-directives-plugins-syntax/444 Examples: ```md line1 :br line2 :i[HTML]{class="test"}` => `line1
line2 HTML ``` line1 :br line2 :i[HTML]{title="HyperText Markup Language"} ```md ::video[title]{src=https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4 controls=true}` => `

``` ::video[title]{src=https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4 controls=true} ```md :::div{style="text-align: center"} Centered Content ::: ``` :::div{style="text-align: center"} Centered Content ::: ## Supports Mathematical Expressions This sentence uses `$$` delimiters to show math inline: `$$\sqrt{3x-1}+(1+x)^2$$` $$\sqrt{3x-1}+(1+x)^2$$ > Due to a large number of parsing issues, we have disabled the syntax of using a single "$". To add a math expression as a block, start a new line and delimit the expression with two dollar symbols $$. ```md $$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$ ``` $$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$ ## Built-in components ### Callouts We support five types of callouts. ``` :::note{title="**Hold** on _there_!"} Some **content** with _Markdown_ `syntax`. ::: :::commend Some **content** with _Markdown_ `syntax`. ::: :::warn Some **content** with _Markdown_ `syntax`. ::: :::deter Some **content** with _Markdown_ `syntax`. ::: :::assert Some **content** with _Markdown_ `syntax`. ::: ``` :::note{title="**Hold** on _there_!"} Some **content** with _Markdown_ `syntax`. ::: :::commend Some **content** with _Markdown_ `syntax`. ::: :::warn Some **content** with _Markdown_ `syntax`. ::: :::deter Some **content** with _Markdown_ `syntax`. ::: :::assert Some **content** with _Markdown_ `syntax`. ::: ### Embedding Embedding is very simple, just put the supported URL as a separate line, xLog will handle the rest of the work. #### Tweet ```md https://twitter.com/_xLog/status/1659488404403286016 ``` https://twitter.com/_xLog/status/1659488404403286016 #### YouTube ```md https://www.youtube.com/watch?v=pLBX9vdrtn4 ``` https://www.youtube.com/watch?v=pLBX9vdrtn4 #### GitHub ```md https://github.com/Crossbell-Box/xLog ``` https://github.com/Crossbell-Box/xLog #### Bilibili ```md https://www.bilibili.com/video/BV1H24y1w7B6/ ``` https://www.bilibili.com/video/BV1H24y1w7B6/ #### CodeSandbox ```md https://codesandbox.io/s/react-new ``` https://codesandbox.io/s/react-new #### NetEaseMusic ```md https://music.163.com/playlist?id=26467411 ``` https://music.163.com/playlist?id=26467411 #### Spotify ```md https://open.spotify.com/playlist/0gF2xmTxiBKqtuKWsw2iZG?go=1&sp_cid=131458eb3390e2bf127e485bffd1ec58&nd=1 ``` https://open.spotify.com/playlist/0gF2xmTxiBKqtuKWsw2iZG?go=1&sp_cid=131458eb3390e2bf127e485bffd1ec58&nd=1 ### APlayer Audio tags will be automatically rendered using the APlayer. ```html