1. 적용할 github-markdown.css 다운받기 (또는 cdn 링크 사용)
css 파일을 받아서 블로그에 첨부하는 방식을 선호하는 분은 1-1, css 파일을 첨부하기 싫거나 귀찮으면 바로 2로 가면 된다
1-1. github-markdown.css 파일 다운로드 받기
github-markdown 링크 <- 이 링크로 들어가서 원하는 스타일(기본/light/dark)의 파일을 다운로드 받는다.
(나는 기본 파일(github-markdown.css)을 기준으로 적용했다.)
2. 티스토리 스킨에 스타일 적용하기
2-1. 블로그 관리 > 스킨 편집 > HTML 편집
우선 블로그 관리 화면에서 스킨 편집으로 들어가서, HTML 편집 창으로 들어가준다.
2-2. css 파일 첨부하기 (css 파일 첨부하기 싫다면 패스)
위에 HTML / CSS / 파일 업로드 탭이 나뉘어 있을텐데, 파일 업로드 탭으로 가서 github-markdown.css 파일을 추가해준다.
2-3. HTML파일에 css파일 링크 추가
css파일을 첨부했다면, HTML 탭으로 이동해서 <head>태그 안에 css파일을 연결해주는 <link>태그를 추가해 주어야 한다. css파일을 직접 첨부했다면 (A)코드를, cdn링크로 연결하고자 한다면(첨부파일 추가 안했으면) (B)코드를 추가해주자.
(A)코드 : css파일 링크 태그
<!-- github style markdown -->
<link rel="stylesheet" href="./images/github-markdown.css">(B)코드 : github markdown css cdn 링크 태그나는 B코드를 사용해태그에 추가해주었다.
<!-- github style markdown -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.0.0/github-markdown-light.min.css">나는 cdn을 사용해서 <head>태그 안에 추가해줬다.
3. HTML의 블로그 콘텐츠 태그에 markdown-body 클래스 추가하기
728x90
1. 적용할 github-markdown.css 다운받기 (또는 cdn 링크 사용)
css 파일을 받아서 블로그에 첨부하는 방식을 선호하는 분은 1-1, css 파일을 첨부하기 싫거나 귀찮으면 바로 2로 가면 된다
1-1. github-markdown.css 파일 다운로드 받기
github-markdown 링크 <- 이 링크로 들어가서 원하는 스타일(기본/light/dark)의 파일을 다운로드 받는다.
(나는 기본 파일(github-markdown.css)을 기준으로 적용했다.)
2. 티스토리 스킨에 스타일 적용하기
2-1. 블로그 관리 > 스킨 편집 > HTML 편집
우선 블로그 관리 화면에서 스킨 편집으로 들어가서, HTML 편집 창으로 들어가준다.
HTML 편집 ㄱㄱ
2-2. css 파일 첨부하기 (css 파일 첨부하기 싫다면 패스)
위에 HTML / CSS / 파일 업로드 탭이 나뉘어 있을텐데, 파일 업로드 탭으로 가서 github-markdown.css 파일을 추가해준다.
오른쪽 상단에 파일업로드 클릭
오른쪽 하단에 추가 버튼을 눌러 파일을 선택하면 업로드 끝.
2-3. HTML파일에 css파일 링크 추가
css파일을 첨부했다면, HTML 탭으로 이동해서 <head>태그 안에 css파일을 연결해주는 <link>태그를 추가해 주어야 한다. css파일을 직접 첨부했다면 (A)코드를, cdn링크로 연결하고자 한다면(첨부파일 추가 안했으면) (B)코드를 추가해주자.
(A)코드 : css파일 링크 태그
<!-- github style markdown -->
<link rel="stylesheet" href="./images/github-markdown.css">
(B)코드 : github markdown css cdn 링크 태그나는 B코드를 사용해태그에 추가해주었다.
<!-- github style markdown -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.0.0/github-markdown-light.min.css">
나는 cdn을 사용해서 <head>태그 안에 추가해줬다.
링크를 추가한 모습
3. HTML의 블로그 콘텐츠 태그에 markdown-body 클래스 추가하기
스킨편집의 HTML 편집 화면에서 ctrl+f 를 눌러
이런 경우, 어떤 태그가 정확히 게시글 콘텐츠 영역인지를 페이지 소스를 보면서 확인을 하던지 적용해보면서 확인해야 한다.
내가 지금 사용하고 있는 티스토리 스킨(Book Club)의 경우, 2번째 
(취소) 클래스에 markdown-body를 추가했다.
이렇게 하면 github style 적용 완료.
(New) 3. 블로그 작성 시 글을 태그로 감싸주기
기존의 방법은 본문 글 뿐만 아니라 해당 카테고리의 다른 글 목록을 보여주는 표에 영향을 줄 수 있다.
이렇게 나오는 수가 있다....ㅎ
이런 문제를 방지하기 위해서, 기존 3번 처럼 직접적으로 HTML을 편집하는 게 아니라,
글작성을 완료한 후에 HTML모드로 바꿔서 태그로 감싸주는 방법을 써야 한다.
(1) HTML 모드로 변환하기
HTML 클릭!!!
HTML 모드로 변환하면 이렇게 된다.
HTML 모드일 때의 에디터 모습
(2) 태그로 감싸주기
<div class="markdown-body">
...
[원래 내용]
...
</div>
위와 같은 형태로 글의 최상단, 최하단에 태그를 추가해주면 된다.
설명한 대로, 최상단에 추가한 모습.
이 글은 github-markdown 스타일을 적용한 상태에서 작성한 마크다운 페이지이다.
끝.
좋았다면 하트누르기! 구독해주기!
728x90
를 찾아준다. 다만, 스킨에 따라서 이 코드가 여러 영역에 존재하는 경우가 있다.이런 경우, 어떤 태그가 정확히 게시글 콘텐츠 영역인지를 페이지 소스를 보면서 확인을 하던지 적용해보면서 확인해야 한다.
728x90
1. 적용할 github-markdown.css 다운받기 (또는 cdn 링크 사용)
css 파일을 받아서 블로그에 첨부하는 방식을 선호하는 분은 1-1, css 파일을 첨부하기 싫거나 귀찮으면 바로 2로 가면 된다
1-1. github-markdown.css 파일 다운로드 받기
github-markdown 링크 <- 이 링크로 들어가서 원하는 스타일(기본/light/dark)의 파일을 다운로드 받는다.
(나는 기본 파일(github-markdown.css)을 기준으로 적용했다.)
2. 티스토리 스킨에 스타일 적용하기
2-1. 블로그 관리 > 스킨 편집 > HTML 편집
우선 블로그 관리 화면에서 스킨 편집으로 들어가서, HTML 편집 창으로 들어가준다.
HTML 편집 ㄱㄱ
2-2. css 파일 첨부하기 (css 파일 첨부하기 싫다면 패스)
위에 HTML / CSS / 파일 업로드 탭이 나뉘어 있을텐데, 파일 업로드 탭으로 가서 github-markdown.css 파일을 추가해준다.
오른쪽 상단에 파일업로드 클릭
오른쪽 하단에 추가 버튼을 눌러 파일을 선택하면 업로드 끝.
2-3. HTML파일에 css파일 링크 추가
css파일을 첨부했다면, HTML 탭으로 이동해서 <head>태그 안에 css파일을 연결해주는 <link>태그를 추가해 주어야 한다. css파일을 직접 첨부했다면 (A)코드를, cdn링크로 연결하고자 한다면(첨부파일 추가 안했으면) (B)코드를 추가해주자.
(A)코드 : css파일 링크 태그
<!-- github style markdown -->
<link rel="stylesheet" href="./images/github-markdown.css">
(B)코드 : github markdown css cdn 링크 태그나는 B코드를 사용해태그에 추가해주었다.
<!-- github style markdown -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.0.0/github-markdown-light.min.css">
나는 cdn을 사용해서 <head>태그 안에 추가해줬다.
링크를 추가한 모습
3. HTML의 블로그 콘텐츠 태그에 markdown-body 클래스 추가하기
스킨편집의 HTML 편집 화면에서 ctrl+f 를 눌러
이런 경우, 어떤 태그가 정확히 게시글 콘텐츠 영역인지를 페이지 소스를 보면서 확인을 하던지 적용해보면서 확인해야 한다.
내가 지금 사용하고 있는 티스토리 스킨(Book Club)의 경우, 2번째 (취소) 클래스에 markdown-body를 추가했다.
이렇게 하면 github style 적용 완료.
(New) 3. 블로그 작성 시 글을 태그로 감싸주기
기존의 방법은 본문 글 뿐만 아니라 해당 카테고리의 다른 글 목록을 보여주는 표에 영향을 줄 수 있다.
이렇게 나오는 수가 있다....ㅎ
이런 문제를 방지하기 위해서, 기존 3번 처럼 직접적으로 HTML을 편집하는 게 아니라,
글작성을 완료한 후에 HTML모드로 바꿔서 태그로 감싸주는 방법을 써야 한다.
(1) HTML 모드로 변환하기
HTML 클릭!!!
HTML 모드로 변환하면 이렇게 된다.
HTML 모드일 때의 에디터 모습
(2) 태그로 감싸주기
<div class="markdown-body">
...
[원래 내용]
...
</div>
위와 같은 형태로 글의 최상단, 최하단에 태그를 추가해주면 된다.
설명한 대로, 최상단에 추가한 모습.
이 글은 github-markdown 스타일을 적용한 상태에서 작성한 마크다운 페이지이다.
끝.
좋았다면 하트누르기! 구독해주기!
728x90
를 감싸고 있는 태그에 클래스를 추가해주면 된다.(New) 3. 블로그 작성 시 글을 태그로 감싸주기
기존의 방법은 본문 글 뿐만 아니라 해당 카테고리의 다른 글 목록을 보여주는 표에 영향을 줄 수 있다.
이런 문제를 방지하기 위해서, 기존 3번 처럼 직접적으로 HTML을 편집하는 게 아니라,
글작성을 완료한 후에 HTML모드로 바꿔서 태그로 감싸주는 방법을 써야 한다.
(1) HTML 모드로 변환하기
HTML 모드로 변환하면 이렇게 된다.
(2) 태그로 감싸주기
<div class="markdown-body">
...
[원래 내용]
...
</div>위와 같은 형태로 글의 최상단, 최하단에 태그를 추가해주면 된다.
이 글은 github-markdown 스타일을 적용한 상태에서 작성한 마크다운 페이지이다.
끝.
좋았다면 하트누르기! 구독해주기!
'블로그 발전기' 카테고리의 다른 글
| [티스토리 접은글] 접은글 열기/닫기 문구 변경하기 (0) | 2023.07.19 |
|---|---|
| [애드센스] 애드센스 sellers.json 설정하기 (1) | 2021.12.06 |
| [애드센스/애드핏] 티스토리 수익 조회 불가 해결하기 (0) | 2021.12.06 |
| 소스코드 복사 허용하기 (0) | 2020.11.20 |
| [애드센스 심사완료] 애드센스 승인 완료! (2) | 2020.11.20 |
댓글