Code highlight Plugin 추가
2005년 8월 14일 by 김 승엽 View blog reactions
포스트 내에 소스 코드를 추가하는 방법을 찾다가 괜찮은 Plugin을 발견했다. Code Highlight라는 플러그인으로 사용하면 아래와 같은 모양으로 출력된다.
CodeHighlight Classes
*****************************************************/
.hl-surround {
/* -moz-border-radius: 5px; */
background-color: #F9FBFC;
border: 1px solid #C3CED9;
padding: 8px;
margin-bottom: 5px;
width: 435px;
overflow: auto;
text-align: left;
}
.hl-surround, .hl-surround pre, .hl-surround span { font:
normal 9pt 'Courier New', monospace;}
.hl-default { color: Black; }
.hl-code { color: Gray; }
.hl-brackets { color: Olive; }
.hl-comment { color: #ffa500; } /* Orange */
.hl-quotes { color: #8b0000; } /* Dark red */
.hl-string { color: Red; }
.hl-identifier { color: Blue; }
.hl-builtin { color: Teal; }
.hl-reserved { color: Green; }
.hl-inlinedoc { color: Blue; }
.hl-var { color: #00008b; } /* Dark blue */
.hl-url { color: Blue; }
.hl-special { color: Navy; }
.hl-number { color: Maroon; }
.hl-inlinetags { color: Blue; }
.hl-main { background-color: transparent; }
.hl-main pre { margin: 0; padding: 0; }
설치하기
- 위의 링크로 부터 다운로드 받은 플러그인을 /wp-content/plugins/ 밑에 복사하고 압축을 해제한다.
- /wp-content/plugins/CodeHighlight/ 를 보면 add_css.css 라는 파일이 있는데 이 파일의 내용을 사용하고 있는 테마의 style.css에 추가해준다. – 위에 보이는 코드가 바로 add_css.css의 내용이다. -
- install.txt를 읽어보면 -moz-border-radius 이 non-valid CSS 라고 나와 있다. (
코드창의 모서리를 둥글게 보여준다) css Valid를 위한다면 지우는 것이 좋다.- 모든 준비는 끝났고 이제 관리화면의 플러그인 메뉴에서 사용하도록 해주기만 하면 된다.
사용법
[code lang="php"]소스코드[code][code]소스코드[code]지원하는 언어 옵션
- cpp
- css
- diff
- dtd
- java
- javascript
- mysql
- perl
- php
- python
- ruby
- sql
- xml
구문강조 플러그인을 Code snippet으로 변경했기 때문에 위에 나온 소스의 출력 모습은 Code Highlight 의 출력과 다릅니다.
: Plugin, WordPress, 워드프레스
: Plugin, WordPress, 워드프레스
: Plugin, WordPress, 워드프레스
