고운플랫폼 / 사용자 매뉴얼 / 마크다운 문법

고운소프트

고운플랫폼 / 사용자 매뉴얼 / 마크다운 문법

 리치 앱

사용자 매뉴얼 > 내용보기

 
목록 | 맨 위로 | 위로 | 아래 | 이전 | 다음

제목 : 마크다운 문법

글쓴이: 고운플랫폼 | 게시한 날짜: Thu May 18 14:50:29 KST 2017
| 글 날짜: Tue Apr 26 00:00:00 KST 2016 | 열람수: 1 | 추천수: 0 | 비난수: 0

고운플랫폼의 마크다운

1. 개요

Markdown은 John Gruber에 의해 개발된 가벼운 마크업 언어로, 이것에 대한 아이디어를 그의 웹 사이트에서 다음과 같이 소개하고 있다.

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML)

Markdown은 W3C의 커뮤니티에서 다양한 프로그래밍 언어를 사용한 구현을 소개하고 있으며, 고운플랫폼에서는 John Gruber의 문법을 기초로 하여 WordPress와 Dillinger의 것을 참고하였다.

고운플랫폼의 마크다운은 이미 널리 알려진 구현들의 문법을 수용하는 한편, 보다 유용한 포맷팅 결과를 위하여 기존문법 외에 몇몇의 기능이 추가되어 Java로 구현되었고, WYSIWYM 편집기를 함께 제공한다.

이 글은 고운플랫폼에서 구현하고 있는 Markdown을 설명한다.

2. 블록 요소

2.1. 단락

단락은 하나 이상의 텍스트 행으로 구성되고, 하나 이상의 빈 행으로 구별된다.

단락 내에서 개행(line break)를 원하면 2개 이상의 공백이나 탭문자를 삽입하면 된다.

고운플랫폼의 구현은, 마크다운 텍스트를 HTML로 변환하는 초기에
하나의 탭 문자를 4개의 공백으로 모두 치환 한 후 나머지를 파싱한다.

<p>고운플랫폼의 구현은, 마크다운 텍스트를 HTML로 변환하는 초기에<br />
하나의 탭 문자를 4개의 공백으로 모두 치환 한 후 나머지를 파싱한다.</p>

2.2. 제목

Setext 스타일 제목은 행의 하단에 '='은 '-'을 사용한다.

제목 1
==
제목 2
--

이것은 다음과 같이 표시된다.

제목 1

제목 2

<h1>제목 1</h1>
<h2>제목 2</h2>

Atx 스타일 제목은 행의 시작에 '#' 문자로 제목의 수준을 정한다.

고운플랫폼에서는 Atx 스타일의 제목에 대하여 목차(Table of Contents)삽입과 자동번호매기기 기능이 있다.

{#1-2}

# 제목 1 #
## 제목 2 ##
### 제목 3 ###
#### 제목 4 ####
##### 제목 5 #####
###### 제목 6 ######

이것은 다음과 같이 표시된다.

1. 제목 1

1.1. 제목 2

제목 3

제목 4

제목 5
제목 6
<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>

2.3. 인용블록 (blockquote)

인용블록은 '>' 문자로 시작한다.

> 인용블록의 하위요소는 단락 뿐만 아니라,
  목차, 제목, 인용블록, 코드블록이 있을 수 있다.

> # 제목 #
> > 인용블록
> - 목록 1
> - 목록 2
> ```
> 첫 번째 코드 행
> 두 번째 코드 행
> ```
>     또 다른 코드블록

인용블록의 하위요소는 단락 뿐만 아니라, 목차, 제목, 인용블록, 코드블록이 있을 수 있다.

제목

인용블록

  • 목록 1
  • 목록 2
1첫 번째 코드 행
2두 번째 코드 행
또 다른 코드블록

<p>인용블록의 하위요소는 단락 뿐만 아니라,
   목차, 제목, 인용블록, 코드블록이 있을 수 있다.</p>
<h1>제목</h1>
<blockquote><p>인용블록</p></blockquote>
<ul>
  <li>목록 1</li>
  <li>목록 2</li>
</ul>

<pre><code>또 다른 코드블록</code></pre>

2.4. 목록

'*', '+', '-'로 시작하면 순번없는, '1.', '2.' 와 같이 하면 순번이 있는 목록이다.

1. 아이템 1
2. 아이템 2
   + 아이템 2.1
   + 아이템 2.2
3. 아이템 3
   1. 아이템 3.1
      - 아이템 3.1.1
      - 아이템 3.1.2
   2. 아이템 3.2
4. # 아이템 4 제목 #
   단락 뿐만 아니라,
   > 인용블록도 올 수 있다.

  1. 아이템 1

  2. 아이템 2

    • 아이템 2.1
    • 아이템 2.2

  3. 아이템 3

    1. 아이템 3.1

      • 아이템 3.1.1
      • 아이템 3.1.2

    2. 아이템 3.2

  4. 아이템 4 제목

    단락 뿐만 아니라,

    인용블록도 올 수 있다.

1<ol>
2  <li><p>아이템 1</p></li>
3  <li><p>아이템 2</p></li>
4  <li><ul>
5      <li>아이템 2.1</li>
6      <li>아이템 2.2</li>
7  </ul></li>
8  <li><p>아이템 3</p>
9    <ol>
10      <li><p>아이템 3.1</p></li>
11      <li><ul>
12        <li>아이템 3.1.1</li>
13        <li>아이템 3.1.2</li>
14      </ul></li>
15      <li><p>아이템 3.2</p></li>
16    </ol>
17  </li>
18  <li>
19    <h1># 아이템 4 제목</h1>
20    <p>단락 뿐만 아니라,</p>
21    <blockquote><p>인용블록도 올 수 있다.</p></blockquote>
22  </li>
23</ol>

2.5. 코드블록

공백문자가 4개 이상이 있는 문자는 코드블록이다.

<html>
  <head>
  ...
  &amp;

'`', '~' 문자가 3개 이상이 있으면 코드블록의 시작이고, 이 문자 세개로 종결한 행으로 블록의 끝을 표시한다.

``` c/c++
int main(int argc, char* args[]) {
    printf("Hello world!\n");
    return 0;
}
```
1int main(int argc, char* args[]) {
2    printf("Hello world!\n");
3    return 0;
4}
~~~ java
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello world!");
    }
}
~~~
1public class Hello {
2    public static void main(String[] args) {
3        System.out.println("Hello world!");
4    }
5}

2.6. 수평선

'*', '-' 문자만 세개 이상이 있으면 수평선이다.

* * *
***
********
- - -
-----------
1<hr />
2<hr />
3<hr />
4<hr />

2.7. 목차

같은 블록 내에서'#' 문자로 시작하는 Atx 스타일의 제목은 자동번호매기기와 목차삽입 기능이 있다. 사용의 예는 위 2.2. 제목 항목에 있다.

  • {#}

    블록 모든 제목에 대하여 번호를 매기고 목차를 삽입한다.

  • {#1-2}

    1, 2 수준의 제목에 대하여 번호를 매기고 목차를 삽입한다.

  • {#3-4~}

    3, 4 수준에 대하여 번호를 매기지만 목차를 삽입하지는 않는다.

3. 인라인 요소

3.1. 링크

링크는 인라인 링크와 참조링크가 있다.

  • 인라인 링크

    이것은 타이틀이 있는 [인라인 링크] (http://example.com/ "타이틀") 이다.

    이것은 타이틀이 있는 인라인 링크 이다.

    이것은 타이틀이 있는 <a href="http://example.com" title="타이틀">인라인 링크</a>이다.

    [이것](http://example.com/)은 타이틀이 없는 인라인 링크 이다.

    이것은 타이틀이 없는 인라인 링크 이다.

    <a href="http://example.com/">이것</a>은 타이틀이 없는 인라인 링크 이다.

    우리는 '<'와 '>'으로 링크를 표시할 수도 있다. 이는 John Gruber의 문법에서는 자동링크에 '<'와 '>'를 사용하고 있는데, 유형을 고려하면, 링크의 정의에 있어서 "()" 보다 "<>"이 더 합리적인 것으로 판단한다.

    따라서, [이것]<http://example.com/ "타이틀">도 인라인 링크 이다.

    따라서, 이것도 인라인 링크 이다.

    따라서, <a href="http://example.com/" title="타이틀">이것</a>도 인라인 링크 이다.

  • 참조링크

    참조링크는 링크를 별도로 정의하고 본문에서는 그것의 ID(Identifier)만 사용한다.

    참조의 정의는 본문 어디에서나 나올 수 있으며, 본문에는 표시되지 않는다.

    John Gruber의 문법에서 참조의 정의는 다음과 같다.

    [id]: http://example.com/
[id]: http://example.com/ "타이틀"
[id]: http://example.com/ '타이틀'
[id]: http://example.com/ (타이틀)

    그러나, 우리는 인라인 링크의 경우와 마찬가지로 다음도 허용한다. 고운플랫폼에서는 참조의 정의를 표시하는 것에 대하여 고려 중 이다.

    [id]: <http://example.com>
[id]: <http://example.com> 타이틀

    참조는 [Example][id]와 같이 사용한다.

    참조는 <a href="http://example.com/>Example</a>와 같이 사용한다.

    링크를 [Example]: <http://example.com>와 같이 링크를 정의하면,

    [Example]만 사용해도 된다.

    <a href="http://example.com/">Example</a>만 사용해도 된다.

3.2. 이미지

이미지를 삽입하는 것은 '!'문자를 시작하는 것을 제외하고 링크의 경우와 동일하다.

  • 인라인 이미지

    이 그림은 ![꽃]</download/usecase/250/?inline "타이틀"> 좀 크다.

    이 그림은 꽃 좀 크다.

    이 그림은 <img src="/download/usecase/250/?inline" alt="꽃" title="타이틀" /> 좀 크다.

  • 참조 이미지

    참조 이미지는 ![꽃][id]와 같이 사용한다.

    참조 이미지는 <img src="/download/usecase/250/?inline" alt="꽃" title="타이틀" />와 같이 사용한다.

3.3. 자동 링크

URI과 이메일 주소에 대하여 숏컷(shortcut) 스타일의 자동링크를 사용할 수 있다.

<http://gowoonsoft.com>에서 고운플랫폼을 개발합니다.

http://gowoonsoft.com에서 고운플랫폼을 개발합니다.

<a href="http://gowoonsoft.com">http://gowoonsoft.com</a>에서 고운플랫폼을 개발합니다.

문의를 원하시면 <contact@gowoonsoft.com>로 메일 주세요

문의를 원하시면 contact@gowoonsoft.com로 메일 주세요

문의를 원하시면 <a href="contact@gowoonsoft.com">contact@gowoonsoft.com</a>로 메일 주세요

3.4. 강조하기

강조하기는 '*', '_' 문자를 사용한다.

*강조하기*는 강조하기

<em>강조하기</em>

**강조하기** 강조하기

<strong>강조하기</strong>

_강조하기_는 강조하기

<u>강조하기</u>

__강조하기__는 강조하기

<u><strong>강조하기</strong></u>

***_강조하기_***는 강조하기

<em><strong><u>강조하기</u></strong></em>

__*강조하기*__는 강조하기

<u><strong><em>강조하기</em></strong></u>

***강조하기***는 강조하기

<em><strong>강조하기</strong></em>

~취소하기~는 취소하기

<del>취소하기</del>

3.5. 기호 치환

다음에 대하여 HTML 기호 문자로 치환한다.

  • (C)      ©
  • (R)      ®
  • (TM)     ™
  • (*)      ×
  • (/)      ÷
  • (.)      ·
  • (%)      ‰
  • ..       ¨
  • ...      …

3.6. 인라인 코드

단락 중간에 '`' 문자(backtick) 사이에 있는 부분은 코드로 처리된다.

`printf()` 함수를 사용하세요

printf() 함수를 사용하세요

<p><code>printf()</code>함수를 사용하세요</p>

4. 기타

4.1. 이스케이프

마크다운의 포멧에 사용하는 문자를 그대로 표시하기 위해 '\'문자를 앞에 둔다.

\- 이것은 목록이 아니다

- 이것은 목록이 아니다

1\. 이것도 목록이 아니다

1. 이것도 목록이 아니다.

다음의 문자들에 대하여 이스케이프(escape, 탈출)한다.

`    backtick
~    tild
!    exclamation mark
#    hash mark
*    asterisk
_    underscore
-    minus sign (hyphen)
+    plus sign
=    equal sign
.    dot
()   parentheses
{}   curly braces
[]   squre parentheses
>    greater then sign
\    backslash

5. 맺음말

2015년 3월 고운플랫폼에 마크다운을 지원하기로 결정한 후 1년이 지나서야 이 기능의 구현을 시작하였다.

고운플랫폼의 리치 인터넷 애플리케이션 구현에 사용되는 프레임워크인 GWT와 어울리는 마크다운 텍스트 포맷팅 파서(parser)를 W3C의 커뮤니티를 비롯한 여러곳에서 조사하였지만, 마땅한 것을 찾을 수 없었다. 어떤 구현은 지나치게 파서 중심이고, 어떠한 것은 단순 텍스트치환 방식이었다.

마크다운 텍스트는 조금은 느슨한 구조적 특징이 있고, 포맷터는 서버와 클라이언트에서 모두 사용할 수 있어야 그 유용성을 극대화 할 수 있다.

본 구현은 다음의 조건을 만족하도록 설계되었다.

  • 첫 번째, 서버와 클라이언트 구현에서 같은 코드를 사용해야 한다.
  • 두 번째, 마크다운 텍스트의 구조적 특징을 모두 수용할 뿐만 아니라, 확장 가능해야한다.

파서는 다음의 절차를 거친다.

  1. 문법에 사용되는 문자와 공백문자의 개수를 조사하여 기본 블록을 구별한다.
  2. '*', '-'과 같이 서로다른 블록을 구별하는데 함께 사용되는 문자를 확인한다.
  3. 인용블록, 목록의 경우 하위 블록이 있을 수 있으므로 이들에서는 재귀적으로 반복한다.
  4. 인라인 요소에 대하여 텍스트 치환을 한다.

향 후 다음의 기능을 추가하는 것에 대하여 고려 중 이다.

  • 테이블
  • 참조 블록

2016-04-26 by Daejung Kim

목록 | 맨 위로 | 위로 | 아래 | 이전 | 다음