Markdown Post 정리

Notice

{: .notice} can be added after a sentence

Watch out! This paragraph of text has been emphasized with the {: .notice} class.
{: .notice}

Watch out! This paragraph of text has been emphasized with the {: .notice--primary} class.
{: .notice--primary}

Watch out! This paragraph of text has been emphasized with the {: .notice--info} class.
{: .notice--info}

Watch out! This paragraph of text has been emphasized with the {: .notice--warning} class.
{: .notice--warning}

Watch out! This paragraph of text has been emphasized with the {: .notice--success} class.
{: .notice--success}

Watch out! This paragraph of text has been emphasized with the {: .notice--danger} class.
{: .notice--danger}

YouTube video embed blow

<iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/l2Of1-d5E5o?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

Link

[link](#)

Image

Image in Content

![name](image path)]

Header Image

header:
  image: /assets/images/page-header-image.png
  og_image: /assets/images/page-header-og-image.png

Header overlay Image

header:
  overlay_image: /assets/images/unsplash-image-1.jpg
  overlay_filter: 0.5 # same as adding an opacity of 0.5 to a black background
  overlay_filter: rgba(255, 0, 0, 0.5)
  og_image: /assets/images/page-header-og-image.png
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
  actions:
    - label: "Learn More"
      url: "https://unsplash.com"

Teaser Image

header:
  teaser: /assets/images/page-header-teaser.png
  og_image: /assets/images/page-header-og-image.png

List

1. first item  
  1. first sub item  
  2. second sub item  
2. second item  
  + sub item  
  - sub item  
  + [x] with check  
+ unordered item  
  1. first sub item  
  2. second sub item  
  3. [ ] with check  

Table

| Header1 | Header2 | Header3 |
|:--------|:-------:|--------:|
| cell1   | cell2   | cell3   |
| cell4   | cell5   | cell6   |
|----
| cell1   | cell2   | cell3   |
| cell4   | cell5   | cell6   |
|=====
| Foot1   | Foot2   | Foot3

Header1	Header2	Header3
cell1	cell2	cell3
cell4	cell5	cell6
----
cell1	cell2	cell3
cell4	cell5	cell6
=====
Foot1	Foot2	Foot3

Buttons

<div markdown="0"><a href="#" class="btn">Primary Button</a></div>
<div markdown="0"><a href="#" class="btn btn--success">Success Button</a></div>
<div markdown="0"><a href="#" class="btn btn--warning">Warning Button</a></div>
<div markdown="0"><a href="#" class="btn btn--danger">Danger Button</a></div>
<div markdown="0"><a href="#" class="btn btn--info">Info Button</a></div>

Primary Button

Success Button

Warning Button

Danger Button

Info Button

Side Bar

sidebar:
  - title: "Title"
    image: http://placehold.it/350x250
    image_alt: "image"
    text: "Some text here."
  - title: "Another Title"
    text: "More text here."

Gallery

To place a gallery add the necessary YAML Front Matter:

gallery:
  - url: https://flic.kr/p/8a6Ven
    image_path: https://farm2.staticflickr.com/1272/4697500467_8294dac099_q.jpg
    alt: "Black and grays with a hint of green"
  - url: https://flic.kr/p/8a738X
    image_path: https://farm5.staticflickr.com/4029/4697523701_249e93ba23_q.jpg
    alt: "Made for open text placement"
  - url: https://flic.kr/p/8a6VXP
    image_path: https://farm5.staticflickr.com/4046/4697502929_72c612c636_q.jpg
    alt: "Fog in the trees"

And then drop-in the gallery include — gallery caption is optional.

{% include gallery caption="This is a sample gallery with **Markdown support**." %}

{% include gallery caption="This is a sample gallery with Markdown support." %}