マークアップマニュアル

テキストの書式

説明	構文	結果
文字をエスケープして処理されないようにする	`\処理されない\`	処理されない
太字	`このテキストは太字です`	このテキストは太字です
斜体	`このテキストは斜体です`	このテキストは斜体です
フォントファミリー	`:[手書きテキスト]{font=cursive}`	手書きテキスト
テキストの色	`:[赤いテキスト]{color=red}`	赤いテキスト
テキストのサイズ	`:[このテキストはサイズ7です]{size=36pt}`	このテキストはサイズ7です
テキストのハイライト	`==このテキストはハイライトされています==`	このテキストはハイライトされています
取り消し線	`~~このテキストには取り消し線が引かれています~~`	~~このテキストには取り消し線が引かれています~~
下線	`++このテキストには下線が引かれています++`	このテキストには下線が引かれています
下付き文字	`H~2~O`	H₂O
上付き文字	`x^2^`	x²

テキストの配置

説明	構文	結果
テキストの回り込み	`:[このテキストは右側に回り込みます]{float=right}`	このテキストは右側に回り込みます
ブロックを左揃えにする	`:::left` `テキスト` `:::`	左
ブロックを右揃えにする	`:::right` `テキスト` `:::`	右
ブロックを中央揃えにする	`:::center` `テキスト` `:::`	中央
折りたたみ（クリックで展開）	`:::spoiler` `スポイラーを表示` `このテキストは折りたたまれています` `:::`	スポイラーを表示このテキストは折りたたまれています
コードブロック	``` `var i = 10;` ```	`var i = 10;`

リンク

説明	構文	結果
リンク	`<https://stocksharp.com/en/>`	https://stocksharp.com/en/
テキスト付きリンク	`[StockSharp サイト](https://stocksharp.com/en/)`	StockSharp サイト
メールリンク	`<info@stocksharp.com>`	info@stocksharp.com
テキスト付きメールリンク	`[メールを送る](mailto:info@stocksharp.com)`	メールを送る
id によるトピックへのリンク	`@topic(12374)`	Assign, install and work with StockSharp Installer.
id によるメッセージへのリンク	`@message(51317)`	Assign, install and work with StockSharp Installer.
id による製品へのリンク	`@product(9)`	Designer
id によるユーザーへのリンク	`@user(1)`	StockSharp
id によるファイルへのリンク	`@file(122179)`	cup.svg
自動リンク（裸の URL が自動的にリンクになる）	`https://stocksharp.com/en/`	https://stocksharp.com/en/

画像

説明	構文	結果
URL による画像	`![](https://stocksharp.com/file/122179/cup_svg/)`
ヒント付き URL による画像	`![](https://stocksharp.com/file/122179/cup_svg/ "これは任意のヒントです。")`
id による画像	`![](122179)`
ヒント付き id による画像	`![](122179 "これは任意のヒントです。")`

画像のサイズ — {style="..."} を使用します。幅 width、高さ height、またはその両方。サイズは通常のテキストで確認できます（表のセル内では画像はセルの幅に制限されます）：

![](122179){style="width:80px"} ![](122179){style="width:200px"}

説明	構文	結果
箇条書き	`- 項目1` `- 項目2` `- 項目3`	項目1 項目2 項目3
番号付き	`1. 項目1` `2. 項目2` `3. 項目3`	項目1 項目2 項目3
英字付き	`a. 項目1` `b. 項目2` `c. 項目3`	項目1 項目2 項目3
ローマ数字付き	`i. 項目1` `ii. 項目2` `iii. 項目3`	項目1 項目2 項目3

見出しとブロック

説明	構文	結果
見出し（レベル 1–6）	`## 見出し` `###### 小さい見出し`	見出し小さい見出し
引用	`> これは引用です`	これは引用です
水平線	`---`
タスクリスト	`- [ ] 未完了` `- [x] 完了`	未完了完了
脚注	`テキスト[^1]` `[^1]: 説明`	テキスト¹

youtube

::iframe{url=https://www.youtube.com/embed/lsbyvqajlZ8}

vimeo

::iframe{url=https://player.vimeo.com/video/60238948}

::iframe{url=https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fstocksharp%2Fposts%2F4554987014515465&width=500}

ダイアグラム

テキストに直接置く Designer のスキームです。サイトがブラウザ上で描画するため、拡大して細部まで見られます（画像ではありません）。スキームは参照で指定するか（サイト上のファイル id かインターネット上のアドレス）、JSON をメッセージに直接貼り付けます。

説明	構文	結果
ファイル id または URL による Designer 図	`@diagram(URL)`	表の下のライブ例を参照
テキスト内に直接スキーム：ファイルやリンクなしのコードブロック内 JSON	```diagram `{"Content":{"Value":{"Scheme":{"Model":{"Nodes":[{"Key":"2","TypeId":"95b3aefe-23fd-4cee-b49e-09764f2ab2e2","X":-350,"Y":-290,"Settings":{"Parameters":{"Name":{"Value":"Security"}}}},{"Key":"3","TypeId":"3d773273-0cee-4d40-8eef-acded2d07ab8","X":-90,"Y":-290,"Settings":{"Parameters":{"Name":{"Value":"TimeFrameCandle"}}}}],"Links":[{"From":"2","FromPort":"Output","To":"3","ToPort":"Security"}]}}}}}` ```	表の下のライブ例を参照

ライブ例（AlgoTrading リポジトリの Designer スキーム）：

インラインスキームのライブ例（同じ JSON をテキスト内に直接記述）：

スキームを取得できなかった場合は、トークンそのものがページに残ります（例：@diagram(122179)）。その id のファイルが無いか、アドレスに到達できないという意味です。

ページのセクション

製品ページやランディングページ向けのブロックです。それぞれがカラムの幅いっぱいに広がり、自動で整形されるため、手作業でレイアウトを組む必要はありません。

説明	構文
2 カラム：画像が左、テキストが右	`:::feature-left` `![](123456)` `### 見出し` `* 項目` `:::`
同じですが、画像が右	`:::feature-right` `…` `:::`
同じものを色付きの帯の上に — 交互に使うと、長いページがセクションの連なりとして読めます	`:::feature-left alt` `…` `:::`
カードのグリッド — `###` ごとに 1 枚のカード	`:::cards` `### 名前` `説明` `:::`
大きな数字の列 — 1 行につき `値 \\| 説明`	`:::stats` `70+ \\| インジケーター` `無料 \\| 価格` `:::`
番号付きのステップ — `###` ごとに 1 ステップ、番号は自動で振られます	`:::steps` `### ダウンロード` `ステップのテキスト` `:::`
ボタン — 各リンクがボタンになり、最初のものが主ボタンです	`:::cta` `[ダウンロード](/ja/products/download/)` `[ドキュメント](https://doc.stocksharp.com/)` `:::`
署名付きの引用 — ダッシュで始まる行が著者になります	`:::quote` `レビューのテキスト。` `— 名前、役職` `:::`
同じ画面のスクリーンショット 2 枚を 1 つの枠に（ライトテーマとダークテーマ）	`:::split` `![](107133)` `![](107134)` `:::`

:::feature-* の中では、最初のメディアブロック（画像、動画、またはスキーム）がイラスト側の半分に入り、それ以外はすべてテキスト側に入ります。:::split のペアもメディアブロックとして扱われるため、1 枚の画像の代わりに :::feature-* の中に置けます。

実際の見た目。 以下は同じブロックを、表ではなくライブで表示したものです。

サイトの言語

テーマ

無料

プラットフォームの価格

カード

見出しの下の短いテキスト。カードは何枚でも作れます — 自動的にグリッドに並びます。

もう 1 枚

カラムの幅は画面に合わせて調整されます：スマートフォンではカードが 1 列に並びます。

3 枚目

カードの中では通常のマークアップが使えます — 太字、斜体、リンク。

最初のステップ

番号は自動で描画され、マークアップには含まれません。

2 番目のステップ

ステップは見出しを書いた順に並びます。

3 番目のステップ

途中にステップを挿入すると、残りの番号は自動で振り直されます。

マークアップは、書き手がレイアウトではなくテキストについて考えられるようなものであるべきです。

ヘルプの議論より

製品カタログドキュメント

サイトのデータ

ページを表示する時点でサイトが自動的に差し込む数値と名称です。手作業で更新する必要はありません。値は常にカタログから取得され、誰かが一度入力した数字ではありません。

説明	構文	結果
コネクタの数	`@connector_count`	74
インジケーターの数	`@indicator_count`	166
ストラテジーの数	`@strategy_count`	867
アプリケーションの数	`@app_count`	8
ユーザーの数	`@user_count`	31,827
ページの言語での製品名 — リンクなしのテキスト	`@product_name(9)`	Designer

数値はページの言語の規則に従い、桁区切り付きで表記されます。値を取得できなかった場合は、トークンそのものがページに残ります（例：@connector_count）。編集者にはすぐ分かり、誤った数字にもなりません。「0 個のコネクタに対応」という文の 0 は事実として読まれてしまいます。

@product_name(NNN) は @product(NNN) と違い、名称だけを挿入してリンクを作りません。文の途中ではこれが必要です。「Designer にはビジュアルなストラテジー設計機能があります」——@product(9) ならリンク Designer になります。