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의 서포트 페이지를 확인해보자.

WordPress.com 마크다운 공식 지원

Wordpress.com에서 2013년 11월 19일부터 정식으로 마크다운(Markdown)을 지원하기 시작했다. 마크다운이 무엇인지, 그리고 어떻게 Wordpress.com에서 마크다운을 이용해서 글을 작성할 수 있는 지에 대해서 설명해본다.

WordPress.com 마크다운 공식 지원 시작

마크다운(markdown)은 간단한 마크업 언어로, 이메일 상에서 일반 텍스트로 문장 구조를 표기하던 관례를 규칙으로 만든 문법이다. 따라서 배우기 무척 간단하고, 마크업 언어의 특성상 좀 더 구조화된 글을 쓰는데 도움이 된다.

다음 스크린샷이 워드프레스의 에디터에서 마크다운을 쓰는 모습이다.

markdown-in-text-editor

그리고 다음 스크린샷이 Reddle이라는 테마에서 위의 스크린샷에서 작성한 글이 보여지는 모습이다.

markdown-example-in-reddle

마크다운으로 글 쓰기

마크다운을 이용하면, 많은 학습 없이도, 그리고 마우스를 이용하거나 단축키를 이용하는 것 없이, 빠르게 링크를 추가하거나 리스트를 만들거나 하는 기본적인 글쓰기 작업들을 빠르게 할 수 있다.

예를들어, 어떤 단어나 구절을 이탤릭체로 만들고 싶다면 그 앞과 뒤에 별표를 추가하면 된다. 즉, *강조* 라고 입력하면 강조와 같이 보여진다. 또 어떤 단어나 구절을 굵을 글씨로 표현하고 싶다면 이번에는 별표를 2개를 써주면 된다. 그러면 **굵은 글씨**가 굵은 글씨와 같은 형태로 보여질 것이다.

이처럼 마크다운 문법은 상당히 간단한 편이다. 따라서 많은 학습이 필요없이 좀 더 빠르게, 그리고 좀 더 구조적으로 글을 쓸 수 있도록 도와준다.

다만 사진을 삽입하는 문법이 너무 간단해서, 마크다운으로는 왼쪽이나 오른쪽으로 정렬하는 것조차 불가능하다. 이처럼 멀티미디어를 많이 삽입해서 글을 작성하는 사람들에게는 마크다운이 더 불편할 수도 있다. 반면에 텍스트 위주로 글을 쓰는 사람들에게는, 키보드에서 손을 뗄 필요가 거의 없어지므로 마크다운으로 글을 작성하는 것이 매우 편리하게 느껴질 것이다.

워드프레스에서 사용하는 마크다운 문법은 기본적인 마크다운 문법에 유용한 기능들이 조금 더 추가되어 있는 것이다. 따라서 원래 마크다운 문법을 알고 있더라도 다음 링크를 참조해서 워드프레스에서 제공하는 마크다운 문법을 숙지하는 것이 좋을 것이다.

WordPress.com에서 마크다운 기능을 활성화하기

마크다운 기능을 활성화하려면 우선 대시보드로 들어가서 설정 → 쓰기로 들어간다. 그러면 다음 스크린샷처럼 마크다운을 활성화할 수 있는 항목이 있다. 그곳에 체크하면 된다.

Wordpress.com-Enable-Markdown-Writing

댓글에서도 마크다운을 사용할 수 있는데, 그러려면 추가적인 설정이 필요하다. 역시 설정 → 토론으로 들어가서 다음처럼 설정하면 된다.

Wordpress.com-Enable-Markdown-Comment

WordPress.com 에디터에서 마크다운 문법 사용하기

설정에서 마크다운 기능을 활성화 했다면, 글을 쓸 때 마크다운을 사용하는 법은 매우 간단하다. “새 글 쓰기”버튼을 눌러서 에디터창으로 들어가서 마크다운 문법을 사용해서 글을 작성하면 된다. 원래 에디터 우측 상단에 있는 “Text” 버튼을 누르면 HTML 태그를 이용해서 글을 쓸 수가 있는데, 마크다운으로 글을 쓰면 “비주얼”모드로 글을 작성하든, “Text”모드로 글을 작성하는 보여지는 것은 똑같다. 다만 이미지를 삽입하거나 할 때 직접 주소가 뜨는 것이 마크다운으로 편집하기 편하기 때문에, “Text”모드를 사용하는 것이 여러모로 편하다.
Wordpress.com-Editor-Text

하지만 워드프레스의 에디터에서 마크다운으로 글을 작성하는 것이 아직까지는 좀 불편하다. 우선 앞에서 설명한 대로 마크다운으로 글을 작성하면, 글이 어떻게 보일지 확인하는 것이 힘들다. HTML로 글을 작성한다면, 비주얼 모드를 통해서 쉽게 글이 실제로 어떻게 보이는 지 볼 수 있지만, 마크다운으로 글을 쓰면, 임시글로 저장 후 미리보기로 봐야 글이 실제로 어떻게 보일지를 알 수 있다.

또한 이미지 삽입이나, 링크 삽입등이 모두 기존 에디터에 맞춰져 있다. 따라서 툴바를 통해서 이미지를 삽입하거나 링크를 삽입하는 것이 꽤 불편하다. 예를 들어 툴바를 통해 이미지를 삽입하면, 마크다운 문법인 ![Alt](이미지 주소) 형태로 이미지가 삽입되는 것이 아니라. HTML 태그인 <img src="이미지 주소" alt="" /> 와 같은 형태로 이미지가 삽입된다.
마크다운은 기본적으로 HTML과 혼용해서 쓸 수 있도록 설계되어 있지만, 그래도 좀 아쉬운 부분이다. 하지만 이제 처음으로 지원하는 것이니만큼 부족한 점이 있는 것은 당연할 것이다. WordPress.com은 쉬지않고 꾸준히 개발을 이어나가고 있으므로, 시간이 지나면서 더욱 더 편하게 마크다운을 쓸 수 있게 되기를 기대해본다.

크롬의 한글 표시 버그가 해결되었다

최신버전의 크롬에서 이전에 발생하던 한글표시 버그가 해결되었다. 이제는 Twenty Twelve 테마도 버그없이 잘 사용할 수 있을 것으로 보인다.

이전에 크롬의 한글 표시가 이상하게 되는 버그가 있어서 그것을 해결하는 방법에 대해서 글을 올린 적이 있었다.
(참고: 크롬의 font-family 한글 표시 버그 해결방법)
그런데 최신버전의 크롬에서 자체적으로 그 버그를 수정해 놓아서, 더 이상 추가적인 조치를 취할 필요가 없어졌다.

계속 “크롬의 한글 표시 버그가 해결되었다” 읽기

WordPress.com 블로그를 사용하면서 느낀 점

지금까지 네이버, 티스토리, 이글루스, 가입형 워드프레스, 설치형 워드프레스등 많은 블로그를 사용해봤다. 이글에서는 가입형 워드프레스인 Wordpress.com을 쓰면서 느꼈던 점에 대해서 써봤다.

Wordpress Logo사실 WordPress.com에 가입하고 블로그를 만들어본 것은 블로그를 시작하기로 마음을 먹고나서 가능하면 많은 블로그를 사용해보고 그 중에서 가장 나에게 잘 맞는 블로그를 찾아보겠다는 생각해서 였다.

지금까지 사용해본 블로그는 네이버 블로그, 다음 블로그, 티스토리, 이글루스, 구글 블로거, 텀블러, 설치형 워드프레스, 가입형 워드프레스, 텍스트패턴, fc2 블로그 등등 이었다. 모두 각각의 장단점들이 있었기 때문에 어떤 블로그가 다른 블로그에 비해 우월하다는 말은 여기서 하지 않으려 한다.

다만 여러가지 블로그들을 사용해보면서 WordPress.com 블로그가 그런 블로그들과 어떤 차별점을 가지고 있고, 어떤 부분에 장점이 있다고 생각하게 되었는 지, 또 어떤 부분은 부족하다고 느껴졌는 지 얘기해 보려고 한다.

계속 “WordPress.com 블로그를 사용하면서 느낀 점” 읽기

글꼴 설정으로 WordPress.com 블로그를 좀 더 쾌적하게 보기

Wordpress.com에서는 css를 수정하려면 비용을 지불해야한다. 따라서 Wordpress.com에서 운영되는 블로그들의 대부분은 예쁘지 않은 굴림 폰트로 표현된다. 브라우저의 폰트 설정을 조정해서 좀 더 예쁘게 Wordpress.com 블로그들을 보는 방법을 소개한다.

아마 WordPress.com 블로그에 방문하시는 한국분들께서는 글꼴이 기본 글꼴인 굴림으로 나오는 것을 보실 수 있을 겁니다. WordPress.com은 외국 서비스라서 블로그의 설정상 한글 글꼴은 설정되어 있지 않습니다. 물론 CSS 수정을 하면 한글 글꼴을 설정해 줄 수 있지만 WordPress.com은 CSS수정에 비용을 청구합니다. 따라서 대부분의 WordPress.com 블로그는 한글 글꼴 설정이 되어 있지 않습니다.

이런 경우 브라우저에 기본으로 설정된 글꼴로 표시되는데, 윈도우즈를 쓰는 경우 기본글꼴이 “굴림”으로 되어 있습니다. 이것은 최신 윈도우즈인 윈도우즈8에서도 마찬가지입니다. 따라서 블로그가 상당히 안 예쁘게 보일 수 있습니다.

따라서 WordPress.com 블로그를 좀 더 예쁜 글꼴로 보고 싶으신 경우 브라우저의 설정을 바꿔주면 됩니다. 가장 많이 쓰이고 있는 브라우저인 인터넷 익스플로러와 크롬, 그리고 파이어폭스의 설정방법을 아래에 간단하게 설명합니다. 맑은 고딕이나 나눔고딕과 같은 글꼴을 기본글꼴로 설정해주시면  좀 더 예쁘고 깔끔한 WordPress.com 블로그들을 보실 수 있으실 겁니다.

  • Internet Explorer (인터넷 익스플로러)
    1) 인터넷 옵션의 일반탭에서 글꼴 클릭
    Internet_Explorer_Font-Option_01
    2) 좌측에는 일반적인 웹페이지의 글꼴을 우측에는 고정폭 글꼴을 지정한다. 고정폭 글꼴은 숫자가 많지 않아서 선택 범위가 좁다.
    Internet_Explorer_Font-Option_02
  • Chorome (크롬)
    1) 설정창에서 맨 아래에 있는 고급 설정 표시를 누르고, 아래로 스크롤하면 아래와 같은 글꼴 설정 부분이 있다. 여기서 글꼴 맞춤 설정을 누른다.
    Chrome_Font-Option_01
    2) 글꼴 설청창이 뜨면 글꼴을 설정해준다. 여기서 표준 글꼴과 Sans-Serif글꼴은 같은 것으로 지정하면 되고 Serif글꼴을 명조체 글꼴을 지정하면 된다. 마지막으로 고정폭 글꼴을 지정해준다.
    Chrome_Font-Option_02
  • Firefox (파이어폭스)
    1) 설정의 내용 탭에 있는 글꼴과 색상 부분의 고급 버튼을 누른다.
    Firefox_Font-Option_01
    2) 크롬과 마찬가지로 글꼴을 설정한다. 참고로 Sans-Serif가 고딕체, Serif가 명조체라고 생각하면 된다.
    Firefox_Font-Option_02

ps. 만약 윈도우즈XP를 쓰고 계시는 분들의 경우 맑은 고딕이나 나눔고딕을 설정하면 글꼴이 뿌옇게 나오는 경우가 있을 수 있습니다. 그럴 때는 클리어타입 설정을 해주셔야 합니다. 아래의 스크린샷을 참조해서 클리어타입 설정을 해주세요.

  1. 디스플레이 등록정보의 화면배색창에서 “효과”를 클릭합니다.
    XP_Cleartype_01

  2. 효과창에서 화면 글꼴을 다듬는 방법을 ClearType으로 설정한다.
    XP_Cleartype_02

크롬의 font-family 한글 표시 버그

현재 크롬에는 한글 폰트 렌더링 버그가 있다. css를 수정하면 이 버그를 회피할 수 있지만, Wordpress.com에서는 css 수정에 비용이 들기 때문에 비용을 들이지 않으려면 버그가 일어나지 않는 테마를 찾아서 쓰는 수 밖에는 없다.

chrome-korean-font-bug

이전에 Twenty Tweve테마로 변경했다가 크롬에서 폰트가 이상하게 출력되는 문제때문에 다시 현재의 테마로 변경했다는 글을 쓴 적이 있다. 내 주브라우저가 파이어폭스이기 때문에 전혀 인지하지 못하고 있던 것이었는데, serenoh님의 댓글로 크롬에서 폰트가 이상하게 표시된다는 사실을 알게 되었다.

그때는 Twenty Twelve테마가 “Open San”라는 웹폰트를 사용해서 그 것때문에 문제가 생긴 것으로 생각했다. 그러다가 오늘 크롬에서 font-family의 한글 표시에 대한 버그가 있다는 글을 읽고 그 원인을 알 수 있게 되었다.

간단하게 정리하면  css에서 font-family를 정의할 때 한글이 먼저 오도록 정의하지 않으면, 크롬에서 폰트가 깨져 나오는 버그가 있다는 것이다. 링크의 글에서는 버전이 20일 때의 버그라고 되어 있지만 현재의 21버전에서도 같은 현상이 나타나는 듯 싶다. 즉 아래의 예중 두번째의 형태로 css가 작성되어 있어야 크롬에서 한글이 제대로 나오는 것 같다.

p.bug { line-height: 140%; font-size: 14px; font-family: verdana, gulim, ‘굴림’; }
p.good { line-height: 140%; font-size: 14px; font-family: “굴림”, gulim, verdana; }

wordpress.com에서는 무료 사용자는 css를 수정할 수 없으므로, 테마를 다른 것으로 바꾸는 것 외에는 특별한 해결책이 없다. 하지만 기본적으로 이 현상은 크롬의 버그이기 때문에 시간이 지나면 고쳐질 것으로 보인다.

버그가 고쳐지면 다시 Twenty Twelve 테마를 써볼 지 생각해 봐야겠다.