📝
Yardエディタの使い方
公開
2024-11-07
文章量
約1893字
このページでは Yard のエディタの使い方を紹介します。
はじめに
Yardは、Notionのようなブロックスタイルのエディタを採用しています。
ブロックには、テキスト、画像、リンク、リスト、テーブルなど様々な要素を指定できます。
どなたでも直感的に、文章の執筆がはじめられます。
基本機能
ブロックメニュー
ブロックの左の + のボタンを押すとコンポーネントの一覧が表示されます。
スラッシュ(/)コマンド
エディタの行の先頭で / を入力するとブロックメニューが現れます。
テキストメニュー
エディタ内の任意のテキストを選択するとテキストの上にメニューが現れます。
選択したテキストに対して、Bold, Italic, Strike, Code, Link などが指定できます。
ブロックのドラッグ&ドロップ
ブロックの左の ⋮⋮ のマークを押すとブロックをドラッグ&ドロップできます。
ショートカット
マークダウン形式のショートかっとも一部サポートしています。
（# → H1 、 ``` → コードブロック 、> → 引用 など）
詳細は、後述します。
ブロック
指定なしの段落
デフォルトのブロックで、プレーンテキストになります。
大見出し / 小見出し
ブロックメニュー内の 大見出し , 小見出し から選択できます。
実際の記事を公開した際に、目次のタイトルにもなります。
ブロックの先頭で# と入力すると 大見出し が、 ## と入力すると 小見出し が選択されます。
リスト
- 箇条書きリスト
- 番号付きリスト
- チェックリスト
の3種類のリストを使えます。
また、ネストすることもできます。
ブロックの先頭で、 - を入力すると箇条書きリストが選択されます。
コードブロック
コードを書く際は、コードブロックが使えます。
記事として公開後に簡単なハイライトもされます。
ブロックの先頭で、 ``` を入力するとコードブロックが選択されます。
def hello_world():
print("hello")
hello_world()引用
引用
ブロックの先頭で、 > を入力すると引用ブロックが選択されます。
区切り線
のような区切りの線を --- を入力し挿入できます。
表
| 列A | 列B | |
| 行1 | 123 | 456 |
メニューからテーブルを追加できます。
行・列の数も追加・削除可能です。
（現時点では、セルの結合は対応していません）
画像
画像の挿入も可能です。
画像のサイズや左右・中央寄せなども指定できます。
テキスト
太字
テキストメニューから B ボタンを選択すると太字になります。
**Bold** のように * 2つで囲んでも太字にできます。
斜体
テキストメニューから I ボタンを選択すると斜字体になります。
*Italic* のように * 1つで囲んでも斜字体にできます。
取り消し線
テキストメニューから S ボタンを選択すると取り消し線になります。
~~Strike~~ のように ~ 2つで囲んでも取り消し線にできます。
コード
テキストメニューから <> ボタンを選択するとコードになります。
Code のように ` 1つで囲んでもコード にできます。
リンク
テキストメニューから 📎 ボタンを選択するとリンクになります。
コンテンツの埋め込み
リンクカード
# URLだけの行
https://yard.tips/toitech/articles/clsobaxlr0001s60gxk6e9gnkX（Twitter）のポスト（ツイート）
# ポストのURLだけの行
https://twitter.com/jack/status/20
# x.comドメインの場合
https://x.com/jack/status/20YouTube
# YouTubeのURLだけの行
https://www.youtube.com/watch?v=WRVsOCh907oSpeaker Deck
# Speaker DeckのURLだけの行
https://speakerdeck.com/recruitengineers/meetup-toitaMarkdown変換
Markdown形式のコピー
エディタの右の M↓ のボタンから 本文をMarkdwon形式でコピー をクリックするとエディタ内のテキストがクリップボードにMarkdown形式でコピーされます。
Markdown形式の取り込み
エディタの右の M↓ のボタンから 本文へMarkdwon形式を取り込む をクリックし現れるフォームにMarkdownを入力し、インポートするとエディタにMarkdownの内容が表示されます。
©︎ 2024 - Yard