Hexo / 마크다운, 줄바꿈, 들여쓰기, 프리뷰, scaffold

#마크다운이 무엇인고?

 Github 원격저장소를 처음 만들었을 때 Readme.md 파일을 처음 접하게 되었다. Github 에서는 저장소에 접속하자 마자 보여주는 일종의 표지 역할을 하는데, 거의 대부분 잘 꾸며져 있었다. 나는 원격저장소를 개인적으로 사용하기 때문에 굳이 관심이 없었는데, 헥소를 이용한 포스팅을 할때 마크다운 언어를 사용 할 수밖에 없었다.

 마크다운, 확장자 .md 를 사용하는 파일은 텍스트를 서식이 있는 문서로 바꿔주는 마크업 언어 라고 한다. html 과 유사한 느낌 이면서도 사용방법은 압도적으로 간단하다.

마크다운의 역사나, 간단한 사용법은 아래 위키 링크를 참고해 보자.
위키백과 : 마크다운

 
 
 

#줄바꿈은 어떻게 하지? 들여쓰기는?

 제일 먼저 글을 쓰고, 기본적인 사용방법을 익힌 후 마크다운을 써두었던 글에 적용해 본 다음 로컬 서버에서 확인해 보았다.
 그런데 이게 왠걸? 줄바꿈이 하나도 되어있지 않아서 가독성이 떨어지는 문제가 있었다. 그래서 생각해 낸 꼼수가, “######” 으로 작성되는 h6 헤더로 특수문자 [ㄱ 한자] 공백으로 해결할 수 있었다.
 사실 내입장에서는 “######” 를 잘 사용하지 않으므로, 적절한 꼼수인듯 하다. 들여쓰기도 이 공백문자를 활용하면 바로 활용 가능하다.

꼼수의 정체
꼼수의 정체

 덧붙여서, 줄간격은 hexo 테마의 h6 설정부분에서 xx em 으로 조절이 가능하다.

경로 : themes/hueman/source/css/_extend.styl

 
 

#문법에 익숙하지 않은 뉴비를 위하여

 VSC 에서는 mark down 문서를 위한 여러가지의 extention 이 있는데, 그중에서 프리뷰 extension 은 매우유용하다.

Markdown Preview Enhanced
고인물도 필요한 기능일지도...

 특히, .md 파일을 수정하려고 열게 됨과 동시에 preview 를 띄워 주는게 은근 시간단축에 용이하다. 그렇지 않을경우에는 문서명, 우클릭, 혹은 단축키를 외워야 하는 다소 귀찮음이 동반된다.
 자동 프리뷰 설정은, VSC Settings 에 가서 “Automatically Show Preview of Markdown Being Edited” 체크박스에 체크를 해주면 된다.

extension 아래쪽에 톱니바퀴로 접근해도 된다

 
 

#프리뷰 창이 밋밋하다면?

 프리뷰 extension 을 설치 하더라도, 막상 프리뷰 화면을 보면 흰바탕에 검은 글씨, Hexo 테마에서 내가 정의했던 색이나 글꼴 크기는 온데간데 없다.

밋밋

 Preview 화면을 띄울때 하나의 웹페이지를 띄우는것처럼 동작되어서 Hexo 와는 별개의 CSS 파일이 존재한다. 따라서 Preview 화면을 테마가 적용되어 배포된 블로그 화면처럼 하길 원하거나, 배경색과 폰트및 색깔 변경을 하려면 “.less” 파일을 건드려 줘야 한다. style.less 파일을 직접 수정하는 방법과 나만의 less 파일을 추가하여 사용할 수도 있다.

MPE(Markdown Preview Enhanced) 페이지에서 아주 자세하게 소개하고 있다.
Customize CSS

 
 

#scaffolds 활용, 글의 틀을 만들어 두자

 아무리 markdown 문법을 잘 알고 숙달되었다고 하더라도, 생산성에 도움을 줄 수 없다면 계륵에 불과하다. Hexo 에서 제공하는 scaffolds 는 새로운 포스트를 만들었을 때 사전 정의해둔 글의 틀이 마크다운 형식으로 로드 될 수 있게 해준다.
 Hexo 패키지의 scaffolds 폴더 내에 있는 .md 파일들을 수정하면 바로 사용 가능하다. 매일매일 이것저것 추가하느라 자주 바뀌지만, 현 시점에서 내가 사용하고 있는 내용은 이렇다.

참고로 아래 내용을 사용하려면 [‘’’] 를 [```] 로 바꿔 써야 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
---
title: {{ title }}
categories:
    - 
    -
tags:
    - 
---
<!--============================================================-->
<!--                         [서론]                             -->
<!--============================================================-->
# #서론
이 포스트의 요약내용
>인용구로 주제를 강조해 보자
###### 
<!--========================[구분선]============================-->
###### 
---
###### 
<!--============================================================-->
<!--                         [본론]                             -->
<!--============================================================-->
<!--[주제]-->
## **#대주제를 이곳에 써보자**
<!--[소주제]-->
*소주제를 이곳에 써보자*
<!--[코드]-->
''' py
"""
Code should be goes here, change language
"""
'''
<!--[결과]-->
**결과**
''' txt
소주제의 결과를 여기에 써보자
'''
<!--[소주제구분]==================================-->
###### 
###### 
<!--[소주제구분]==================================-->
<!--[소주제]-->
*소주제를 이곳에 써보자*
<!--[코드]-->
''' py
"""
Code should be goes here, change language
"""
'''
<!--[결과]-->
**결과**
''' txt
소주제의 결과를 여기에 써보자
'''
<!--[소주제구분]==================================-->
###### 
###### 
<!--[소주제구분]==================================-->
<!--========================[구분선]============================-->
###### 
---
###### 
<!--============================================================-->
<!--[주제]-->
## **#대주제를 이곳에 써보자**
<!--[소주제]-->
*소주제를 이곳에 써보자*
<!--[코드]-->
''' py
"""
Code should be goes here, change language
"""
'''
<!--[결과]-->
**결과**
''' txt
소주제의 결과를 여기에 써보자
'''
<!--[소주제구분]==================================-->
###### 
###### 
<!--[소주제구분]==================================-->
<!--========================[구분선]============================-->
###### 
---
###### 
<!--============================================================-->
<!--                         [결론]                             -->
<!--============================================================-->
# #결론
마무리
<!--========================[구분선]============================-->
###### 
---
###### 
<!--============================================================-->
<!--                         [참조]                             -->
<!--============================================================-->
# #Reference
* [킹황갓 구글](google.com)
<!--============================================================-->
<!--                         [로고]                             -->
<!--============================================================-->
###### 
###### 
![](/images/rabbit-100.png)
###### 
 
 

#이제는 콘텐츠다

 여기까지 하고나니, 이제 얼추 포스팅의 형태가 잡혔다. 이제는 콘텐츠 생산을 해야할 차례 이다. 물론 추가하고 싶은 기능들도 많고 그중에 각주는 최대한 빨리 적용해 볼 생각이다.


#Reference

 
 

 
Share