devnauts

밋밋한 테이블을 보기좋게!

직접 Table 태그를 사용하여 테이블을 구성하거나, Pandoc 툴 등을 사용하여 HTML을 생성하였을 경우, 만들어진 테이블은 스타일이 없기 때문에 너무 밋밋해보입니다. 그렇다고 단순하게 border="1" 이렇게 스타일을 줘버리면 HTML 기본의 보기에 아름답지 않은 경계선이 붙게 됩니다. 다음은 보기 좋은 Single Line 경계선을 추가하는 몇가지 스타일 샘플입니다.

<샘플1>

TABLE 태그 –> style="border-collapse:collapse;" border="1"

TH, TD 태그 –> style="padding:5px 5px"

Item	Amount	Cost
Orange	10	7.00
Bread	4	3.00
Butter	1	5.00
Total		15.00

<샘플2 - 티스토리 스타일>

TABLE 태그 –> style="border-collapse:collapse;border:1px solid #ccc;"

TH, TD 태그 –> style="border:1px solid #ccc;padding:5px 5px"

Item	Amount	Cost
Orange	10	7.00
Bread	4	3.00
Butter	1	5.00
Total		15.00

<샘플3 - 미디어위키 스타일>

TABLE 태그 –> style="background-color: #f8f9fa;color: #222;border-collapse:collapse;border: 1px solid #a2a9b1;"

TH, TD 태그 –> style="border: 1px solid #a2a9b1;padding:5px 5px"

Item	Amount	Cost
Orange	10	7.00
Bread	4	3.00
Butter	1	5.00
Total		15.00

참고 사항

티스토리 구 편집기로 테이블을 추가할 경우 테이블 스타일이 아래와 같이 오류가 있어 폰트 설정이 적용되지 않습니다.

<table class="txc-table" style="border:none;border-collapse:collapse;;font-family:" 맑은="" 고딕",="" sans-serif;font-size:13px"="" width="664" cellspacing="0" cellpadding="0" border="0">

제대로 될려면 아래와 같이 수정이 필요합니다.

<table class="txc-table" style="border:none;border-collapse:collapse;;font-family:맑은 고딕, sans-serif;font-size:13px" width="664" cellspacing="0" cellpadding="0" border="0">

참고 사항 - 2

티스토리 콘텐트 설정 중, ‘단락 앞뒤에 공백’ 옵션을 사용으로 하였을 경우, 테이블내 컨텐츠에도 공백이 적용되어 아래와 같이 행높이가 확장되어 보이게 됩니다. 필요에 따라 해당 옵션을 해제하거나, 테이블에 추가적인 행높이 스타일을(;height:xx) 사용하기 바랍니다.

참고 사항 - 3

• [보너스] Emacs용 스타일 자동 추가 스크립트

마크다운 문법은 무척 편리하기는 한데 테이블 관련 요소가 없는 점은 아쉽습니다.

미디어위키 문법에는 테이블 관련 요소가 있어 다음의 Pandoc을 사용하여 HTML로 변환하는 방법을 사용하여 HTML로 변환한 후 갖다붙이는 방식으로 활용할 수 있습니다.

Pandoc을 사용한 변환 커맨드

pandoc -s -f mediawiki -t html <입력파일명> -o <출력파일명>

>> Pandoc을 사용하여 Markdown -> HTML 변환하기

완전 기초 샘플

<변환 전>

다음 두가지 방식 다 사용가능합니다. (row를 나눠서 vs. 한줄에)

{|
! Item
! Amount
! Cost
|-
|Orange
|10
|7.00
|-
|Bread
|4
|3.00
|-
|Butterㅡ
|1
|5.00
|-
|Total
|
|15.00
|}

Or

{|
! Item!! Amount!! Cost
|-
|Orange||10||7.00
|-
|Bread||4||3.00
|-
|Butter||1||5.00
|-
|Total||||15.00
|}

<변환 후>

Item	Amount	Cost
Orange	10	7.00
Bread	4	3.00
Butter	1	5.00
Total		15.00

약간 고오급 샘플

HTML 속성에 해당하는 내용을 추가로 입력할 수 있다. 셀 속성의 경우는 셀 내용물과 |로 구분하여 입력한다.

<변환 전>

{| style="color:green; background-color:#ffffcc;" cellpadding="10"
! Item
! Amount
! Cost
|-
| colspan="3" style="text-align:center;" |Orange
|-
|Bread
|4
|3.00
|-
|Butter
|1
|5.00
|-
|Total||||15.00
|}

<변환 후>

Item	Amount	Cost
Orange
Bread	4	3.00
Butter	1	5.00
Total		15.00

제약사항

그란데 말입니다. Pandoc을 사용하여 HTML로 변환할 경우, 미디어위키 테이블의 모든 문법을 지원하지는 않아서 위 예제 중 완전 기초 샘플 수준까지만 변환이 가능합니다. (스타일 등 속성 적용 안 됨)

스타일 적용

이렇게 생성된 테이블은 스타일이 없기 때문에 너무 밋밋해보입니다. 다음 글을 참고해 스타일을 추가해보는게 좋습니다.

>> 테이블에 스타일 추가하기

참고 사이트

• https://www.mediawiki.org/wiki/Help:Tables : 미디어 위키 테이블 문법 도움말

현재의 티스토리 에디터는 직접 markdown 편집도 지원을 하고 있지만, 구 버전의 편집기 사용시에 다음과 같은 markdown 소스를 작성하여 HTML 변환을 한 후 티스토리 소스에 붙여넣을 경우,

## 제목1
본문

## 제목2
- 리스트1
- 리스트2

본문

## 제목2
본문

- 리스트1
- 리스트2

아래와 같이 깔끔하지 않게 나오지 않는 경우가 있는데, (특히, 단락 앞뒤에 공백 옵션을 사용하지 않았을 경우. 적용되는 스킨의 CSS에 따라 차이는 있을 수 있음.)

이 변환기를 사용할 경우, 다음과 같이 추가적인 줄바꿈을 넣어줘서,

## 제목1
<p><br></p>
본문
 
<p><br></p>
<p><br></p>
## 제목2
- 리스트1
- 리스트2
 
본문
 
<p><br></p>
<p><br></p>
## 제목2
<p><br></p>
본문
 
- 리스트1
- 리스트2

HTML 변환후에, 아래 결과와 같이 보기좋게(?) 표시될 수 있게합니다.

변환기 소스

md_convert.py:

# -*- coding: utf-8 -*-
#!/usr/bin/python

import sys

DOUBLE_BR_BEFORE_HEADER = True

STATUS_START = 0
STATUS_NONE = 1
STATUS_LIST = 2
STATUS_PRE = 3
STATUS_HEADER = 4

LINE_BR = "<p><br></p>\n"

def print_usage():
    print("usage: python md_convert.py [option]")
    print("Options:")
    print("-i input-file : 지정된 입력 파일을 사용하여 변환을 하고 입력 파일을 덮어씁니다.")
    print("-i input-file output-file : 지정된 입력 파일과 출력 파일을 사용하여 변환을 합니다.")

def is_ol_item(str):
    pos = str.find(". ")
    if pos == -1:
        return False
    return str[:pos].isdigit()

def go_convert(config):
    filename_in = config["filename_in"]
    filename_out = config["filename_in"]
    if "filename_out" in config:
        filename_out = config["filename_out"]

    print("\nconverting %s.." % filename_in)

    file_in = open(filename_in, 'r', encoding = "utf-8")

    all_line = []
    for line in file_in:
        all_line.append(line)
    file_in.close()

    all_line_new = []
    insidePre = False
    status = STATUS_START
    status_old = status

    for line in all_line:
        status_old = status

        line_strip = line.lstrip()
        if len(line_strip) > 0:
            if insidePre:
                if line_strip[:5] == "</pre":
                    insidePre = False
            else:
                if line_strip[:4] == "<pre":
                    insidePre = True
                    status = STATUS_PRE
                elif line_strip[:1] == "-" or is_ol_item(line_strip):
                    status = STATUS_LIST
                elif line_strip[:1] == "#":
                    status = STATUS_HEADER
                else:
                    status = STATUS_NONE
                    
            if DOUBLE_BR_BEFORE_HEADER and status == STATUS_HEADER and status_old != STATUS_START:
                all_line_new.append(LINE_BR)
                
            if status_old == STATUS_NONE:
                if status == STATUS_HEADER:
                    all_line_new.append(LINE_BR)
            elif status_old == STATUS_HEADER:
                if status == STATUS_NONE:
                    all_line_new.append(LINE_BR)
                if status == STATUS_HEADER:
                    all_line_new.append(LINE_BR)
        all_line_new.append(line)

    file_out = open(filename_out, 'w', encoding = "utf-8")
    for line in all_line_new:
        file_out.write(line)
    file_out.close()

    print("end")

config = {}

if len(sys.argv) >= 2:
    if sys.argv[1] == "-i":
        if len(sys.argv) == 3:
            config['filename_in'] = sys.argv[2]
            go_convert(config)
        else:
            config['filename_in'] = sys.argv[2]
            config['filename_out'] = sys.argv[3]
            go_convert(config)
    else:
        print_usage()
else:
    print_usage()

사용 방법

사용 방법: python md_convert.py [옵션]
옵션:
-i input-file             : 지정된 입력 파일을 사용하여 변환을 하고 입력 파일을 덮어씁니다.
-i input-file output-file : 지정된 입력 파일과 출력 파일을 사용하여 변환을 합니다.

PS1. pre 태그 내에서 소스 코드에 html 관련 코드를 사용할 경우, 충돌이 나서 (특히 pre 태그 관련, 당연한가?) 소스내 모든 <와 >를 &lt;와 &gt;로 바꿔줄 수 밖에 없었습니다.
PS2. 추가 작업 후보 : 소스 md에 줄바꿈이 있을 때만 추가적인 줄바꿈 삽입

Pandoc은 각종 포맷 상호간의 변환을 수행할 수 있는 유틸리티로 Markdown, HTML 사이의 변환도 지원한다. 지원되는 포맷은 홈페이지서 다음과 같은 다이어그램으로 설명하고 있다.

설치

1. https://github.com/jgm/pandoc/releases 에서 Pandoc 최신 버전을 다운받아 설치한다.

Markdown -> HTML 변환

• Markdown을 HTML로 변환 (-o <출력파일명>을 생략하면 화면으로 출력된다.)

  pandoc -f markdown -t html <입력파일명> -o <출력파일명>
  

• Github 스타일 Markdown을 HTML로 변환 (-o <출력파일명>을 생략하면 화면으로 출력된다.)

  pandoc -f markdown_github -t html <입력파일명> -o <출력파일명>
  

기타 변환

• 미디어 위키를 HTML로 변환 (미디어 위키 특징 : Markdown에서 사용할 수 없는 테이블 문법을 사용할 수 있어 참고할 만하다.)

  pandoc -s -f mediawiki -t html <입력파일명> -o <출력파일명>
  

• 미디어 위키 테이블 문법 도움말 : https://www.mediawiki.org/wiki/Help:Tables
• 마크다운 방식으로 테이블 작성 (미디어위키 테이블 문법 사용 예제)

참고 사이트

• Pandoc 홈페이지 : https://pandoc.org/
• 미디어 위키 홈페이지 : https://www.mediawiki.org/wiki/MediaWiki/ko

<테스트 환경>
- OS : Windows 7 (64bit)
- Pandoc 버전 : 2.0.5

사전 준비사항

Atom 에디터에서 Markdown -> 마인드맵 변환하기 위해서는 markdown-mindmap 패키지 설치가 필요하다.

사용 방법

아래와 같이 헤드라인 요소를 사용하여 작성한 내용을 마인드맵으로 변환할 수 있다. <h1> ~ <h6>까지만 존재하므로 최대 깊이는 6으로 제한된다.

# Root Node
## Node 1
### Node 1-1
### Node 1-2
## Node 2
### Node 2-1

Packages 메뉴에서 Mindmap view를 켜면 아래와 같이 변환된 내용을 볼 수 있다.

설치

1. Perl 프로그램을 설치한다. 여기서는 윈도우용 구현체 중 하나인 Strawberry Perl을 사용한다.

   
   

   • https://www.perl.org/get.html
   • http://strawberryperl.com/

     
     

2. 마크다운 본진에서 마크다운 스크립트를 다운받는다.

   
   

   • https://daringfireball.net/projects/markdown/

     
     

사용법

1. 결과를 화면으로 출력

   perl markdown.pl inputfile.txt
   

2. 결과를 파일로 저장 (헤더는 붙지 않는다)

   perl markdown.pl inputfile.txt > outputfile.html
   

설치하기

1. M-x를 누른 후, list-package를 입력한다.

2. markdown-mode를 찾아서 설치한다.

사용법

1. Markdown 모드로 전환 : M-x를 누른 후, markdown-mode를 입력한다.

2. GitHub 스타일의 markdown 모드(GitHub Flavored Markdown, GFM)로 전환 : M-x를 누른 후, gfm-mode를 입력한다.

Markdown 요소 입력 단축키

1. Markdown / GFM 모드에서 아래의 단축키들을 사용하여 Markdown 요소들을 한번에 추가/수정하는 것이 가능하다.

   - C-c C-t 1 : 1단계 제목 요소 입력
   - C-c C-t 2 : 2단계 제목 요소 입력
   - C-c C-s e : 이탤릭체 요소 입력
   - C-c C-s s : 볼드체 요소 입력
   - C-c C-s b : 인용 블럭 변환
   - C-c C-s c : 코드 블럭 변환
   - C-c C-a l : 인라인 링크 입력
   - C-c C-j : 리스트 아이템 입력
   - C-c - : 가로줄 입력
   - C-c C-k : 입력한 요소를 한번에 삭제
   

2. 보다 많은 단축키에 대해서는 참고 사이트나 emacs 상의 Markdown 메뉴를 참고하도록 한다.

HTML 변환 관련 단축키

Markdown –> HTML 변환 기능을 지원하기 위해 다음 단축키들을 제공한다.

- C-c C-c m : 변환한 결과를 다른 버퍼창을 통해 보여준다.
- C-c C-c e : 변환한 결과를 HTML 파일로 저장한다.
- C-c C-c p : 변환한 결과를 브라우저를 통해 보여준다.

[참고] 많은 경우, 생성된 HTML에 charset 설정이 되어있지 않기 때문에 한글 사용시 제대로 보이지 않을 수 있다. <head>~</head> 사이에 아래와 같은 형태로 인코딩 지정을 추가하면 한글을 제대로 볼 수 있다.

<head>
...
<meta charset="utf-8">
</head>

외부 변환 프로그램 세팅

HTML 변환 기능을 사용하기 위해서는 외부 변환 프로그램 세팅이 필요하다. 변환 프로그램은 플랫폼의 종류에 따라 여러가지가 있지만 여기서는 윈도우 환경 등에서 사용할 수 있는 MultiMarkdown 프로그램을 사용하겠다.

1. http://fletcherpenney.net/multimarkdown/을 방문하여 다운로드 페이지에서 프로그램을 다운받아 설치한다. (스페이스가 포함되지 않은 경로에 설치하여야 한다.)
   
2. .emacs 파일에 다음과 같이 MultiMarkdown 실행파일의 경로를 추가한다.

   (setq markdown-command "C:/MultiMarkdown/bin/multimarkdown.exe")
   

Markdown Preview Mode 설치

수동으로 Markdown을 HTML으로 변환한 결과를 확인하려면 번거로운 점도 있고, 위에서 언급한 한글 인코딩 문제도 있기 때문에 markdown preview mode도 같이 설치할 것을 추천한다. 패키지 리스트에서 markdown-preview-mode를 검색해서 설치한다.

설치 후, Markdown 모드에서 M-x markdown-preview-mode를 입력하면 브라우저 창이 뜨고, 저장시 실시간으로 변환 결과를 확인할 수 있다. 물론 한글 문제도 없다.

Preview mode를 종료하려면, M-x markdown-preview-cleanup을 입력하면 사용된 웹서버가 종료된다.

참고 사이트

• http://jblevins.org/projects/markdown-mode/

<테스트 환경>
OS : Windows 7
Emacs 버전 : Emacs 24.3 윈도우