xLog風味のMarkdown

この投稿は、xLog がサポートする Markdown 構文を説明し、デモンストレーションするためのものです。

質問や提案がある場合は、気軽に問題を提出したりコメントしてください。

GitHub フレーバーの Markdown（GFM）に準拠#

いくつかの高度な使用法の紹介: https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/quickstart-for-writing-on-github

例:

見出し#

## 見出しレベル2

太字#

**太字**

太字

引用#

> 引用

引用

リスト#

通常のリスト#

- リスト1
- リスト2

リスト 1
リスト 2

番号付きリスト#

1. 番号付きリスト1
1. 番号付きリスト2

番号付きリスト 1
番号付きリスト 2

タスクリスト#

- [ ] タスクリスト1
- [x] タスクリスト2

タスクリスト 1
タスクリスト 2

コード#

`console.log("xLog")`

console.log("xLog")

```js
console.log("xLog")
console.log("is the best!")
```\

console.log("xLog")
console.log("is the best!")

テーマの区切り#

---

リンク#

`[リンクタイトル](url)`

リンクタイトル

画像#

![画像タイトル](ipfs://bafkreiabgixxp63pg64moxnsydz7hewmpdkxxi3kdsa4oqv4pb6qvwnmxa)

画像タイトル

イタリック#

*イタリック*

イタリック

オートリンク#

https://xlog.app

打ち消し線#

~~打ち消し線~~

~~打ち消し線~~

テーブル#

 | foo | bar |
 | --- | --- |
 | baz | bim |

foo	bar
baz	bim

メンション#

xLog で誰かをメンションするには、単に「@」の後にそのハンドルを使います。

@xlog

@xlog

アラート#

> [!NOTE]
> ユーザーが知っておくべき有用な情報、コンテンツをざっと見るときでも。

> [!TIP]
> より良く、またはより簡単に物事を行うための役立つアドバイス。

> [!IMPORTANT]
> ユーザーが目標を達成するために知っておくべき重要な情報。

> [!WARNING]
> 問題を避けるためにユーザーの即時の注意が必要な緊急情報。

> [!CAUTION]
> 特定の行動のリスクや悪影響についてのアドバイス。

Note

ユーザーが知っておくべき有用な情報、コンテンツをざっと見るときでも。

Tip

より良く、またはより簡単に物事を行うための役立つアドバイス。

Important

ユーザーが目標を達成するために知っておくべき重要な情報。

Warning

問題を避けるためにユーザーの即時の注意が必要な緊急情報。

Caution

特定の行動のリスクや悪影響についてのアドバイス。

許可された HTML タグと属性#

参照: https://github.com/Crossbell-Box/xLog/blob/main/src/markdown/sanitize-schema.ts

セキュリティ上の理由から、ホワイトリストに登録された HTML タグと属性のみが許可されていますが、これは固定されたものではないため、他のタグや属性が必要な場合は、気軽に PR や問題を提出してください。

例:

画像の中央揃えとサイズ設定

<p align="center">
  <img width="100" height="100" src="ipfs://bafkreihvehxsruluqmcd2fgz2kpaklvfltxjvdlja5q5ytaxvvh2ipafbm">
</p>

横並び表示

<p class="flex justify-between">
  <img src="ipfs://bafkreihvehxsruluqmcd2fgz2kpaklvfltxjvdlja5q5ytaxvvh2ipafbm" width="100" height="100" />
  <img src="ipfs://bafkreihvehxsruluqmcd2fgz2kpaklvfltxjvdlja5q5ytaxvvh2ipafbm" width="100" height="100" />
</p>

<span style="color:red">赤</span>
<span style="color:orange">オレンジ</span>
<span style="color:yellow">黄色</span>
<span style="color:green">緑</span>
<span style="color:blue">青</span>
<span style="color:purple">紫</span>
<span style="color:pink">ピンク</span>

赤オレンジ黄色緑青紫ピンク

一般的なディレクティブ提案をサポート#

仕様の詳細: https://talk.commonmark.org/t/generic-directives-plugins-syntax/444

例:

line1 :br line2 :i[HTML]{class="test"}` =>  `line1 <br> line2 <i class="test">HTML</i>

line1
line2 HTML

::video[title]{src=https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4 controls=true}` => `<video src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4" controls="">title</video>

:::div{style="text-align: center"}
中央揃えのコンテンツ
:::

中央揃えのコンテンツ

数学的表現をサポート#

この文は、数式をインラインで表示するために $$ デリミタを使用します: $$\sqrt{3x-1}+(1+x)^2$$ $\sqrt{3x-1}+(1+x)^2$

多くの解析の問題があるため、単一の "$" を使用する構文は無効にされています。

数式をブロックとして追加するには、新しい行を開始し、数式を 2 つのドル記号 $$ で区切ります。

$$\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)$

ビルトインコンポーネント#

コールアウト#

5 種類のコールアウトをサポートしています。

:::note{title="**待って** _そこ_に！"}
いくつかの**コンテンツ**と_Markdown_ `構文`。
:::

:::commend
いくつかの**コンテンツ**と_Markdown_ `構文`。
:::

:::warn
いくつかの**コンテンツ**と_Markdown_ `構文`。
:::

:::deter
いくつかの**コンテンツ**と_Markdown_ `構文`。
:::

:::assert
いくつかの**コンテンツ**と_Markdown_ `構文`。
:::

埋め込み#

埋め込みは非常に簡単で、サポートされている URL を別の行に置くだけで、xLog が残りの作業を処理します。

ツイート#

https://twitter.com/_xLog/status/1659488404403286016

xLog - Write.Own.Earn.

@_xLog

·Follow

✨ Boost your Tweets with xLog's high-performance Tweet components 🚀 It's super easy to use! Just add the Tweet URL as a separate paragraph & let xLog do the magic. Big thanks to @Bird_Eggegg for the incredible contribution!

9:17 AM · May 19, 2023

Read 4 replies

YouTube#

https://www.youtube.com/watch?v=pLBX9vdrtn4

GitHub#

https://github.com/Crossbell-Box/xLog

Github Repo not found

The embedded github repo could not be found…

Bilibili#

https://www.bilibili.com/video/BV1H24y1w7B6/

CodeSandbox#

https://codesandbox.io/s/react-new

NetEaseMusic#

https://music.163.com/playlist?id=26467411

Spotify#

https://open.spotify.com/playlist/0gF2xmTxiBKqtuKWsw2iZG?go=1&sp_cid=131458eb3390e2bf127e485bffd1ec58&nd=1

APlayer#

オーディオタグは APlayer を使用して自動的にレンダリングされます。

<audio src="ipfs://bafybeihjiyr5r6zawpartvqbaqkfbeyyehvz5sk6cvpd7g6ir7cz73yz5q" name="光るなら" artist="Goose house" cover="ipfs://bafkreia4ytkhiqbdxt7kh2x5brhihuuql3vcr6nbrqco2hacgkrahfj4vq" lrc="[00:15.440]雨上がりの虹も (雨过天晴的彩虹)" loop ><audio>

光るなら

Goose house

サポートされているプロパティ:

src
name
artist
cover
lrc
muted
autoplay
loop

DPlayer#

ビデオタグは DPlayer を使用して自動的にレンダリングされます。

<video src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4" controls=""></video>

Mermaid#

ダイアグラム構文: https://mermaid.js.org/

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```\

Mermaid Loading...

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: こんにちは、ジョン、元気ですか？
    loop 健康チェック
        John->>John: ヒポコンドリアと戦う
    end
    Note right of John: 合理的な考えが<br/>勝つ！
    John-->>Alice: 素晴らしい！
    John->>Bob: あなたはどうですか？
    Bob-->>John: とても良いです！
```\

Mermaid Loading...