WordPress.com에서 예쁘게 소스 코드 삽입하기

Wordpress.com에는 플러그인을 설치할 수 없기 때문에, Syntax Highlighting 기능을 사용할 수 없다고 생각하는 사람들이 많다. 하지만 Wordpress.com에서 제공하는 Shortcode를 이용하면 Wordpress.com 블로그에서도 Syntax Highlighting 기능을 사용할 수 있다.

Advertisements

워드프레스 블로그에 소스 코드 삽입하기

설치형 워드프레스를 사용하는 사람들이 소스 코드를 블로그에 삽입할 때는 대부분 Syntax Highlighting 기능을 추가하는 플러그인을 이용한다. 그래서 많은 사람들이 가입형 워드프레스에는 Syntax Highlighting 기능이 없다고 생각하곤 한다. 하지만 WordPress.com에도 Syntax Highlighting 기능이 있다. 다만 에디터에 툴바를 통해서 삽입하는 형태가 아니다보니 많은 사람들이 잘 모르고 있을 뿐이다. 아주 간단한 팁이지만 오늘은 WordPress.com에서 소스 코드를 예쁘게 삽입하는 방법을 소개해보려 한다.

WordPress.com에서 Shortcode로 소스 코드 삽입하기

가입형 워드프레스인 WordPress.com은 보안 문제 때문에 대부분의 HTML 코드를 막아 놓았다. 그래서 유튜브등의 비디오도 유튜브에서 제공하는 삽입 코드로 동영상 삽입이 불가능하다. WordPress.com에서는 그 대안으로 상당수의 shortcode를 제공해서 shortcode로 여러가지를 할 수 있도록 해 놓았다. 소스 코드를 삽입할 때도 마찬가지다. 소스 코드를 삽입할 때는 [code]라는 shortcode를 이용한다. [code] shortcode는 다음과 같은 식으로 사용한다.

[code] shortcode 사용법
[code language="언어 파라미터"]
소스 코드

[/code]

[code] shortcode 예시
[code language="css"]
#button {
font-weight: bold;
border: 2px solid #fff;
}

[/code]

#button {
    font-weight: bold;
    border: 2px solid #fff;
}

WordPress.com [code] Shortcode 언어 파라미터

WordPress.com에서 지원하는 언어는 다음과 같다. 만약에 언어 파라미터를 지정하지 않으면, 기본으로 “text”로 지정되며 Syntax Highlighting 기능이 적용되지 않는다.

  • actionscript3
  • bash
  • clojure
  • coldfusion
  • cpp
  • csharp
  • css
  • delphi
  • erlang
  • fsharp
  • diff
  • groovy
  • html
  • javascript
  • java
  • javafx
  • matlab (keywords only)
  • objc
  • perl
  • php
  • text
  • powershell
  • python
  • r
  • ruby
  • scala
  • sql
  • vb
  • xml

WordPress.com [code] Shortcode 옵션 설정

[code] Shortcode 에 몇가지 파라미터를 추가함으로써, 소스 코드가 표현되는 모습을 바꿔주는 것이 가능하다. 아래 목록들이 WordPress.com [code] Shortcode 에서 지원하는 옵션 파라미터들이다.

  • autolinks (true/false) : [기본설정: ture] 코드안의 모든 URL을 클릭 가능할 수 있게 만든다.
  • collapse (true/false) : [기본설정: false] 이 파라미터가 ‘ture’로 설정되면 페이지가 로딩될 때 코드 박스가 접혀져 있게된다. 방문자가 코드를 보려면 클릭해야 한다. 코드가 길 때 유용한 옵션이다.
  • firstline (number) : [기본설정: 1] 코드 왼쪽에 행번호의 시작 숫자를 지정한다.
  • gutter (true/false) : [기본설정: ture] 이 파라미터가 ‘false’로 설정되면 행번호가 나오지 않는다.
  • highlight (comma-seperated list of numbers) : [기본설정: 없음] 숫자를 설정하면 그 슷자에 해당하는 행이 강조된다. “4,7,19” 처럼 행을 콤마로 구분해서 여러 행을 지정할 수 있다.
  • htmlscript (true/false) : [기본설정: false] 이 파라미터가 ‘ture’로 설정되면 HTML/XML 부분이 강조된다. 예를 들어 PHP와 HTML이 섞여있는 경우에 유용하다. 이 옵션은 특정 언어에서만 동작한다.1
  • light (true/false) : [기본설정: false] 이 파라미터가 ‘true’로 설정되면 행번호와 툴바가 나오지 않는다. 이 옵션은 삽입할 코드가 한 줄이나 두 줄일 때 유용하다.
  • padlinenumbers (true/false/integer) : [기본설정: false] 이 파라미터는 행번호의 자리수를 지정한다. 이 파라미터를 ‘true’로 설정하면 모든 행번호의 자리수가 가장 큰 행번호의 자리수로 통일된다. 즉, 17행짜리 코드라면 ‘1’은 ’01’로, ’10’은 ’10’으로 표시된다. 이 파라미터를 ‘false’로 설정하면 행번호의 자리수가 그대로 나온다. 즉, 1행은 ‘1’로 10행은 ’10’으로 표시된다. 이 파라미터를 숫자로 지정하면 소스코드가 몇행인지와는 상관없이 행번호의 자리수를 지정된 숫자만큼으로 표시한다.
  • title (string) : [기본설정: 없음] 코드 블락의 제목을 설정한다. ‘collapse’ 파라미터를 ‘ture’로 설정했을 때 특히 유용하다.

WordPress.com [code] Shortcode 옵션 예시

1. “collapse” 파라미터와 “title” 파라미터를 적용 (클릭해야 소스 코드가 보인다.)
[code language="css" collapse="ture" title="collapse와 title 파라미터 적용"]

#button {
    font-weight: bold;
    border: 2px solid #fff;
}

2. “firstline” 파라미터, “htmlscript” 파라미터, “highlight” 파라미터를 적용
[code language="php" firstline="5" htmlscript="true" highlight="14, 18"]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>WordPress.com Code Example</title>
</head>
<body>
    <h1>WordPress.com Code Example</h1>

    <p>This line is highlighted.</p>

    <p><?php echo 'Hello World!'; ?></p>
 
    <p>This line is highlighted, too.</p>
 
    <p>This line is very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long.</p>
 
    <div class="foobar">
        This    is  an
        example of  smart
        tabs.
    </div>
 
    <p><a href="http://wordpress.com/">WordPress.com</a></p>
</body>
</html>

3. “padlinenumbers” 파라미터를 적용
[code language="css" padlinenumbers="10"]

#button {
    font-weight: bold;
    border: 2px solid #fff;
}

마크다운을(Markdown) 사용할 때 소스 코드 삽입하는 방법

WordPress.com에서는 현재 마크다운을 정식으로 지원하고 있다. 마크다운으로 글을 쓸 때도 위에서 소개한 [code] Shortcode를 그대로 사용 가능하다. 그리고 추가로 GFM(GitHub Flavored Markdown) 스타일로 소스 코드를 삽입하는 것도 가능하다. GFM(GitHub Flavored Markdown) 스타일로 소스 코드를 삽입 방법은 다음과 같다.

※ GFM(GitHub Flavored Markdown) 스타일 소스 코드 삽입 방법

```언어 파라미터
소스코드
```

※ GFM(GitHub Flavored Markdown) 스타일 소스 코드 삽입 방법 예시

```css
#button {
    font-weight: bold;
    border: 2px solid #fff;
}
```
#button {
    font-weight: bold;
    border: 2px solid #fff;
}

마크다운을 사용할 때 이렇게 GFM(GitHub Flavored Markdown) 스타일로 소스 코드를 삽입할 수 있기는 하지만 [code] Shortcode를 이용할 때처럼 옵션을 설정하는 것이 불가능하다는 단점도 있다. 그러나 마크다운으로 글을 자주 쓰고, 다른 곳에도 같을 글을 올리는 경우가 많다면 WordPress.com에서 제공하는 Shortcode를 쓰는 것보다는 GFM(GitHub Flavored Markdown) 방식으로 소스 코드를 삽입하는 것이 더 좋을 수 있을 것이다.

※ 이 글은 WordPress.com Support페이지의 ‘Posting Source Code’를 참조했다.


  1. 어떤 언어에서만 가능한지에 대해서는 WordPress.com Support 페이지에도 설명하고 있지 않다. 

WordPress.com 블로그에서 Display Posts Shortcode로 글목록을 마음대로 보여주기

Wordpress.com 블로그에서 “Display Posts Shortcode” 를 이용하면 글목록을 커스터마이징해서 출력하는 것이 가능하다. 이 글에서는 그것을 이용해서 글제목만 출력하는 방법, 특정 카테고리나 태그에 해당하는 글의 목록만 출력하는 방법, “Display Posts Shortcode” 를 활용한 전면페이지 만드는 방법등에 대해서 설명해본다.

WordPress.com에서 제공하는 글목록

Wordprss.com에서 기본적으로 제공하는 글목록의 종류는 세가지이다. “카테고리별 글목록”, “월별 글목록”, “태그별 글목록” 이 그 세가지이다. 이렇게 기본적으로 제공되는 글목록들은 위젯 기능을 통해 사이드바에 넣을 수도 있고, 메뉴에 넣는 것도 가능하다.

하지만 이 글목록 기능에는 단점이 한가지 있는데, 그것은 바로 커스터마이징이 불가능하다는 것이다. 이런 것이 특히 한국 사람들에게는 불편하게 생각될 수 있는데, 그 이유는 한국 블로그들의 글목록과 워드프레스 스타일의 글목록에 차이가 있기 때문이다.

Wordpress.com 블로그 글목록
▲ WordPress.com 블로그의 글목록

티스토리 블로그 글목록
▲ 티스토리 블로그의 글목록

위에서 보는 것처럼 워드프레스의 글목록 페이지는 테마의 모양을 그대로 가지고 간다. 만약에 테마가 글제목만 보여주도록 되어있다면, 글목록 페이지에서도 글제목만 보여주고, 테마가 제목과 요약, 썸네일 이미지등을 함께 보여주도록 되어 있다면, 글목록 페이지에서도 그 모두를 보여준다.

반면에 네이버나 티스토리등의 한국 블로그에서는 테마의 모양과 상관없이 글목록 페이지에서는 글제목만 보이도록 되어있다. 물론 설정에 따라서 글제목이 나열된 다음에, 그 목록에 해당하는 모든 글이 펼쳐져서 보여지도록 할 수도 있긴 하다.

어쨌든 한국 블로그들이 글목록 페이지를 보여주는 방식은, 글목록 페이지를 마음대로 편집할 수 없게 하기 때문에 사람에 따라 아쉬운 부분이 될 수도 있다. 하지만 글제목만 한꺼번에 보여지는 것은 블로그 방문자들이 어떤 글이 있는지 빨리 확인하고 그 글을 볼 수 있게 해주기도 하기 때문에 편리한 것이 사실이다.

그래서 워드프레스 블로그를 방문하는 한국인들은 카테고리나 태그 글목록 페이지에 들어갔을 때 꽤 불편함을 느낄 수 있다. 제목만 빠르게 훑어보고 자기가 보고 싶은 글을 찾고 싶은데 그렇게 하지 못하기 때문이다.

이런 경우 설치형 워드프레스에서는 플러그인을 이용하거나, 직접 테마를 수정해서 얼마든지 마음대로 커스터마이징이 가능하지만, WordPress.com에서는 그것이 불가능하다. Wordprss.com에서는 년간 사용료를 지불함으로써 사용할 수 있는 것은 css 편집이나 폰트 설정 정도 뿐이고, 테마 자체를 뜯어고치는 것은 불가능하게 되어 있기 때문이다.

Display Posts Shortcode 를 사용해서 글목록 페이지 만들기

wordpress.com에서도 이런 문제점을 인식하고 있는지, 여러가지 Shortcode를 제공해줘서, 일정정도의 커스터마이징을 할 수 있도록 해놓았다. 예를 들면, wodpress.com에서는 보안상의 문제로, 유튜브나 비메오등에서 제공하는 동영상 삽입 코드는 동작하지 않는데, 그 대신 유튜브나 비메오의 동영상 페이지 주소를 그대로 입력하거나 Shortcode를 사용해서 동영상을 삽입할 수 있도록 해놓았다.

그리고 글목록 페이지를 커스터마이징 할 수 있는 Shortcode도 있는데, 오늘 소개할 “Display Posts Shortcode” 다. “Display Posts Shortcode” 는 말 그대로 블로그의 글목록을 글이나 페이지에 뜨도록 할 수 있는 Shortcode 다.

이 “Display Posts Shortcode”를 적용하면 위에서 나왔던 워드프레스의 글목록 페이지를 다음과 같은 모양으로 만들 수 있다.

Display Posts Shortcode를 이용한 글목록 페이지
▲ Display Posts Shortcode를 이용해서 만든 글목록 페이지

Display Posts Shortcode 사용법

우선 “Display Posts Shortcode”의 사용법은 워드프레스 Support 페이지에 자세히 나와있다. 그래서 이 글에서는 간단하게 글목록 페이지를 만드는 것에 대해서 설명하려고 한다.

Display Posts Shortcode 인수와 그 용법 설명

  • author
    • 특정 저자의 글목록을 출력한다.
    • 기본값: 없음
  • category
    • 지정된 카테고리에 해당하는 글목록을 출력한다. (콤마를 통해서 여러 카테고리의 글목록을 표시하도록하는 것이 가능함)
    • 기본값: 없음
  • date_format
    • “include_date” 인수의 값이 “true”일 때, “날짜 표시 형식”을 지정하는 역할을 한다. 더 자세한 내용은 WordPress Codex의 시간 및 날짜 사용자 정의을 참조하면 된다.
    • 기본값: ‘(n/j/Y)’ (n은 “1-12″형식의 월, j는 “1-31″형식의 일, Y는 “1999”형식의 년을 나타낸다)
  • id
    • 글의 ID를 지정해서 지정된 글목록만 출력한다. (콤마를 통해서 여러 개의 글목록을 표시하도록하는 것이 가능함)
    • 기본값: 없음
  • image_size
    • 특성 이미지(featured image)의 크기를 지정한다. 특성 이미지를 설정하지 않은 글은 이미지가 출력되지 않는다. 이미지 사이즈는 “설정 ⇒ 미디어”에 지정된 『작은 사진(썸네일)(thumbnail), 중간크기(medium), 최대 크기(large)』의 사이즈대로 표현된다.
    • 기본값: 없음
  • include_date
    • 이 인수의 값이 “ture”면 글제목 옆에 글작성일이 표시된다. 기본값은 “(7/30/12)”와 같은 형태지만, ‘date_format’ 인수를 통해서 조정이 가능하다.
    • 기본값: 없음 (즉, 날짜가 나오지 않음)
  • include_excerpt
    • 이 인수의 값이 “ture”면 글의 요약글(excerpt)이 함께 표시된다.
    • 기본값: 없음 (즉, 요약글이 나오지 않음)
  • offset
    • 글목록에서 제외할 글의 수를 지정한다. 이 때 주의할 것은 글목록의 가장 위에서부터 제외된다는 점이다. 즉, 기본설정대로 한다면 가장 최근글부터 제외된다.
    • 기본값: 0
  • order
    • 정렬방식을 지정한다. “DESC”로 지정하면 “내림차순”으로, “ASC”로 지정하면 “오름차순”으로 정렬된다.
    • 기본값: DESC
  • orderby
    • 어떤 인수를 이용해서 글을 정렬할 지 지정한다. 가능한 인수가 어떤 것이 있는 지는 이 링크의 글을 참조하면 된다.
    • 기본값: date
  • post_parent
    • 이 인수의 값이 “current”면 현재 페이지의 하위 페이지의 목록을 출력하고, 값이 특정 페이지의 ID인 경우에는 그 페이지의 하위 페이지의 목록을 출력한다.
    • 기본값: 없음
  • post_status
    • 지정된 글상태인 글의 목록만 출력한다.
    • 기본값: publish
  • post_type
    • 글의 종류를 지정해서 지정된 포스트만 출력한다. post(게시글), page(페이지) 두가지 중 하나를 선택할 수 있다.
    • 기본값: post
  • posts_per_page
    • 한 페이지에 얼마나 많은 글을 보여줄지 지정한다.
    • 기본값: 10
  • tag
    • 지정된 태그에 해당하는 글목록을 출력한다. (콤마를 통해서 여러 태그의 글목록을 표시하도록하는 것이 가능함)
    • 기본값: 없음
  • wrapper
    • 글목록이 어떤 종류의 HTML로 출력될지를 지정한다. 순번이 없는 리스트(ul), 순번이 있는 리스트(ol), 그리고 div(div)중에 하나로 지정할 수 있다. 이 때 div로 지정하면 글목록 앞의 블릿 표시가 나타나지 않는다.
    • 기본값: ul

예시

  1. 전체글목록 (글제목과 날짜를 표시하고 날짜는 “년/월/일” 형태로 표시. 정렬은 기본값대로 날짜로 내림차순 정렬됨)
    [display-posts include_date="true" date_format="Y/m/d" posts_per_page="100"]

  2. 『Blog』 카테고리 글목록 (글제목과 날짜를 표시하고 날짜는 “년 월 일” 형태로 표시. 정렬은 날짜로 오름차순 정렬됨)
    [display-posts category="Blog" include_date="true" order="ASC" date_format="Y년 F j일" posts_per_page="100"]

  3. 『Wordpress.com』 태그 글목록 (글제목과 날짜를 표시하고 날짜는 “년 월 일” 형태로 표시. 정렬은 글제목으로 내림차순 정렬됨)
    [display-posts category="Blog" include_date="true" orderby="title" date_format="Y년 F j일" posts_per_page="100"]

  4. 『Blog』 카테고리 글목록 (글제목과 날짜를 표시하고 날짜는 “년 월 일” 형태로 표시. 정렬은 날짜로 오름차순 정렬됨) – 폰트 크기 수정 (댓글의 @Veteran님 의견을 참조했습니다.)
    <div style="font-size:16px;">
    [display-posts category="Blog" include_date="true" order="ASC" date_format="Y년 F j일" posts_per_page="100"]
    </div>

특히 세번째로 예시를 든 태그 글목록은 또다른 응용이 가능하다. 예를 들어 특정 글들에 “notice”와 같은 태그를 지정해서 공지글의 목록만 보여지게 할 수도 있고, 방문자가 꼭 봐줬으면 하는 글에 “featured”와 같은 태그를 붙여서 그 글들만 보여주는 것도 가능하다.

응용법

만약에 css 편집이 가능하면 다른 응용법도 생각해볼 수 있다. 워드프레스에서는 전면페이지(Frontpage)를 설정하는 것이 가능하다. 그것은 페이지를 하나 만든 후 “설정 ⇒ 읽기”에서 전면페이지 표시 항목에서 설정이 가능하다. 그 항목을 정적인 페이지로 설정하고, 전면페이지를 만들어놓은 페이지로 설정하면, 블로그에 접속할 때 그 페이지가 처음으로 뜨게 된다.

이 기능을 이용하면 블로그를 좀 더 다채롭게 꾸밀 수 있는데, WordPress.com에서는 테마 자체를 편집하는 것을 막아놓았기 때문에, 커스터마이징에 한계가 있다. 하지만 css를 편집하는 것이 가능하다면, “Display Posts Shortcode”를 사용해서 어느정도는 자신이 원하는 디자인의 전면페이지를 만드는 것도 가능할 것이다. 아래 스크린샷은 브라우저의 개발자도구를 이용해서 css를 조금 수정한 것이다. 아래와 같은 식으로 전면페이지를 만들면, 전면페이지에 분류별로 최신글목록을 몇개씩 보여주는 것도 가능하고, 태그 글목록을 이용해서 방문자가 꼭 봐줬으면 하는 글목록을 보여주는 것도 가능할 것이다.

"Display Posts Shortcode" 로 꾸면 전면 페이지
▲ Display Posts Shortcode를 이용해서 꾸민 전면 페이지

한계점과 해결 방법

“Display Posts Shortcode”는 Shortcode 하나당 100개까지의 글밖에 불러오지 못한다. 따라서 글이 많아지는 경우 목록의 아래부분부터 나오지 않게 된다. 하지만 “offset” 인수를 이용면 어느정도는 해결이 가능하다. “offset”을 이용하면 일정 개수의 글을 뛰어넘어서 그 다음글부터 목록으로 보여주므로, “Display Posts Shortcode” 2개를 사용해서 하나는 그대로 쓰고, 하나는 “offset=”100″” 인수를 설정해서 쓴다면 두 개의 Shortcode를 써서, 중간에 여백이 생기는 단점이 있기는 하지만, 모든 글을 표시하는 것이 가능해진다.

WordPress.com 에서의 Shortcode의 활용

WordPress.com에서는 보안성의 이유로 제한되어있는 것이 상당히 많다. 하지만 그런 불편을 최소화하고, 오히려 더 쉽게 글을 작성할 수 있게 하기 위해서 여러가지 방법을 마련해 놓았다. 그 중에서 Shortcode를 잘 사용할 수 있게 된다면 좀 더 풍성한 블로그를 만들 수 있을 것이다. 여러가지 Shortcode를 좀 더 잘 활용하고 싶다면 WordPress.com의 서포트 페이지를 확인해보자.