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

뻘글들 2009/07/16 22:55
크리에이티브 커먼즈 라이선스
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

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


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

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

코딩용 폰트 비교  (4) 2009/07/27
모 서적의 추천사를 쓰게되었다.  (5) 2009/07/20
codepad를 이용해서 티스토리에 문법 강조가 적용된 소스코드를 올리는 법 - 2  (6) 2009/07/16
바탕화면  (2) 2009/06/10
잉여시간의 속도는 비잉여시간의 속도보다 느리다  (2) 2009/06/02
만화로 쉽게 배우는 데이터베이스 초간단 리뷰  (4) 2009/05/18
Posted by DMW
TAG , ,
트랙백 2개, 댓글 6개가 달렸습니다