끼요우헹

끼요우헹

#코딩 #경영

Markdown 문법

업데이트:

jekyll 블로그에 사용될 마크다운 문법을 알아보자

1. 제목(Header)

#*n title (n = int, 1~6) #을 붙여서 제목의 수준을 선택한다.

  • # 다음에는 반드시 공백이 필요하다.
  • #이 많아질수록 상위 수준에서 하위 수준으로 내려간다.
  • # H1부터 H6이 존재하며, #를 7개 사용하면 일반 텍스트로 인식한다.

H1 code is

# H1 code is

H2 code is

## H2 code is

H3 code is

### H3 code is

H4 code is

#### H4 code is
H5 code is
##### H5 code is
H6 code is
###### H6 code is

2. 줄바꿈

2.1. 문단(Paragraphs)

Enter 사용

가나다

마바사

가나다

라마바

가나다 라마바

가나다
라마바

2.2. Line Breaks

Space(공백) 2번 이상 사용

가나다
마바사

가나다(space)(space)
마바사

3. 코드(Code)

`(backtick) 또는 ~(tilde) 3개 이상 사용하거나, 4칸을 띈다.

```
code blcok
```

    code blcok

3.1 Inline Code Block

라인 안에 Code를 삽입해서 보여준다.

라인 안에 `Code`를 삽입해서 보여준다.

3.2. 코드 강조(Syntax Highlighting)

처음 시작하는 ``` 뒤에 강조할 언어1를 적는다.

```python
print("Hello, world!")
```
  • 기본 Code Block 
    print("Hello, world!")
  • Python Code Block 
    print("Hello, world!")
  • C Code Block 
    print("Hello, world!")

4. 강조(Emphasis)

4.1. 기울임(Italic)

Italic is *Italic* or _Italic_

4.2. 굵게(Blod)

Bold is **Bold** or __Bold__

  • 두가지 방법 중 *를 사용하는게 좋다. 중간에 있는 글자를 강조하게 될 때 ‘가나다라마바사’(가나***다라마***바사)와 같이 *(Asterisk)를 사용하면 원하는 결과를 얻을 수 있다. 하지만 ‘가나__다라마__바사’(가나___다라마___바사)처럼 _(Underscore)를 사용하면 원하지 않은 결과가 출력된다.

4.3. 취소(Cancleline)

Cancleline is ~~Cancleline~~

5. 인용(Blockquote)

>를 활용해 인용 수준을 결정한다.

가나 다라

마바

사아

자차

차카

타

파

  • Code

      >가나
  >다라
  >
  >>마바
  >>>사아
  >>>>자차
  >>
  >>>차카
  >>>>>>타
  >
  >파

6. 목록(List)

6.1. 순서 목록(Ordered List)

숫자를 활용한다.

  1. 가
  2. 나
  3. 다
  4. 라
  5. 마

  6. 바

    1.사 2.아 6.자

  7. 카
  8. 타

  • Code

      1. 가
  2. 나
  3. 다
  5. 라
  9. 마
  1. 바
      1.사
      2.아
      6.자
  0. 카
  2. 타

6.2. 순서가 없는 목록(Unordered List)

+(Plus)와 -(Dashe) 그리고 *(Asterisk)를 활용한다.

  • 호환성을 위해 하나를 선택해서 사용하는 것이 바람직하다.

  • 가
  • 다
  • 라
    • 마
    • 바 사
      • 아
      • 자

        차

      • 카

  • code

      - 가
  * 다
  + 라
      + 마
      - 바
      사
          - 아
          * 자
              > 차
          - 카

7. 수평선(Horizontal Rule)

3개 이상의 -(Underscore) 또는 -(Dashe) 또는 *(Asterisk) 사용

e.g.

  • Code

      ---

8. 표(Table)

|(Pipe)를 활용해 표를 구성한다.

ABCDE FGHIJ KLMNO PQRST
가 나 다 라
마 바 사 |

  • Code

      | ABCDE | FGHIJ | KLMNO | PQRST |
  | --- | :--- | :---: | ---: |
  | 가 | 나 | 다 | 라 |
  | 마 | 바 | 사 | | |

  • 정렬(Alignment)

    • 기본 정렬: ---
    • 좌측 정렬: :---
    • 가운데 정렬: :---:
    • 우측 정렬: ---:
  • 표 안에서 |(Pipe) 사용 방법: HTML character code | 사용
  • Table Generator를 활용해서 간편하게 만들 수 있다.

9. 링크(Link)

  1. 링크(Link)
    https://kkiyou.github.io is <https://kkiyou.github.io>

  2. 하이퍼링크(Hyperlink)
    Blog Link is [Blog Link](https://kkiyou.github.io)

  3. 타이틀 추가해서 링크 걸기(Adding titles to hyperlink)
    Blog Link is [Blog Link](https://kkiyou.github.io "The world best blog")
    • 링크에 마우스 커서를 올려두면 링크 내용 말풍선으로 보여줌

  4. 레퍼런스 링크(Reference-style Links)
    Blog Link
    github

    • Code

        [Blog Link] [1]  
  [github] [2]

  [1]: https://kkiyou.github.io "The world best blog"
  [2]: https://github.com

10. 이미지(Image)

10.1. 저장된 이미지 + titles

![텍스트](이미지경로.파일확장자 "tooltip")

![Github Mark](/assets/.../markdown-2020-09-14.png "GitHub Mark")

Github Mark

10.2. 링크 이미지

![텍스트](URL)

![GitHub Mark](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png){: width="120px" height="120px"}

GitHub Mark

10.3. 이미지 + Hyperlink + titles

[![Text](URL)](URL "pop-up")

  • 이것을 분해해서 보면 하이퍼링크를 만드는 형식 [Text][URL]에서 [Text]부분에 이미지를 만드는 형식 을 ![Text](URL)집어넣은 것이다.
[![GitHub Mark](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png "GitHub Mark")

GitHub Mark

11. 바로가기(Linking to Heading IDs)

바로가기로 설정할 것에 [Heading IDs](#heading-ids)
도달하는 위치에 <a id="heading-ids"></a>

Home

12. 체크 리스트(Task List)

  • 가나다

  • 마바사

  • Code

      - [x] 가나다
  - [ ] 마바사

13. 미주(Footnote)

kkiyou 2

  • Code 
      kkiyou [^des]

  [^des]: blog author

14. 주석(comment)

<!-- Invisible Comment --> 또는 {::comment} 사용
<!-- -->이 보다 직관적이다.

{::comment}
Invisible Area
{:/comment}

<!-- Invisible Comment -->
  • VS CODE 사용 시 주석 생성 단축키 command + /

15. 기타

15.1. 이미지 크기 조절

![텍스트](URL){: width="sizepx" height="sizepx"}

15.2. 정의(Definition List)

word
: definition1
: definition2

words
means
설명
  • Code 
    words
: means
: 설명

15.3. 말풍선(Tooltip)

*[word]: description을 활용한다.

  • 툴팁은 글 전체에 적용되므로 동일한 단어가 글 내에 있다면 같은 단어 전부 툴팁이 적용된다.
  • 툴팁을 정의하는 위치에 따라 결과가 달리지지 않는다. 즉 어디에 위치하던 동일한 결과를 출력한다.
  • e.g. WACC는 기업이 부채, 우선주, 보통주, 유보이익 등을 활용해 자본을 확충할 때 필요한 조달비용을 가중평균한 가중평균자본비용이다.

15.4. 이모지(Emoji)

이모지 복사 붙여넣기(Site)

❤️ 🥕

15.5. 글자 색상(Text color)

HTML 태그 활용 <span style="color:color">text</span>

가나다라
마바사아
자차카타

  • Code 
    <span style="color:red">가나다라</span>
<span style="color:#d3d3d3">마바사아</span>
<span style="color:rgb(245, 235, 13)">자차카타</span>

15.6. 버튼(Button)

Link를 만든 뒤 버튼 형식 추가

Default [Default](link){: .btn}
Primary [Primary](link){: .btn .btn--primary}
Success [Success](link){: .btn .btn--success}
Warning [Warning](link){: .btn .btn--warning}
Danger [Danger](link){: .btn .btn--danger}
Info [Info](link){: .btn .btn--info}
Light Outline [Light Outline](link){: .btn .btn--light-outline}
Inverse [Inverse](link){: .btn .btn--inverse}
X-Large [X-Large](link){: .btn .btn--inverse .btn--x-large}
Large [Large](link){: .btn .btn--inverse .btn--large}
Small [Small](link){: .btn .btn--inverse .btn--small}

15.7. 안내문(Notice)

안내문을 작성한 뒤 줄을 바꾸고 notice 형식 추가

This article was written by kkiyou

This article was written by **kkiyou**
{: .notice}

This article was written by kkiyou

This article was written by **kkiyou**
{: .notice--primary}

This article was written by kkiyou

This article was written by **kkiyou**
{: .notice--info}

This article was written by kkiyou

This article was written by **kkiyou**
{: .notice--warning}

This article was written by kkiyou

This article was written by **kkiyou**
{: .notice--success}

This article was written by kkiyou

This article was written by **kkiyou**
{: .notice--danger}
Notice Headline:

You can also add the .notice class to a div element.

  • Bullet point 1
  • Bullet point 2


<div class="notice--info">
<h4>Notice Headline:</h4> # 헤더를 줄 수 있으나, 목차에서 제거하기 위해 삭제함

<p>You can also add the .notice class to a div element.</p>

<ul>
  <li>Bullet point 1</li>
  <li>Bullet point 2</li>
</ul>
 
</div>

15.8. 수식(Mathematical expression)

$로 감싼 부분에 수식을 입력한다. 수식은 LaTex 문법을 참고하면 된다.Latex3 문법을 따로 공부하지 않고 적용하고 싶다면 한컴의 웹수식편집기를 활용하자. 단, 로그인이 필요하다.

  • 방법 1. 
    $$
Mathematical expression
$$

    \(y = 3x^2 + 4x + 1\)

  • 방법 2. 
    $Mathematical expression$

    $x$ and $y$ is the variable

  • 적용 방법
    1. _includes 디렉토리에 mathjax_support.html 파일을 추가한다. Download 1
    2. _layouts 디렉토리에 default.html 파일에 링크 파일의 16행부터 18행 부분을 추가한다. Download 2

15.9. 공백(Space)

  1. &nbsp;
       Space
&nbsp;&nbsp;&nbsp;Space
  1. &#160;
       Space
&#160;&#160;&#160;Space

15.10. 줄바꿈(Line breaking)

<br>

  • 예제 
    111
<br>
222

    111
    222

참고자료(References)

  1. 공식 가이드
  2. gist.github.com
  3. devinlife.com
  4. imreplay.com
  5. Jekyll Github 블로그에 MathJax로 수학식 표시하기
  6. How to add Latex to Minimal Mistakes

  1. C#(cs), C++(cpp), JSON(json), ruby(ruby), Go(go), Markdown(markdown), JavaScrip(javascrip), R(r), Matlab(matlab) ↩

  2. blog author ↩

  3. LaTex 참고자료 ↩

업데이트:

댓글남기기

참고