codepad를 이용해서 티스토리에 문법 강조가 적용된 소스코드를 올리는 법 - 2

뻘글들 | 2009/07/16 22:55 | Posted by DMW
크리에이티브 커먼즈 라이선스
Creative Commons License
http://www.filepang.co.kr/entry/codepad를-이용해서-티스토리에-문법-강조가-적용된-소스코드를-올리는법

전에 올린글인데...얼마전에 코드패드가 업데이트되면서 font 태그를 쓰지않고 css를 사용해서 글씨에 색을 입히게 바겼다. 덕분에 이잰 그냥 복붙한다고 이쁜코드를 포스팅할 수 업ㅂ을줄 알았는데 방법은 역시 있었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

.code table {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background: #f6f6f6;
}


.highlight .c { line-height: 100%; color: #669933; font-style: italic } /* Comment */
.highlight .k { line-height: 100%; color: #0033cc; font-weight: bold } /* Keyword */
.highlight .cm { line-height: 100%; color: #669933; font-style: italic } /* Comment.Multiline */
.highlight .cp { line-height: 100%; color: #cc3333 } /* Comment.Preproc */
.highlight .c1 { line-height: 100%; color: #669933; font-style: italic } /* Comment.Single */
.highlight .cs { line-height: 100%; color: #0000aa; font-style: italic } /* Comment.Special */
.highlight .gd { line-height: 100%; color: #aa0000 } /* Generic.Deleted */
.highlight .ge { line-height: 100%; font-style: italic } /* Generic.Emph */
.highlight .gr { line-height: 100%; color: #aa0000 } /* Generic.Error */
.highlight .gh { line-height: 100%; color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi { line-height: 100%; color: #00aa00 } /* Generic.Inserted */
.highlight .go { line-height: 100%; color: #888888 } /* Generic.Output */
.highlight .gp { line-height: 100%; color: #555555 } /* Generic.Prompt */
.highlight .gs { line-height: 100%; font-weight: bold } /* Generic.Strong */
.highlight .gu { line-height: 100%; color: #800080; font-weight: bold } /* Generic.Subheading */
.highlight .gt { line-height: 100%; color: #aa0000 } /* Generic.Traceback */
.highlight .kc { line-height: 100%; color: #0033cc } /* Keyword.Constant */
.highlight .kd { line-height: 100%; color: #0033cc } /* Keyword.Declaration */
v.highlight .kp { line-height: 100%; color: #0033cc } /* Keyword.Pseudo */
.highlight .kr { line-height: 100%; color: #0033cc } /* Keyword.Reserved */
.highlight .kt { line-height: 100%; color: #9966cc; font-weight: bold } /* Keyword.Type */
.highlight .m { line-height: 100%; color: #000000 } /* Literal.Number */
.highlight .s { line-height: 100%; color: #cc9933; font-weight: bold } /* Literal.String */
.highlight .na { line-height: 100%; color: #1e90ff } /* Name.Attribute */
.highlight .nb { line-height: 100%; color: #00aaaa } /* Name.Builtin */
.highlight .no { line-height: 100%; color: #aa0000 } /* Name.Constant */
.highlight .nd { line-height: 100%; color: #888888 } /* Name.Decorator */
.highlight .ni { line-height: 100%; color: #800000; font-weight: bold } /* Name.Entity */
.highlight .nn { line-height: 100%; color: #00aaaa } /* Name.Namespace */
.highlight .nt { line-height: 100%; color: #1e90ff; font-weight: bold } /* Name.Tag */
.highlight .ow { line-height: 100%; color: #3366ff } /* Operator.Word */
.highlight .mf { line-height: 100%; color: #000000 } /* Literal.Number.Float */
.highlight .mh { line-height: 100%; color: #000000 } /* Literal.Number.Hex */
.highlight .mi { line-height: 100%; color: #000000 } /* Literal.Number.Integer */
.highlight .mo { line-height: 100%; color: #000000 } /* Literal.Number.Oct */
.highlight .sb { line-height: 100%; color: #cc9933; font-weight: bold } /* Literal.String.Backtick */
.highlight .sc { line-height: 100%; color: #cc9933; font-weight: bold } /* Literal.String.Char */
.highlight .sd { line-height: 100%; color: #cc9933; font-weight: bold } /* Literal.String.Doc */
.highlight .s2 { line-height: 100%; color: #cc9933; font-weight: bold } /* Literal.String.Double */
.highlight .se { line-height: 100%; color: #cc9933; font-weight: bold } /* Literal.String.Escape */
.highlight .sh { line-height: 100%; color: #cc9933; font-weight: bold } /* Literal.String.Heredoc */
.highlight .si { line-height: 100%; color: #cc9933; font-weight: bold } /* Literal.String.Interpol */
.highlight .sx { line-height: 100%; color: #cc9933; font-weight: bold } /* Literal.String.Other */
.highlight .sr { line-height: 100%; color: #009999; font-weight: bold } /* Literal.String.Regex */
.highlight .s1 { line-height: 100%; color: #cc9933; font-weight: bold } /* Literal.String.Single */
.highlight .ss { line-height: 100%; color: #0000aa; font-weight: bold } /* Literal.String.Symbol */
.highlight .bp { line-height: 100%; color: #00aaaa } /* Name.Builtin.Pseudo */
.highlight .il { line-height: 100%; color: #000000 } /* Literal.Number.Integer.Long */

자신의 티스토리 관리메뉴에서 스킨->HTML/CSS 편집을 눌러서 저걸 긁어다가 CSS 젤 밑에 가따붙이자. 그러고나서 내가 전에 포스팅한 글을 보고 따라하면 된다. 저 CSS를 적당히 고치면 자신만의 컬러스킴을 적용해서 코드하일라이팅도 할 수 있다. 오히려 더 좋아진것 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

class Prymid
    def initialize(floor, str = "*")
        @floor = floor
        @str = str
    end    
    def draw(output_device = STDOUT)
        @floor.times do |i|
            output_device.puts @str * (i + 1)
        end
    end
end

prymid = Prymid.new 5
prymid.draw


Output: 
1
2
3
4
5

*
**
***
****
*****


잉여잉여
저작자 표시 비영리 동일 조건 변경 허락

'뻘글들' 카테고리의 다른 글

코딩용 폰트 비교  (6) 2009/07/27
모 서적의 추천사를 쓰게되었다.  (5) 2009/07/20
codepad를 이용해서 티스토리에 문법 강조가 적용된 소스코드를 올리는 법 - 2  (6) 2009/07/16
바탕화면  (2) 2009/06/10
잉여시간의 속도는 비잉여시간의 속도보다 느리다  (2) 2009/06/02
만화로 쉽게 배우는 데이터베이스 초간단 리뷰  (6) 2009/05/18
TAG Highlight, 뻘글, 프로그래밍
Trackback (3) : Comment (6)

댓글을 달아 주세요

  1. Favicon of http://inthechaos.tistory.com BlogIcon 신연화 2009/07/17 02:04  댓글주소  수정/삭제  댓글쓰기

    이글 주고 복사해가겠다능..

    http://www.filepang.co.kr/entry/codepad를-이용해서-티스토리에-문법-강조가-적용된-소스코드를-올리는법

  2. Favicon of http://isurit.tistory.com BlogIcon 온순한감자 2009/07/17 07:22  댓글주소  수정/삭제  댓글쓰기

    으앜..이게 뭐야 무서워..

  3. Favicon of http://www.heartsavior.net BlogIcon Heart 2009/07/17 10:47  댓글주소  수정/삭제  댓글쓰기

    우엥~ 덕분에 잘썼어요 :) 다 갈아 엎어버렸다능

  4. Favicon of http://www.filepang.co.kr BlogIcon DMW 2009/07/17 21:18  댓글주소  수정/삭제  댓글쓰기

    하악하악

  5. Favicon of http://bab2min.tistory.com BlogIcon 적분 2009/07/19 19:53  댓글주소  수정/삭제  댓글쓰기

    으잉 대세가 코드패드에서 복사해오는건가?

codepad를 이용해서 티스토리에 문법 강조가 적용된 소스코드를 올리는 법

뻘글들 | 2008/08/21 17:56 | Posted by DMW
크리에이티브 커먼즈 라이선스
Creative Commons License
http://codepad.org/

저 사이트를 이용하면 따로 플러그인을 설치할 필요도 없고, css등을 몰라도 문법 강조가 적용된 소스코드를 포스트에 붙여넣을 수 있다. 정말 붙여넣기만 하면된다. 승리의 CCV(control-C, V)


아무튼 저 홈페이지에 접속하면 밑에 스샷과 같은 화면을 볼 수 있다.
사용자 삽입 이미지

음...아주 직관적인 인터페이스다. 역시 좋은 사이트는 다르다. 왼쪽에 보이는 라디오 버튼에서 랭귀지를 고르고 그 오른쪽에 있는 인풋 박스에 코드를 붙여넣기 하면된다. 밑에 이상한 체크박스가 두개 보이는게 각각의 역활을 이렇다.

내가 codepad에 붙여넣기 한 코드는 24시간동안 codepad에 저장이 되는데 Private 체크박스는 이걸 다른사람에게 공개할 지 않할지를 결정하는데 사용한다. 이걸 체크 해 놓으면 다른 사람은 볼 수 없다. 대인배라면 체크를 하지 않도록 하자.

옆에 보이는 Run code는 아주 특별한 기능이다. 내가 소스코드를 붙여넣고 Run code를 체크해 놓고 Submit 버튼을 누르면 codepad에서 소스코드를 컴파일하고 그 결과를 보여준다. 에러가 있다면 친절하게 알려주고 워닝도 뛰워준다. 오오~~

아무튼 랭귀지를 선택하고 코드를 붙여넣은후 제출을 누르면 다음과 같은 화면이 나온다.


사용자 삽입 이미지


가장 위에 신텍스 하일라이트가 된 코드가 나오고, 그 밑으로 실행결과, 원본 소스코드, 간단한 댓글을 달 수 있는 인풋 박스가 나온다. 에러가 있다면 실행결과 대신에 에러가 출력되니까 이를 보고 코드를 고친 후 대시 제출할 수 있다.

가장위에 보이는 하일라이트가 적용된 코드를 긁어다 붙여넣기를 하면 된다. 정말 쉽다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

class Prymid
    def initialize(floor, str = "*")
        @floor = floor
        @str = str
    end    
    def draw(output_device = STDOUT)
        @floor.times do |i|
            output_device.puts @str * (i + 1)
        end
    end
end

prymid = Prymid.new 5
prymid.draw


d>_<b

'뻘글들' 카테고리의 다른 글

시간표 3-2  (0) 2008/09/16
Hello World  (8) 2008/08/25
codepad를 이용해서 티스토리에 문법 강조가 적용된 소스코드를 올리는 법  (4) 2008/08/21
수강신청결과  (1) 2008/08/04
어둠에다크  (1) 2008/07/21
바탕화면  (6) 2008/06/08
TAG 뻘글, 프로그래밍
TRACKBACK : 0 : Comment (4)

댓글을 달아 주세요

  1. Favicon of http://appleii.tistory.com BlogIcon appleii 2008/08/21 18:56  댓글주소  수정/삭제  댓글쓰기

    구글 하이라이트에 비하면 뭔가 좀 아쉽네요.

  2. Favicon of http://salada.cscw.kr/tt BlogIcon 사라다 2008/09/16 10:42  댓글주소  수정/삭제  댓글쓰기

    코드패드만세!!

  3. Favicon of http://ParkPD.egloos.com BlogIcon ParkPD 2009/08/03 11:34  댓글주소  수정/삭제  댓글쓰기

    이글루에서는 안 되나 보네요. 붙여 넣었더니 깨져보이네요. 흑...