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

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

Advertisements
Wordpress Syntax Highlighter

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

설치형 워드프레스를 사용하는 사람들이 소스 코드를 블로그에 삽입할 때는 대부분 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 페이지에도 설명하고 있지 않다. 

10 thoughts on “WordPress.com에서 예쁘게 소스 코드 삽입하기”

  1. 오호. 워드프레스 자체적으로 syntax highlighting 기능을 제공 하고 있었군요. 몰랐네요.
    근데…WordPress.com 을 통한 호스팅 서비스만 지원이 되는건가요? 설치형 워드프레스를 사용하고 있는데 잘 안되는 것 같네요.

    1. 우선 찾아주셔서 감사합니다. 🙂

      설치형 워드프레스에서는 syntax highlighting 기능을 쓰려면 SyntaxHighlighter Evolved와 같은 플러그인을 설치해야 합니다.

      WordPress.com에서는 플러그인을 쓰지 못하기 때문에 자체적으로 syntax highlighting 기능을 지원하는 것 같습니다.

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중