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">'&lt;span&gt;'</span>,
                    <span class="method">after:</span> <span class="string">'&lt;/span&gt;'</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 가 적용되어 있기 때문에 구문강조되어 표시되고 있을 것입니다.

여러분들도 마크다운을 사용해보세요.

참고로 서브라임텍스트에서는 아래처럼 작업을 하고 있습니다.

템플릿에서는 아래처럼 보면서 작업을 하고 있습니다.

개 개

demun(대문블로그)

Grunt(그런트) grunt-markdown 마크다운 사용하기

grunt-markdown

티스토리툴바