Categories

Latest comments

Markdownの利用例

TechTips TechTips運営 @TechTips
Last edited

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
Raw
https://www.techtips.page/en/comments/14

Markdownの利用例

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
Raw
https://www.techtips.page/en/comments/13

Markdownの利用例

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
Raw
https://www.techtips.page/en/comments/12

Markdownの利用例

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
Raw
https://www.techtips.page/en/comments/11

Markdownの利用例

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
Raw
https://www.techtips.page/en/comments/8

Markdownの利用例

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
Raw
https://www.techtips.page/en/comments/7

Markdownの利用例

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
Raw
https://www.techtips.page/en/comments/6

Markdownの利用例

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
Raw
https://www.techtips.page/en/comments/5