소프트웨어Markdown

5편. Markdown - Table, Code Block

, , , , , , ,

목차

  1. Table 작성
  2. Code 강조 작성


Table 작성

  • Markdown에서 Table 그리기

Markdown에서 Table은 유연하게 그리기가 어렵다. 유연하게 그리기 위해서는 HTML 태그를 사용하는 쪽이 훨씬 낫다.

게다가 Microsoft Word나 Excel을 사용하여 테이블을 그려 봤지만, 웹에서는 테이블을 처음 그려보는 사람들에게는 Markdown의 테이블 문법이 조금 낯설 수 있다. 솔직히 말해 웹에서 테이블 그리는 방법이 쉽게 이해될리가 없다. 그러니 처음 접하시는 분들에게 어려운 건 당연한 것이다.

필자에게 문의했던 많은 분들에게 수 백 번 다양한 방법으로 설명해 보았으나, 웹에서 테이블을 처음 그리시는 분들이 그 기본 개념을 어려워 하는건 어쩔 수 없었다. 자, 두려움을 떨치기 위해 그런 분들에게는 딱 한마디만 기억하라고 말씀 드리고 싶다.


“외우세요. 외워 쓰다보면 익숙해집니다.”

Makrdown에서 Table을 그릴 때 쓰는 문법에도 몇 가지 외워야 할 규정이 있다.

① 테이블을 그릴 때는 구분 기호 | 표시를 사용
② 칼럼 수 만큼 구분 기호를 사용해야 함 (예제 참고)
③ - - - 표시로 테이블의 헤더와 내용을 구분

1
2
3
4
5
| 예제 | 설명 |
| --- | --- |
| 테이블 | 구분기호 |
| 내용 설명 | 마크다운 |
| 문법 | 외우세요 |
예제 설명
테이블 구분기호
내용 설명 마크다운
문법 외우세요

  • Markdown Table의 항목을 정렬하기

Markdown에서 항목들을 정렬하는 방법은 두 번 째 라인, 즉, 헤더와 내용을 구분하는 라인인 - - -에 : 표시를 사용한다. 예제는 아래와 같다.

1
2
3
4
5
| 왼쪽 | 가운데 | 오른쪽 |
| :-------- | :--------: | --------: |
| 테이블 | 구분기호 | 사용 |
| 내용 설명 | 마크다운 | 정렬 |
| 문법 | 외우세요 | 사용방법 |
왼쪽
가운데

오른쪽
테이블
구분기호

오른쪽, 가운데 정렬
내용 설명
마크다운

정렬
문법
외우세요

사용방법

위의 : 표시로 구성하는 테이블의 문자 위치는 특정 셀에서만 작동하지 않고, 전체 열(column)에서 적용된다. 또한 현재 보고 있는 페이지와 같이 Github Pages에서 특정 Framework와 Theme을 이용하는 경우 해당 Framework와 Theme의 CSS에 따라 적용되지 않을 수 있다. 그럴 때는 아래와 같이 작성한다.

정렬할 때는 <center>와 <p style>의 text-align을 사용한다. 예제는 아래와 같다.

1
2
3
4
5
| 왼쪽 | <center>가운데</center> | 오른쪽 |
| --- | --- | --- |
| 테이블 | 구분기호 | <p style="text-align: center">가운데 정렬</p> |
| 내용 설명 | 마크다운 | <p style="text-align: right">오른쪽 정렬</p> |
| 문법 | 외우세요 | 사용방법 |

아래와 같이 나타난다.

왼쪽
가운데

오른쪽
테이블 구분기호

가운데 정렬
내용 설명 마크다운

오른쪽 정렬
문법 외우세요 사용방법

또 하나 미리 알아 두시면 고생을 덜하게 되는 사항 중 하나는 「Markdown Table의 기능적 한계」이다.

미리 몇 번 언급했지만, Markdown은 점점 복잡해져 가는 HTML의 구조를 단순화 시키기 위한 목적으로 발전했다보니 기능상의 제약이 있다. 그래서 아래와 같이 복잡한 구조의 테이블을 그리기에 Markdown은 적합하지 않다.


Markdown에서 HTML로 Table 그리기


Markdown만으로 이런 복잡한 구조의 테이블에 많은 량의 데이터를 넣어봤던 사람은 알겠지만, 이런 경우는 Markdown 문법을 사용하는 쪽이 훨씬 복잡하고 유지보수성도 낮아진다. 그러니 이런 경우는 그냥 HTML 문법을 사용하여 Markdown에서 Table을 그리면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table style="border: 2px;">
  <tr>
    <td> 컨텐츠 내용1 </td>
    <td> 컨텐츠 내용2 </td>
    <td> 컨텐츠 내용3 </td>
  </tr><tr>
    <td colspan="3"> 컨텐츠 내용4 </td>
  </tr><tr>
    <td> 컨텐츠 내용5 </td>
    <td colspan="2"> 컨텐츠 내용6 </td>
  </tr><tr>
    <td rowspan="3"> 컨텐츠 내용7 </td>
  </tr><tr>
    <td> 컨텐츠 내용8-1 </td>
    <td> 컨텐츠 내용9-1 </td>
  </tr><tr>
    <td> 컨텐츠 내용8-2 </td>
    <td> 컨텐츠 내용9-2 </td>
  </tr>
</table>

위 태그는 필자가 사용 중인 Hexo의 Hueman Theme에서는 작동하지 않는다. GFM에서 정의한 CSS보다 상위에서 Theme의 CSS가 먼저 적용되기 때문이다. Github Markdown에서 사용 시 정상 작동한다.



Code 강조 작성

  • Markdown 코드 블록 생성

Markdown에서 프로그래밍 언어를 사용할 때는 ``` 을 사용한다. ` 3개를 붙여 사용한다.

1
2
3
```
programming syntax를 이렇게 기입한다.
```

위 Code Block의 결과는 아래와 같이 나타난다.

1
programming syntax를 이렇게 기입한다.

  • 코드 블록 내 강조

코드 블록 내에서 특정 구절을 강조할 때는 `를 넣어 사용한다. 

1
코드 블록 내 `강조`는 single grave mark를 `양쪽에 붙여` 사용한다.

코드 블록 내 강조는 single grave mark를 양쪽에 붙여 사용한다.


  • 프로그래밍 언어별 코드 블록

프로그래밍 언어마다 다른 스타일을 적용하기 위해서는 아래와 같이 ``` 뒤에 프로그래밍 언어의 이름을 사용한다. 아래는 HTML을 위한 문법이며 Markdown에서는 html 또는 xml로 사용한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
```html
<!-- HTML 코드 블록 시작 -->

<!DOCTYPE html>
<html lang=ko>
<head>
  <title>천년나무의 블로그</title>
</head>
<body>
내용
</body>
</html>

<!-- HTML 코드 블록 끝 -->
```

위 Code Block의 결과는 아래와 같이 나타난다.

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- HTML 코드 블록 시작 -->

<!DOCTYPE html>
<html lang=ko>
<head>
  <title>천년나무의 블로그</title>
</head>
<body>
내용
</body>
</html>

<!-- HTML 코드 블록 끝 -->

HTML 외의 언어들의 경우도 아래와 같이 사용할 수 있다.

(1) Python 코드 블록의 예

1
2
3
4
5
6
7
8
9
10
11
12
13
```python
# Python 코드 블록 시작

s = "Python 입니다."
print (s)

a = 1
b = 2
c = a + b
print(c)

# Python 코드 블록 끝
```
1
2
3
4
5
6
7
8
9
10
11
# Python 코드 블록 시작

s = "Python 입니다."
print (s)

a = 1
b = 2
c = a + b
print (c)

# Python 코드 블록 끝

(2) JavaScript 코드 블록의 예

1
2
3
4
5
6
7
8
9
10
11
12
13
14
```javascript
  // JavaScript 코드 블록 시작

  (function (number) { 
    var textList = [": 홀수입니다.", ": 짝수입니다."]; 
    if (number % 2 == 0) { initText = textList[1]; } 
    else { initText = textList[0]; } 
  })(5); 
  
  console.log(initText); 
  console.log(textList);

  // JavaScript 코드 블록 끝
```
1
2
3
4
5
6
7
8
9
10
11
12
// JavaScript 코드 블록 시작

(function (number) { 
  var textList = [": 홀수입니다.", ": 짝수입니다."]; 
  if (number % 2 == 0) { initText = textList[1]; } 
  else { initText = textList[0]; } 
})(5); 

console.log(initText); 
console.log(textList);

// JavaScript 코드 블록 끝

Markdown에서 사용할 수 있는 프로그래밍 스타일은 여러가지가 있다. 이에 대한 자세한 이야기는 일반 사용자에게 어려울 수 있으므로, 관심이 없는 사용자들은 다음 문단은 그냥 넘기고 사용방법만 숙지해도 된다.

현재 필자가 쓰고 있는 블로그인 Hexo Framework의 Syntax Hightlight는 별도로 구현된 방식으로 사용한다. 이런 구현 스펙은 Creating and highlighting code blocks과 GFM fenced code block에 정의되어 있다.

아래의 목록은 Rhio Kim님의 블로그에서 가져온 목록이다. 아마 이 목록은 현재는 더 다양하게 변경되었을 텐데, 검색으로 찾기가 어려웠다. Rhio Kim님은 highlight.js가 52개 언어, 26개 구문 강조 스타일을 제공할 때 정리하셨다고 한다. 2021년 2월 현재 hightlight.js는 191개 언어, 97개 구문 강조 스타일을 제공하고 있다. 어떤 식으로 정리하셨는지 모르겠다. 새로운 내용을 알게 되면 본 페이지의 내용을 업데이트 하겠다.

Language key
1C 1c
ActionScript actionscript
Apache apache
AVR Assembler avrasm
Axapta axapta
Bash bash
C# cs
C++ cpp
Clojure clojure
CMake cmake
CoffeeScript coffeescript
CSS css
D d
Delphi delphi
Diff diff
Django templates django
DOS batch files dos
Erlang erlang
GLSL glsl
Go go
Haskell haskell
HTML (with inline css and javascript) html
HTTP http
Ini file ini
Java java
JavaScript javascript
JSON json
Lisp lisp
Lua lua
Markdown markdown / md
Matlab matlab
MEL mel
nginx nginx
Objective C objectivec
Parser 3 parser3
Perl perl
PHP php
Python python
Python’s profiler output profile
R r
RenderMan RIB rib
RenderMan RSL rsl
Ruby ruby
Rust rust
Scala scala
SmallTalk smalltalk
SQL sql
TeX tex
Vala vala
VBScript vbscript
VHDL vhdl
XML xml


주요 참고 자료