features · Jun 3, 2015

Quire独自のMarkdown

AI翻訳
· 英語版を見る

スクリーンショット

Markdownという言葉を聞いたことがあるでしょうか。もしあるなら、それは良いことです。Markdownを使えば、Microsoft Wordのようなリッチテキストを、手軽かつ素早く作成できます。ご存じない方のために、作者であるJohn GruberDaring Fireball)による紹介をご覧ください:http://daringfireball.net/projects/markdown/

さて、Markdownについてお伝えしましたが、ここで紹介するのはQuire独自のフレーバーMarkdownです。

QuireのMarkdownは他のフレーバーと何が違うの?

QuireのMarkdownのコア構文は、どこでも見かける標準的なMarkdownと同じです。違いが生まれるのは拡張機能の部分です。

機能 Quire Markdown CommonMark GitHub-flavored Markdown
標準的な見出し・強調・リスト・リンク あり あり あり
#tasknameによるタスク参照 あり(Quire独自) なし なし
@usernameによるユーザーメンション あり(Quire独自) なし あり(GitHub独自)
`{style text}`によるインラインCSSスタイル あり(Quire独自) なし
~text~による取り消し線 あり(シングルチルダ) なし あり(ダブルチルダ)
テーブル あり なし(拡張のみ) あり
チェックリスト - [ ] あり なし あり
シンタックスハイライト付きコードブロック あり(言語タグ付きフェンス) なし あり
HTMLエンティティのパススルー あり あり あり
画像リンク経由のYouTube動画埋め込み あり(Quire独自) なし なし

GitHub-flavored Markdownを使ったことがあれば、その知識の大部分はそのまま活かせます。Quireの追加機能(タスクとユーザーの参照、インラインCSS、動画埋め込み)は置き換えではなく、純粋な追加です。

以下の3つのステップでいくつかの例を確認してみましょう:

任意のタスクを開く → 説明またはコメントを追加(または「編集」をクリック) → 「?」マークをクリック

すると、Markdownリストのポップアップが表示されます:

スクリーンショット

強調を加えたい場合は、*wow!)でイタリック、2つのアスタリスク(wow!)でボールドにできます。

リストを作るには、各項目の前にアスタリスクとスペースを入力するだけです。WordやPagesで行う操作と同じですが、もっと手軽で素早くできます。

まだまだあります!

言葉だけでは表現しきれないこともあります。そんなときは、タスクの説明やコメントに絵文字アイコンが使えます。コロンを入力すると、絵文字の一覧が自動的に表示されます:

スクリーンショット

これで「表現力」が格段にアップします!

次に紹介するのは、きっと役立つ機能です。

特定のタスクを誰かに共有したいときは、@usernameと#tasknameを入力するだけです。入力した文字を含むタスクがすべて表示されるので、目的のものを選ぶだけです。

スクリーンショット

これで、タスクのURLをコピー&ペーストする手間がなくなります。

QuireのMarkdownでできることを確認したところで、以下のチートシートを参考にぜひ試してみてください!


Markdown チートシート

Quire MarkdownでヘッダーはどうやってMarkdownで書くの?

QuireのMarkdownはSetextとAtxの2つのヘッダースタイルをサポートしています。

Setextスタイルのヘッダーは、等号(第1レベルの見出し用)とダッシュ(第2レベルの見出し用)を使います。例:

H1
==
H2
--

Atxスタイルのヘッダーは、行の先頭に1〜6個の#記号を使い、1〜6レベルの見出しを表します。例:

# H1
## H2
### H3
#### H4
##### H5
###### H6

改行

新しい行を作るには、Enterキーを押します。

水平線

3つ以上のハイフン、アスタリスク、またはアンダースコアを入力することで水平線を作れます。間にスペースを入れてもOKです:

***
* * *
- — -
 — — — — — — — — 

Quire Markdownでテキストを強調するには?

強調にはアスタリスクを使います。

イタリックにするには、アスタリスク1つを使います。例:

This is *important*.

ボールドにするには、アスタリスク2つを使います。例:

This is **very important**.

下線

テキストの前後にアンダースコアを1つずつ付けます:

_Underlined text._

取り消し線

テキストの前後にチルダを1つずつ付けます:

~Delete text.~

Quire Markdownでリストを作るには?

Markdownは順序付き(番号付き)リストと順序なし(箇条書き)リストをサポートしています。

順序付きリストは、数字とピリオドを使います:

1. step1
2. step2
3. step3

順序なしリストは:

* item1
* item2
* item3

これは以下と同じです:

+ item1
+ item2
+ item3

また、以下とも同じです:

- item1
- item2
- item3

各項目は複数の段落で構成できます。リスト項目内に段落を追加するには、4つのスペースまたはタブ1つでインデントします:

1. step1
    I'm a paragraph.
2. step2
3. step3

Quire Markdownでリンクを追加するには?

角括弧でリンクテキストを、丸括弧でリンク先URLを囲みます。例:

This is a [Google link](https://www.google.com/)

Markdownはリンクの3つのバリエーションもサポートしています。1つ目はリンクにタイトルを付ける方法です:

[Google link with title](http://google.com/ "Google")

2つ目は参照スタイルのリンクで、リンクのIDを入れる2つ目の角括弧を使います:

I use [Google][id1] more than I use [Yahoo][id2].

その後、テキスト内の任意の場所でリンクIDを定義します:

[id1]: http://google.com/ "Better"
[id2]: http://search.yahoo.com/ "Good"

3つ目は自動リンクです。URLをそのまま書くだけで、Markdownがクリック可能なリンクに変換します:

Google: http://google.com/

Quire Markdownで画像を追加するには?

Markdownはインラインと参照の2つの画像スタイルをサポートしています。

インライン画像の構文は次の通りです:

![alt text](path/to/image.jpg)
![alt text](path/to/image.jpg "Title")

感嘆符、画像のalt属性テキストを入れた角括弧、画像のURLまたはパスを入れた角括弧、そしてダブル引用符で囲んだオプションのタイトル属性を記述します。

参照スタイルの画像構文は次の通りです:

![alt text][id]
[id]: url/to/image.jpg "Title"

このスタイルでは「id」が定義済みの画像参照の名前であり、リンク参照と同じ方法で定義します。

Quire Markdownでテーブルを作るには?

|(パイプ)と-(ハイフン)を使ってテーブルを作成できます。

パイプは各列の区切りに、ハイフンは各列のヘッダー作成に使います。

以下のように入力すると:

| 1st Header | 2nd Header |
| ---------- | ---------- |
| text       | text       |
| text       | text       |

このように表示されます:

1st Header 2nd Header
text text
text text

ヒント:テーブルセル内で改行するには<br>を、セル内に<br>をそのまま表示するには\<br>を使います。

パイプのエスケープ

テーブルセル内でパイプをエスケープしたい場合は、パイプの前に\を付けるだけです。

例えば、以下のように入力すると:

| Left   | Right |
| :------ | ------:|
| A | text A |
| B | text B |
| C | text C \| word C |

このように表示されます:

スクリーンショット

Quire Markdownで引用ブロックを作るには?

引用ブロックは「>」の山括弧を使って示します。

> I'm part of a very long quote. But I'll still be quoted properly when I wrap.

また、山括弧のレベルを重ねることで、引用の中に引用を入れることもできます:

> I'm the first level of quote.
>> I'm the second level of quote.
> I'm back at the first level.

Quire Markdownでチェックリストを作るには?

- [ ]と入力することで独自のチェックリストを作成できます。

- [ ] Checklist item 1
- [ ] Checklist item 2
- [ ] Checklist item 3

Quireのチェックリストでは、項目にチェックを入れることもできます。

犬の散歩に行く
洗濯をする

電話番号

(415) 555-2671
(415)5552671
(415) 555 2671
+14155552671
020 7183 8750
0923-234-7890
09232347890

上記いずれかの形式で電話番号を入力すると、システムが自動的に発信用のハイパーリンクを生成します。

コード

コードのスパンを示すには、バッククォート「`」で囲みます。例:

Use two asterisks `**` for bold.

コード内にバッククォート文字を含める場合は、複数のバッククォートとスペース(開始の後と終了の前に1つずつ)を使います:

Use two asterisks `` `**` `` for bold.

Quire Markdownでコードブロックを作るには?

4つのスペースまたはタブ1つでインデントすることでコードブロックを生成できます:

I'm a normal paragraph.
    I'm a code block.
I'm a normal paragraph.

または、テキストの前後に3つのバッククォートを入力します:

I'm a normal paragraph.
```
I'm a code block.
```
I'm a normal paragraph.

バッククォートの前後で必ず改行することを忘れずに。

Quire Markdownでシンタックスハイライトはどう機能するの?

コードブロックをさらに進化させ、シンタックスハイライトを追加しました。

例えば、コンテンツ言語としてCSSを指定した場合:

```css
h1 {
 font-size: 2.5em;
 font-weight: normal;
}
```

JavaScriptを選んだ場合:

```javascript
var setArray = function(elems) {
 this.length = 0;
 push.apply(this, elems);
 return this;
}
```

選択したコンテンツ言語に応じて、テキストが異なる色で表示されます。これにより、プログラマーや開発者がコードを読みやすくなります。

CSSスタイル

タスクの名前、説明、コメントのテキストに{css-style| text}を使ってCSSスタイルを適用できます。

例えば、以下のように入力すると:

{color: red, font-size:20px|color text}

このように表示されます:

スクリーンショット

特殊文字

HTMLエンティティを使って特殊文字も入力できます。

例えば、以下のように入力すると:

&yen;, &reg;, &#8451; and &#x263B;

このように表示されます:

¥, ®, ℃ and ☻

バックスラッシュエスケープ

\(バックスラッシュ)を使ってテキストを特殊文字で囲むことができ、その文字の通常の意味をエスケープできます。

例えば、単語をアスタリスクで囲みたい場合は、アスタリスクの前にバックスラッシュを使います:

\*literal asterisks\*

すると、このように表示されます:

*literal asterisks*

以下の文字に対してバックスラッシュエスケープをサポートしています:

  • \ バックスラッシュ
  • ` バッククォート
  • * アスタリスク
  • _ アンダースコア
  • {} 波括弧
  • [] 角括弧
  • () 丸括弧
  • # ハッシュ記号
  • + プラス記号
  • - ハイフン
  • . ドット
  • ! 感嘆符

YouTube動画

動画へのリンク付き画像を追加することで、YouTube動画を埋め込めます:

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)

今後もお楽しみに!

Crystal Chen
Content writer, food lover, and aniholic.