마크다운 쓰는 방법



이런 깃허브 페이지는 물론 Trello, Slack 과 같이 개발 관련된 곳이면 마크다운(markdown)을 많이 적용하고 있다. 깃허브를 돌아다니다보면 제일 처음 보게되는 README.md 파일처럼 .md 확장자를 쓴다. HTML 파일에서 자주 볼 수 있는 마크업(markup;태그를 이용해서 작성하는 언어)을 쉽게 대체할 수 있는 것으로 생각하면 되겠다.

마크다운의 장/단점

장점

1. 익숙해지면 쓰기가 엄청 쉽다.
2. 적은 노력으로 나름 잘 꾸밀 수 있다.
 	3. 개발 관련된 곳에서는 점점 사용/지원하는 곳이 많아지고 있다.

단점

1. 통일이 안 되어 있다;Trello에서 작성한 걸 Slack에 붙여넣으면 적용 안되는 게 몇 개씩 나온다
 	2. 처음 써본 사람은 또 공부 해야한다.

개인적으로 디자인 감각이 부족하기 때문에 2. 적은 노력으로 나름 잘 꾸밀 수 있다.(특히 개발 관련 문서) 라는 점이 엄청 마음에 들어서 계속 사용하려고 한다.

마크다운 작성법

마크다운 작성법은 조금씩 다를 수 있기 때문에 Github 기준으로 맞춰서 작성해보려고 한다.

  1. 머릿말
  2. 강조
  3. 코드 블럭
  4. 링크
  5. 목록
  6. 수평선
  7. 이미지

1. 머릿말

1. ===
2. ---
3. #(##은 좀 더 작은 헤더가 됨 )

1.Header

1.Header
===

2.Header

2.Header
---

3.Header

# 3.Header

2. 강조

1. **굵은 글씨**
2. ~~취소선~~
3. `강조할 단어`

1. 굵은 글씨

**1. 굵은 글씨**

2. 취소선

~~2. 취소선~~

3.강조할 단어

`3.강조할 단어`

3. 코드 블럭

1. ``` 소스 코드 ```(or ~~~ 소스 코드 ~~~ )

``` 이나 ~~~ 뭘 쓰든 똑같아 보여 하나만 작성한다. 아직 뭐가 다른건지 잘 모르겠음.

# Set your Google Analytics id to receive `pageview` events.
# To remove Google Anaylics from your page, remove the line below.
google_analytics:

# Setting a disqus shortname will enable the comment section on pages with `comments: true` in the front matter
disqus_shortname:

```
# Set your Google Analytics id to receive `pageview` events.
# To remove Google Anaylics from your page, remove the line below.
google_analytics:

# Setting a disqus shortname will enable the comment section on pages with `comments: true` in the front matter
disqus_shortname:
```

```html, ```javascript, ```c 처럼 ```뒤에 해당 언어를 써주면 그 언어에 맞게 코드가 이쁘게 나온다.

import React, {Component} from 'react';
import './Movie.css';

class Movie extends Component{  
    render() {
        return (     
                <tr  className = "Movie" >
                    <th><MovieRank rank={this.props.rank}/></th>
                    <th>{this.props.title}</th>
                </tr>
        )
    }
}

```html
import React, {Component} from 'react';
import './Movie.css';

class Movie extends Component{  
    render() {
        return (     
                <tr  className = "Movie" >
                    <th><MovieRank rank={this.props.rank}/></th>
                    <th>{this.props.title}</th>
                </tr>
        )
    }
}
```

4. 링크

1. [텍스트](링크)
2. [텍스트](#헤더-네임)

구글로 이동

[구글로 이동](https://google.com)

링크

코드 블럭

[링크](#4-링크)
[코드 블럭](#3-코드-블럭)

Github에서는 #을 이용해 작성한 헤더를 자동으로 링크할 수 있게 해주기 때문에 작성이 쉽다.

헤더에 빈 칸이 있을 경우 -로 연결 해줄 것!!

헤더가 3. 코드 블럭 처럼 숫자, 온점이 있으면 [코드 블럭](#3-코드-블럭) 이렇게 해줘야 한다.

5. 목록

  1. 목록1
  2. 목록2
1. 목록1
2. 목록2
  • 목록1
  • 목록2
- 목록1
- 목록2

6. 수평선


* * *

***

*****

- - -

---------------------------------------

7. 이미지

Blog

![설명글](이미지 주소)
![Blog](http://www.ybrikman.com/assets/img/blog/github-pages/github-pages.png)

많이 쓰일 것들만 작성해봤다.

추가로 주의할 점은 작성하다가 Enter키를 한 번 쓰면 단락 분리가 안된다. 두 번 써주거나 <br>태그 쓸 것.

이상 뿅. 


'개발 > Jekyll' 카테고리의 다른 글

깃허브 페이지를 만들어보자  (0) 2019.03.19

블로그 작성을 해보기로 결심한 후에 저번에 작성한 어떤 블로그를 쓸 것인가? 포스트처럼 여러 블로그 플랫폼을 알아보고 최종적으로 깃허브 페이지를 이용하기로 결정했다.

Blog

깃허브 페이지를 무작정 만들어보려고 하니, 할 게 너무 많아서 잘 되어 있는 걸 가져와야겠다고 생각이 들었다. 깃허브에서 Jekyll 검색 하면 여러 테마들을 볼 수 있다. 그런데 내가 필요한 것들이 다 구성되어 있는 걸 찾기가 힘들었다.(깃허브 페이지는 필요한 기능들을 하나씩 다 구성해줘야한다.)

필요한 기능

  1. 카테고리 구성
  2. 댓글
  3. 통계

구글링하다보니 박민(isme2n)님 깃허브 페이지 가 제일 맘에 들어서 가져다 쓰기로 정했다.

맘에 드는 테마 가져오기

  1. 라이센스 확인
  2. fork
  3. config 등 수정

우선 맘에 드는 테마를 가져오려고 해도, 이게 지적 재산권, 저작권 침해인지 확인을 해야한다. 박민(isme2n)님 깃허브 페이지 라이센스 확인해보니 MIT License라 편히 사용해도 되는 것 같다. 그래도 많은 사람들이 댓글로 써도 되는지 물어보고 사용하는 걸로 보인다.

( 1. 라이센스 확인 )

fork 하는 법은 박민(isme2n)님 깃허브 페이지 여기서 fork 버튼만 누르면 된다.

그리고 깃허브 페이지는 본인계정.github.io 로만 만들어지므로 Settings에서 Repository 를 Rename 해주면 된다. 
(ex. https://jmhmunhwan.github.io/)

( 2. fork )

fork 받은 것들을 살펴보면 수정해야 할 것들이 많다. 우선 _config.yml 파일 에 공용적으로 쓰이는 환경 설정 정보들이 많으므로 이걸 수정했다. 살펴보니 댓글은 DISQUS로, 통계는 Google Analytics 로 사용하고 있다. 나도 해당 기능을 쓰고 싶으니 id 같은 값만 내걸로 바꿔서 쓰면 될 듯 하다.

# Set your Google Analytics id to receive `pageview` events.
# To remove Google Anaylics from your page, remove the line below.
google_analytics:

# Setting a disqus shortname will enable the comment section on pages with `comments: true` in the front matter
disqus_shortname:

그리고 _includes/contents.html 에서는 구글 애드센스가 적용되어 있다. 아래와 같이 data-ad-client, data-ad-slot을 내걸로 바꿔주면 끝. 이 파일 외에도 right-side.html,post.html에도 만들어져있다. 애드센스를 제대로 적용하려면 가입하고, 사이트 검증하고, 광고 단위를 만들고 적용해야하는데, 이것도 다음에 따로 포스팅해야겠다.

<div class="markdown-body">
  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- 블로그-하단-반응형 -->
                <ins class="adsbygoogle"
                    style="display:block; width:98%; height:300px;"
                    data-ad-client="             "
                    data-ad-slot="        "
                    data-ad-format="auto"></ins>
                <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
                <br/>
  
</div>
<br/>
<br/>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 블로그-하단-반응형 -->
<ins class="adsbygoogle"
    style="display:block; width:98%; height:300px;"
    data-ad-client="             "
    data-ad-slot="        "
    data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

잘 적용되었나 보자. 잘 적용되었으면 아래에 광고가 나올 것이다.

( 3. config 등 수정 )

위 방법으로 하면 원작자님이 쓰던 것들도 다 들고와서 좀 난감하다. About.html 같은 건 수정하면 되지만, 포스트들은 하나씩 삭제해야한다. 이건 Git으로 commit, push 해야겠다.

포스팅하기

_posts 폴더에 md 파일을 작성하면 알아서 포스팅이 된다. 테마별로 각각 js를 이용해서 포스팅 되도록 코딩되어 있기 때문에 맞춰서 하면 된다. 2019-02-11-Github Page.md 처럼 YYYY-MM-DD-TITLE.md 로 저장하면 된다. 이 테마에서는 _featured_categories, _featured_tags로 카테고리를 구별하게 만들어져있다. 대분류가 카테고리, 소분류가 태그로 이해하면 된다. 실제 적용은 아래처럼 하면 된다.

---
layout: post
title: 깃허브 페이지 작성해보기
subtitle: 5분만에 따라해보기
gh-repo: jmhmunhwan/jmhmunhwan.github.io
gh-badge: [star, fork, follow]
category : devlog
tags: blog
comments: true
---

tag 에 적어놓은 blog 처럼 기존에 없는 걸 추가할 경우에는 해당 폴더에 다른 md 파일들을 보고 양식을 맞추어 새롭게 하나 만들어주면 된다. (ex. devlog-blog.md 파일 )

---
layout: tag-blog
title: Blog
slug: blog
category: devlog
menu: false
order: 3
---

마크다운 사용법에 대해서는 따로 기술하겠다. 이만 뿅. 

'개발 > Jekyll' 카테고리의 다른 글

마크다운(Markdown) 작성법  (0) 2019.03.19

+ Recent posts

티스토리툴바