Markdownの利用例

1145 views Post
TechTips TechTips運営 @TechTips

TechTipsではMarkdown記法を利用できます。
Markdownの仕様としましては現在CommonMarkへの準拠を目指しています。
ですので、ユーザーの皆様にはCommonMarkに沿った記法を推奨いたします。

なお、以下でご紹介するサンプルの多くは https://daringfireball.net/projects/markdown/syntax から引用しております。

0
Post
Raw
https://www.techtips.page/ja/comments/2
TechTips TechTips運営 @TechTips

Markdownの改行の例です。

改行を入れるには、行末にスペースを2つ入れます。

ココにスペースあり->  
次の文は改行される

以上の記述をすると以下のように表示されます。

ココにスペースあり->
次の文は改行される

注意事項

ココにスペースなし->
次の文は改行されない

以上のような単なる改行は、以下のように、改行されずに表示されます。

ココにスペースなし-> 次の文は改行されない

0
Post
Raw
https://www.techtips.page/ja/comments/3
TechTips TechTips運営 @TechTips

Markdownの段落の例です。

段落を分けるには、間に空行を入れます。

段落1

段落2

以上の記述をすると以下のように表示されます。

段落1

段落2

0
Post
Raw
https://www.techtips.page/ja/comments/4
TechTips TechTips運営 @TechTips

Markdownの強調の例です。

*single asterisks*

**double asterisks**

以上の記述をすると、以下のようにアスタリスク1つで斜体、2つで太字になります。

single asterisks

double asterisks

\*this text is surrounded by literal asterisks\*

なお、以上のようにアスタリスクの前にバックスラッシュを入れてエスケープを行うと、 以下のように記号そのまま（アスタリスク）を表示できます。

*this text is surrounded by literal asterisks*

注意事項

TechTipsでは、現在のところ、以下のような単語中での強調には対応できておりません。

un*frigging*believable

以上の記述をしても以下のように強調されずにそのまま表示されます。

un*frigging*believable

今後対応する予定ですが、それまではこのような
単語中で強調を行う記述はしないようお願いいたします。

0
Post
Raw
https://www.techtips.page/ja/comments/5
TechTips TechTips運営 @TechTips

Markdownの見出しの例です。

# This is an H1

## This is an H2

##### This is an H5

以上の記述をすると以下のように表示されます。

This is an H1

This is an H2

This is an H5

注意事項

  • #の後ろにはスペースを必ず入れて下さい。
  • H5までに留め、H6は利用しないで下さい。なお、これはCommonMarkではなく、TechTipsにおける制約です。
0
Post
Raw
https://www.techtips.page/ja/comments/6
TechTips TechTips運営 @TechTips

Markdownの順序なしリストの例です。

List 1

*   Red
*   Green
*   Blue

List 2

+   Red
+   Green
+   Blue

List 3

-   Red
-   Green
-   Blue

以上の記述をすると以下のように表示されます。

List 1

  • Red
  • Green
  • Blue

List 2

  • Red
  • Green
  • Blue

List 3

  • Red
  • Green
  • Blue
0
Post
Raw
https://www.techtips.page/ja/comments/7
TechTips TechTips運営 @TechTips

Markdownの順序付きリストの例です。

List 4

1.  Bird
2.  McHale
3.  Parish

List 5

1.  Bird
1.  McHale
1.  Parish

以上の記述をすると以下のように表示されます。

List 4

  1. Bird
  2. McHale
  3. Parish

List 5

  1. Bird
  2. McHale
  3. Parish

注意事項

1986. What a great season.

以上のようなとき、以下のように意図せずにリストになる場合がありますのでご注意下さい。

  1. What a great season.

このような場合、以下のようにエスケープすることで意図した通りに表示できます。

1986\. What a great season.

このようにエスケープすることで、以下のようにリストにせずに表示できます。

1986. What a great season.

0
Post
Raw
https://www.techtips.page/ja/comments/8
TechTips TechTips運営 @TechTips

Markdownの水平線の例です。

---

以上の記述をすると以下のように表示されます。

0
Post
Raw
https://www.techtips.page/ja/comments/9
TechTips TechTips運営 @TechTips

Markdownのリンクの例です。

This is [an example](http://example.com/) inline link.
This is [an example][id] reference-style [link][id].

[id]: http://example.com/

以上の記述をすると以下のように表示されます。

This is an example inline link. This is an example reference-style link.

0
Post
Raw
https://www.techtips.page/ja/comments/10
TechTips TechTips運営 @TechTips

Markdownの文中コードの例です。

Use the `printf()` function.

``There is a literal backtick (`) here.``

A single backtick in a code span: `` ` ``

A backtick-delimited string in a code span: `` `foo` ``

以上の記述をすると以下のように表示されます。

Use the printf() function.

There is a literal backtick (`) here.

A single backtick in a code span: `

A backtick-delimited string in a code span: `foo`

0
Post
Raw
https://www.techtips.page/ja/comments/11
TechTips TechTips運営 @TechTips

Markdownのコードブロックの例です。

Code block 1

```
This is a code block.
```

以上の記述をすると以下のように表示されます。

Code block 1

This is a code block.

「```」の後ろに言語名を記述することで、その言語に応じたハイライトを行うことが出来ます。

Code block 2

```ruby
class Foo
  def hello
    puts 'hello'
  end
end
```

以上の記述をすると以下のように表示されます。

Code block 2

class Foo
  def hello
    puts 'hello'
  end
end

なお、TechTipsでは現在コードブロックのハイライトにrougeを利用しています。
このrougeで利用できる言語等の種類の一覧は以下をご覧下さい。
https://github.com/rouge-ruby/rouge/wiki/List-of-supported-languages-and-lexers

「```」で囲うのではなく、スペース4つでインデントを行ってもコードブロックになります。

Code block 3

    <div class="footer">
        2004 Foo Corporation
    </div>

以上の記述をすると以下のように表示されます。

Code block 3

<div class="footer">
    2004 Foo Corporation
</div>
1
Post
Raw
https://www.techtips.page/ja/comments/12
TechTips TechTips運営 @TechTips

Markdownのブロック引用の例です。

Block quote

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
> 
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
> id sem consectetuer libero luctus adipiscing.

以上の記述をすると以下のように表示されます。

Block quote

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

0
Post
Raw
https://www.techtips.page/ja/comments/13
TechTips TechTips運営 @TechTips
最終更新

Markdownの画像表示の例です。

![Alt text 1](https://placecats.com/100/100)

![Alt text 2][id]

[id]: https://placecats.com/200/100

以上の記述をすると以下のように表示されます。

Alt text 1

Alt text 2

0
Post
Raw
https://www.techtips.page/ja/comments/14
TechTips TechTips運営 @TechTips

Markdownエスケープの例です。

- \\   backslash
- \`   backtick
- \*   asterisk
- \_   underscore
- \{\}  curly braces
- \[\]  square brackets
- \(\)  parentheses
- \#   hash mark
- \+   plus sign
- \-   minus sign (hyphen)
- \.   dot
- \!   exclamation mark

以上の記述をすると以下のように表示されます。

  • \ backslash
  • ` backtick
  • * asterisk
  • _ underscore
  • {} curly braces
  • [] square brackets
  • () parentheses
  • # hash mark
  • + plus sign
  • - minus sign (hyphen)
  • . dot
  • ! exclamation mark
0
Post
Raw
https://www.techtips.page/ja/comments/15