Grunt(그런트) grunt-markdown 마크다운 사용하기
- 퍼블리셔/Grunt
- 2014. 6. 6. 06:00
grunt-markdown
마크다운에 대해서 소개하기전에 잠시 개인적인 이야기를 하겠습니다.
저는 개인적으로 github.com 을 관심있게 보고 있습니다.제 블로그에 github 스타일을 하나씩 접목하고, grunt 의 기술도 하나씩 접목하고 있습니다.
여기에 관련된 기술들이 정말 많고, 하나씩 소개하고 있는데 이것들이 전부 연결고리처럼 하나하나 연관이 되어 있습니다.
저는 현재 마크다운으로 글을 쓰고 있으며, sublimetext 를 사용하고, grunt 를 사용하고 자동으로 변환된 html을 티스토리에 복사 붙여넣기 하고 있습니다.
이전에 구문강조 자바스크립트 highlight.js 에 대해서 소개한적이 있습니다.
grunt-markdown 은 highlight 를 사용하고 GFM을 사용합니다.
저장소: grunt-markdown
사용방법과 자세한 내용은 저장소에 나와있습니다. grunt 를 설치했다고 가정하고 명령창에서 아래처럼 설치하면 됩니다.
npm install grunt-markdown --save-dev
gruntfile.js 에 loadNpmTasks 를 입력합니다.
grunt.loadNpmTasks('grunt-markdown');
gruntfile.js 에 설정은 아래와 같습니다.
markdown: {
all: {
files: [{
expand: true,
src: 'markdown/*.md',
dest: 'html/',
ext: '.html'
}]
}
}
만약 옵션을 추가한다면 아래와 같습니다.
markdown: {
all: {
files: [{
expand: true,
src: 'markdown/*.md',
dest: 'html/',
ext: '.html'
}],
options: {
template: 'template/index.html',
preCompile: function(src, context) {},
postCompile: function(src, context) {},
templateContext: {},
markdownOptions: {
gfm: true,
highlight: 'manual',
codeLines: {
before: '<span>',
after: '</span>'
}
}
}
}
}
간단히 설명하자면 all.files 에는 markdown 폴더의 모든 md 파일을 html 폴더에 html 확장자로 변환합니다.
옵션은 template 은 내가 미리보기를 하고자하는 템플릿형태를 만들어서 사용할 수 있습니다.
markdownOptions 에는 구문강조를 하기 위해 span 태그가 삽입됩니다.
위의 코드가 위의 옵션으로 html로 변환이 된다면 아래와 같습니다.
<pre><code><span class="method">markdown:</span> {
<span class="method">all:</span> {
<span class="method">files:</span> [{
<span class="method">expand:</span> <span class="keyword">true</span>,
<span class="method">src:</span> <span class="string">'markdown/*.md'</span>,
<span class="method">dest:</span> <span class="string">'html/'</span>,
<span class="method">ext:</span> <span class="string">'.html'</span>
}],
<span class="method">options:</span> {
<span class="method">template:</span> <span class="string">'template/index.html'</span>,
<span class="method">preCompile:</span> function(src, context) {},
<span class="method">postCompile:</span> function(src, context) {},
<span class="method">templateContext:</span> {},
<span class="method">markdownOptions:</span> {
<span class="method">gfm:</span> <span class="keyword">true</span>,
<span class="method">highlight:</span> <span class="string">'manual'</span>,
<span class="method">codeLines:</span> {
<span class="method">before:</span> <span class="string">'<span>'</span>,
<span class="method">after:</span> <span class="string">'</span>'</span>
}
}
}
}
}</code></pre>
grunt-markdown 의 사용법은 이것이 다 입니다.
template 를 옵션으로 사용하면 원하는 형식으로 보이게 할 수 있습니다.
참고로 저는 지금 현재 부트스트랩의 형식을 template 으로 사용하는데요 코드는 아래와 같습니다..
<!DOCTYPE html>
<html lang="ko">
<head>
<title>markdown template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" media="screen">
</head>
<body>
<div class="container">
<!-- start -->
<%=content%>
<!-- //end -->
</div>
</body>
</html>
그러면 <%=content%> 부분에 변환된 html이 보이고 그 부분은 티스토리의 글쓰기 부분에 넣습니다.
grunt 의 watch 와 connect 를 사용하고 있어 실시간으로 변환되고, 변환된 부분을 미리보기 하면서 작업을 하고 있습니다.
마크다운으로 글을 작성하면 많은 부분을 줄일수 있습니다. 복잡한 코드들도 간단하게 쓸수 있습니다.
저의 경우 티스토리 블로그에 현재 highlight.js 가 적용되어 있기 때문에 구문강조되어 표시되고 있을 것입니다.
여러분들도 마크다운을 사용해보세요.
참고로 서브라임텍스트에서는 아래처럼 작업을 하고 있습니다.
템플릿에서는 아래처럼 보면서 작업을 하고 있습니다.