Markdown 拡張機能
This page is available in
日本語
(this page),
English, 简体中文.
Contributions in other languages are welcome.
Table of contents
Table of contents
Markdown ファイルに Table of contents、toc、または contents の見出しを追加することで目次を追加できます。
最初に一致した見出しのみが目次を生成します。
## Table of contents## toc## contentsGitHub リポジトリカード
GitHub リポジトリへのリンクを含む動的なカードを追加できます。ページ読み込み時に、リポジトリ情報は GitHub API から取得されます。
::github{repo="<owner>/<repo>"} を使用して GitHub リポジトリカードを作成します。
::github{repo="Yuhanawa/astro-charm"}警告 (Admonitions)
次のタイプの警告がサポートされています: note tip question warning notice important caution danger
ユーザーがざっと目を通すときでも考慮すべき情報を強調表示します。
ユーザーがより成功するのに役立つオプション情報。
ユーザーが自問すべき質問。
潜在的なリスクのためにユーザーの即時注意を要する重要なコンテンツ。
ユーザーが認識すべき情報に注意してください。
ユーザーが成功するために必要な重要な情報。
行動の潜在的な負の結果。
スタイルは caution と似ていますが、アイコンとタイトルが異なります。
:::note
ユーザーがざっと目を通すときでも考慮すべき情報を強調表示します。
:::
:::tip
ユーザーがより成功するのに役立つオプション情報。
:::警告のタイトルはカスタマイズできます。
これはカスタムタイトル付きのメモです。
:::note[カスタムタイトル]
これはカスタムタイトル付きのメモです。
:::GitHub 構文の警告 (Admonitions)もサポートされています。
> [!TIP]
> GitHub 構文の警告 (Admonitions)もサポートされています。ビデオ埋め込み
YouTube や他のプラットフォームから埋め込みコードをコピーして、Markdown ファイルに貼り付けることができます。 または、YouTube や Bilibili のリンクを貼り付けてビデオを埋め込みます。
https://www.youtube.com/watch?v=id と https://youtu.be/id の 2 つの YouTube リンク形式をサポートしています。
Bilibili については、リンク と 【タイトル】 リンク の両方の形式を受け入れます。
ビデオ ID 以外の URL パラメータ（トラッキングパラメータなど）は無視されます。
https://www.youtube.com/watch?v=oZpYEEcvu5I
【【乐正绫AI】《世末歌者》——“我仍然在无人问津的阴雨霉湿之地”【原创PV付】】 https://www.bilibili.com/video/BV1jG4y1C7uv/?share_source=copy_webコードブロック
次の機能をサポートしています。
- 構文のハイライト
- コピーボタン
- 色付き括弧
- デフォルトで有効
- 差分表記
!code ++と!code --を使用して、追加および削除された行をマークします。
- ハイライト表記
- コード内で
!code highlight表記を使用して、ハイライトされた行をマークできます。
- コード内で
- 単語ハイライト表記
- コードスニペットで提供されるメタ文字列に基づいて単語をハイライトします。
- フォーカス表記
- コード内で
!code focus表記を使用して、フォーカスされた行をマークできます。
- コード内で
- エラーレベル表記
- コード内で
!code error!code warning表記を使用して、ハイライトされた行をマークできます。
- コード内で
- メタデータハイライト
- コードスニペットのメタデータで
{1,3-5}を使用して、ハイライトされた行をマークできます。
- コードスニペットのメタデータで
- メタデータ単語ハイライト
- コードスニペットのメタデータで
/word/を使用して、ハイライトされた単語をマークできます。
- コードスニペットのメタデータで
- 表記エスケープの削除
- 表記エスケープを削除します。Markdown で
// [!code]と書きたい場合に便利です。// [\!code ...]式を処理すると、出力に// [!code ...]が表示されます。
- 表記エスケープを削除します。Markdown で
- TypeScript Twoslash
- 明示的なトリガーが必要
参考になるかもしれない情報：shiki transformers
interface Todo {
Todo.title: stringtitle: string
}
const const todo: Readonly<Todo>todo: type Readonly<T> = { readonly [P in keyof T]: T[P]; }Make all properties in T readonlyReadonly<Todo> = {
title: stringtitle: 'Go to bed early'.String.toUpperCase(): stringConverts all the alphabetic characters in a string to uppercase.toUpperCase(),
}
const todo: Readonly<Todo>todo.title = 'Go to bed Right now'.String.toUpperCase(): stringConverts all the alphabetic characters in a string to uppercase.toUpperCase()
var Number: NumberConstructorAn object that represents a number of any kind. All JavaScript numbers are 64-bit floating-point numbers.Number.p- parseFloat
- parseInt
- prototype
NumberConstructor.parseInt(string: string, radix?: number): numberConverts A string to an integer.arseInt('123', 10)
カスタム twoslash メッセージ
const const log: "custom message"log = "custom message"
type type type = "log" | "error" | "warn" | "annotate"type = "log" | "error" | "warn" | "annotate"`// @log message` を使用してカスタムメッセージを作成できますconst const cat_touch_water: stringcat_touch_water = "cat" + "water"`@error` `@warn` `@annotate` もサポートされていますconst const perpetual_motion_machine: stringperpetual_motion_machine = "cat" + "butter"猫は水に触れられませんconst const twoslash: "https://www.typescriptlang.org/dev/twoslash/"twoslash = "https://www.typescriptlang.org/dev/twoslash/"これは不可能です