Posts tagged "마크다운"

마크다운 포매터 - 수평선

수평선 세개 이상의 빼기, 별표, 밑줄로 수평선을 그릴 수 있다. 만약 원하는 경우 빼기나 별표 중간에 공백을 넣을 수도 있다. 아래의 줄은 모두 수평선(HR 태그)을 삽입한다.

* * *

***

*****

- - -

---------------------------------------

마크다운 포매터 - 코드

코드블럭

프로그래밍이나 마컵 소스 코드를 표시하기 위해 형식화된 코드 블럭을 사용할 수 있다. 일반 문단과는 달리 코드 블럭의 줄은 문자적으로 해석된다. 마크다운 PRE와 CODE 태그의 코드블럭을 자동으로 줄바꿈한다.

마크타운에서 코드 블럭을 만들기 위해 간단히 각 줄을 적어도 4개 이상의 공백 이나 탭으로 들여쓰면된다. 예를들어:

이 것은 일반 문단:

이 것은 코드.

마크다운은 이 부분을 다음처럼 바꾼다:

<p>이 것은 일반 문단:</p>

<pre><code>이 것은 코드 </code></pre>

4개의 공백 또는 하나의 탭은 코드 블럭 각줄로부터 제거된다. 예를들어:

AppleScript의 예:

tell application "Foo"
    beep
end tell

는 다음처럼 바뀐다:

<p>AppleScript의 예:</p>

<pre><code>tell application "Foo"
    beep
end tell
</code></pre> 

코드 블럭은 들여쓰여지지 않은 행을 만날 때까지 계속된다(또는 글의 끝).

코드블럭에서 &와 왼쪽, 오른쪽 소괄호는 자동적으로 HTML 항목으로 바뀐다. 이런 기능 때문에 마크다운에서 HTML 소스코드를 아주 쉽게 삽입 - 복사하고 들여쓰기 - 할 수 있다. 마크다운은 &와 소괄호를 인코딩한 것도 잘 처리한다. 예를들어:

<div class="footer">
    &copy; 2004 Foo Corporation
</div>

는:

<pre><code>&lt;div class="footer"&gt;
    &amp;copy; 2004 Foo Corporation
&lt;/div&gt;
</code></pre>

로 바뀐다. 일반 마크다운 문법은 코드블럭에서는 처리할 수 없다. 예를들어 별표는 코드블럭에서 별표로 표시된다. 이것은 마크다운 자체의 문법을 설명할 때도 쉽게 사용할 수 있다.

마크다운 포매터 - 목록

목록

마크다운은 순차(숫자), 비순차(불릿) 목록을 지원한다.

비순차 목록은 항목 표시로 별표, 더하기, 빼기 - 상호 교환적 - 를 사용한다.

    * 빨간색  
    * 녹새  
    * 파란색  

    + 빨간색  
    + 녹색  
    + 파란색  

    - 빨간색  
    - 녹색  
    - 파란색  

과 같다. 순차 목록은 숫자에 점을 찍어 만든다:

    1. 새  
    2. 알  
    3. 털  

목록에 사용되는 실제 숫자는 HTML에 어떤 영향도 미치지 않는다. 마크다운은 위의 목록을 다음처럼 만든다:

    <ol>
    <li>Bird</li>
    <li>McHale</li>
    <li>Parish</li>
    </ol>

만약 위의 예 대신에:

    1. 새  
    1. 알  
    1. 털  

심지어:

    3. 새  
    1. 알  
    8. 털  

이라고 해도 정확히 같은 HtML이 만들어 진다. 중요한 점은 원한다면 순차 마크다운 목록에서 일반 숫자를 사용할 수 있고 따라서 소스의 숫자와 출판될 HTML의 숫자를 일치시킬 수 있다. 그러나 원하지 않는다면 마음대로 해도 된다.

그러나 혼란스러운 숫자를 사용해도 아직도 숫자는 1로 시작된다. 조만간 마크다운은 임의의 숫자로 시작하는 순차목록을 지원할 것이다.

항목 표시는 일반적으로 왼쪽 마진에서 시작하지만 최대 세개의 공백으로 들여써야 한다. 목록 표시는 하나 이상의 공백이나 탭이 이어져야 한다.

또 리스트를 보기 좋게 하기 위해 들여쓰기와 줄바꾸기를 사용할 수 있다.

    *   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  
        Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,  
        viverra nec, fringilla in, laoreet vitae, risus.  
    *   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.  
        Suspendisse id sem consectetuer libero luctus adipiscing.  

그러나 다음과 같이 써도 된다:

    *   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  
    Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,  
    viverra nec, fringilla in, laoreet vitae, risus.
    *   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.  
    Suspendisse id sem consectetuer libero luctus adipiscing.  

목록 항목을 빈줄로 분리하면 마크다운은 HTML에서 P 태그로 이 항목을 감싼다. 예를들어:

    *   새  
    *   마술은  

다음처럼 변환된다.:

    <ul>
    <li>새</li>
    <li>마술</li>
    </ul>

그러나:

    *   새

    *   마술

은 다음처럼 변환된다:

    <ul>
    <li><p>Bird</p></li>
    <li><p>Magic</p></li>
    </ul>

리스트 항목은 여러 문단으로 구성될 수 있다. 목록 항목에서 이어지는 문단은 적어도 4개 이상의 공백이나 하나 이상의 탭으로 들여써야 한다.

    1.  This is a list item with two paragraphs. Lorem ipsum dolor  
        sit amet, consectetuer adipiscing elit. Aliquam hendrerit  
        mi posuere lectus.  

        Vestibulum enim wisi, viverra nec, fringilla in, laoreet  
        vitae, risus. Donec sit amet nisl. Aliquam semper ipsum  
        sit amet velit.  

    2.  Suspendisse id sem consectetuer libero luctus adipiscing.  

이어지는 각 줄을 들여쓰는 것이 보기에 좋다. 그러나 다시 다음처럼 조금 혼란스럽게 사용해도 된다:

    *   This is a list item with two paragraphs.  

        This is the second paragraph in the list item. You're  
    only required to indent the first line. Lorem ipsum dolor  
    sit amet, consectetuer adipiscing elit.

    *   Another item in the same list.  
    To put a blockquote within a list item, the blockquote’s > delimiters need to be indented:  

    *   A list item with a blockquote:  

        > This is a blockquote
        > inside a list item.

목록 항목에 코드 블럭을 두기위해 두배의 들여쓰기 - 8개의 공백 또는 두번의 탭이 필요하다.:

    *   A list item with a code block:  

            <code goes here>

이 것은 다음과 같이 씀으로서 우연히 순차목록을 만들 가능성을 없애기 위해 필요하다.

    1986. What a great season.

다른 말로하면 줄 시작 부분의 숫자, 마침표, 공백. 이 것을 피하기 위해 마침표를 이스케이프할 수 있다.

    1986\. What a great season.

마크다운 포매터 - 인용

인용

마크다운은 전자우편 형식의 > 문자를 인용에 사용한다. 만약 전자우편의 인용 규칙에 익숙하다면 마크다운에서 어떻게 인용하는지 알 수 있다. 강제로 줄바꿈된 문자열이고 각행 앞에 >를 두면 가장 잘 보인다.

    > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,  
    > consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.  
    > Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.  
    >   
    > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse   
    > id sem consectetuer libero luctus adipiscing.  

마크다운은 강제로 줄바꿈 된 첫줄의 앞에 >만 두어도 인용하는 것이 가능하다.

    > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,  
    consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.  
    Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.  

    > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse 
    id sem consectetuer libero luctus adipiscing.  

추가적으로 >를 덧붙임으로서 인용안에 인용을 할 수도 있다.

    > This is the first level of quoting.  
    >  
    > > This is nested blockquote.  
    >  
    > Back to the first level.  

인용은 다른 마크다운 요소, 제목, 목록, 코드 블럭을 포함할 수 있다.

    > ## This is a header.  
    >   
    > 1.   This is the first list item.  
    > 2.   This is the second list item.  
    >   
    > Here's some example code:  
    >   
    >     return shell_exec("echo $input | $markdown_script");  

일부 문서 편집기는 전자우편형식의 인용을 쉽게할 수 있는 방법을 제공한다. 예를들어 BBEdit는 블럭을 지정하고 텍스트 메뉴에서 이용 수준을 선택할 수 있다.

마크다운 포매터 - 제목

헤더

마크다운은 두 가지 형식, Setext와 atx 형식의 제목을 지원한다.

Setext 형식의 헤더는 등호(큰 제목)와 빼기(작은 제목) 기호를 밑줄로 사용한다. 예를들어:

    이것은 H1 입니다.
    ============= 

    이것은 H2 입니다.
    -------------  

밑줄의 수는 여러 개이면 동작한다.

Atx 형식의 헤더는 줄 시작에서 1-6개의 해시 문자를 사용한다. 헤더의 수는 제목의 크기에 따른다. 예를들어:

    # 이것은 H1 입니다.

    ## 이 것은 H2 입니다.

    ###### 이 것은 H6 입니다.

옵션으로 atx 헤더를 닫을 수 있다. 이 것은 순전히 장식용이다 — 이렇게 하는 것이 더 나아 보인다면 이 것을 사용할 수 있다. 닫는 해시는 시작 해시의 수와 같을 필요는 없다. (시작 해시의 수가 제목의 크기를 결정한다.):

    # 이 것은 H1 입니다. #

    ## 이 것은 H2 입니다. ##

    ### 이 것은 H3 입니다. ######

마크다운 포매터 - 문단과 줄바꿈

문단과 줄바꿈

문단은 하나 또는 그 이상의 행의 모임으로 하나 이상의 빈줄로 분리한다. (빈줄은 빈줄 - 아무것도 포함하지 않은 줄이지만 공백과 탭은 공백으로 간주된다 - 처럼 보이는 줄 이다.) 일반 문단은 공백이나 탭으로 들여쓰지 않는다.

“하나 이상의 줄의 모임”이 함축하고 있는 것은 마크다운이 “강제 줄바꿈” 문단을지원하는 것을 의미한다. 이것이 다른 문단에서 줄바꿈 문자는 매번 <br /> 태그로 바꾸는 TEXT-HTML 변환 포매터(무버블 타입의 줄바꿈 변환 옵션 포함)와 다소 다른 점이다.

마크다운을 사용해서 <br />를 삽입하려면 줄 끝에 하나 이상의 공백을 두고 엔터를 입력하면 된다.

물론 이 것은 <br /> 태그를 만들기 위해 다소의 노력이 필요하다. 간단히 “각 줄을 바꾸는 <br />” 규칙은 마크다운에서 동작하지 않는다. 마크다운의 전자메일 형식의 인용과 다중 패러그래프 목록은 강제로 줄바꿈할 때 가장 잘 - 보기에도 나은 - 동작한다.

마크타운 - 특수문자 자동처리

특수문자 자동처리

HTML에서는 두 개의 문자(<와 &)를 특서 처리할 필요가 있다. 왼쪽 작은 괄호는 태그를 시작할 때 필요하며 &는 HTML 항목을 표시할 때 사용된다. 만약 이들을 일반 문자로 사용하려면 이들 항목을 <, &처럼 처리를 해 주어야 한다.

특히 &는 웹 상에서 글을 쓰는데에 조금 골치아픈 문제를 발생한다. 만약 ‘AT&T’에 대해 쓰려면 ‘AT&T’라고 써야 한다. 심지어 URL에도 &는 포함된다. 따라서 다음과 같은 링크를

    http://images.google.com/images?num=30&q=larry+bird

링크하려면

    http://images.google.com/images?num=30&amp;q=larry+bird

처럼 href의 값을 인코딩해야 한다. 말할 필요가 없지만 이 것은 잊어버리기 쉽다. 아마 이 것이 잘만들어진 웹사이트에서도 가장 흔하게 볼 수 있는 HTML 오류일 것이다.

마크다운은 이들 문자를 주의깊게 처리함으로서 자연스럽게 사용할 수 있도록 해준다. 만약 HTML 항목으로서 &를 사용하면 이 것은 바뀌지 않고 남는다. 그렇지 않으면 &로 바뀐다.

따라서 기사에 저작권 기호를 포함하고 싶다면:

    &copy;

처럼 사용하면 된다. 마크다운은 이 것을 바꾸지 않는다. 그러나:

    AT&T

처럼 쓴다면 마크다운은 다음처럼 바꾼다:

    AT&amp;T

비슷하게 마크다운은 인라인 HTML을 지원하기 때문에 HTML 태그의 구분자로서 소괄호를 사용한다면 마크다운은 그러한 것도 처리한다. 그러나 다음처럼 쓰면:

    4 < 5

마크다운은 이 것을:

    4 &lt; 5

처럼 바꾼다. 그러나 마크다운 단일요소와 블럭요소에서 소괄호와 & 기호는 항상 자동적으로 인코드된다. 이 것은 마크다운을 사용해서 HTML 코드를 쉽게 쓸 수 있도록 하는 것이다. (HTML 문법에 대해 쓰기위해서는 아주 끔찍한 형식인 원시 HTML이다. 모든 <과 &에 대해 처리를 해주어야 하기 때문이다.)

마크다운 포매터 - 목차

Markdown: Syntax라는 문서를 번역하면서 마크다운 포매터에 대해 공부하기로 했습니다. 그 이유는 다음 두개의 글을 읽어 보시기 바랍니다.

목차

모든 내용에 대한 간단한 번역이 끝났습니다. 이제 시간이 나는대로 인간이 읽기 편하게 바꾸도록 하겠습니다.

내글

마크다운과 TTML 포매터

텀블을 사용하면서 사용하게된 포매터가 마크다운 포매터이다. 일반적으로 글을 쓰면서 마크업을 할때에는 1. 글쓰기, 2. 블럭지정, 3. 태그지정의 과정을 거친다. 이런 방법은 실제 글을 쓰는데에는 아무런 도움을 주지 못한다. 태그를 지정하는 동안 머리에 떠오른 착상이 사라지기 때문이다.

그래서 난 글을 쓴 뒤 태그를 지정한다. 글을 쓸때마다 느끼는 점은 글을 써 내려가면서(Down), 태그를 지정(Mark) 할 수 있으면 좋겠다는 생각을 하곤 했다. 그리고 텀블을 사용하면서 위키에서 사용하고 있는 마크다운 포매터가 글을 쓰는데 가장 적합한 포매터라는 것을 느꼈다. 다음을 보자.

TTML

  1. 글을 쓴다.
  2. 블럭을 지정한다.
  3. <B>내용</B>처럼 태그를 지정한다.

마크다운

별표를 두개 입력하고 내용을 쓴 뒤 다시 별표를 두개 입력한다.

즉 글을 쓰면서 글을 쓰는 역순으로 블럭을 지정할 필요가 없어진다는 점이다. 글을 써 내려가면서 마크업을 할 수 있기 때문에 마크다운이라는 이름이 붙은 듯 하다. 그런데 이 마크다운이 훨씬 편하다.

HTML을 모르면? 마크다운을 사용하자!

Thanks to Tumblr. Theme by Thijs.