프로그래밍 소스코드를 소개할 때 SyntaxHighlighter를 사용하는데요, 괜찮습니다. 하지만 늘 문제는 물음표가 보기 싫었습니다.
어때요? 물음표가 상관없으신가요? 그러면 SyntaxHighlighter를 사용해보세요. 깔끔하고 나쁘지 않습니다. 다르게 소소코드를 꾸미고 싶다면 구글 코드 prettify를 사용하는 것을 추천합니다.
가장 먼저 구글 검색에 "google-code-prettify"라고 검색해보세요. 아니면 아래의 주소를 클릭하세요.
GettingStarted를 들어 가봅시다.
아래 코드가 보일겁니다. 아래 코드를 <head> ~</head>에 넣어 주세요.
위가 키본 코드입니다. CGI 파라미터를 통해 스킨과 언어 등을 선택할 수 있습니다.
디폴트 값으로 true입니다. 신경 안써도 됩니다.
lang = bsh, c, cc, cpp, cs, csh, cyc, cv, htm, html, java, js, m, mxml, perl, pl, pm, py, rb, sh,
xhtml, xml, xsl
원하는 프로그래밍 언어를 선택할 수 있습니다.
slkin = ...
스킨은 우리가 지정해줄수 있는데요, 아무것도 없으면 디폴트입니다.
Desert, Sunbrust, Sons-Of-Obsidian, Doxy를 설정할 수 있습니다.
스킨은 아래와 같습니다.
CGI 파라미터를 통해 언어 자바와 sunburst 스킨을 사용하고 싶다면 코드는 아래와 같습니다.
그리고 본문 안에 <pre class="prettyprint">와 </pre> 안에 소스코드를 넣으면 끝납니다.
source code here
</pre>
설치 방법과 사용법은 SyntaxHighlighter와 유사하네요. 구글 코드 prettify (google-code-prettify) 꾸미기를 해보았습니다. 마음에 드셨나요? 결과를 보니 마음에 들지 않습니다. 기대를 했는데 별로네요. 스킨도 마음에 안들고 자바 스크립트 코드는 등 HTML 코드가 적용이 안되어야 하는데 적용되는 단점이 있네요. 사용할 수 있는 방법이 있을 것 같은데 말입니다.
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ' + String(world));
}
}
[Copyright ⓒ 블로그채널 blogCHANNEL 무단전재 및 재배포 금지]
'IT' 카테고리의 다른 글
| 인터넷 느려질때 속도 빠르게 하는법 PC 최적화 (1) | 2016.01.07 |
|---|---|
| HTML 반응형 비디오 코드 동영상 모바일 적용 (2) | 2015.06.25 |
| 티스토리 달라진 이용약관 Ver2.1 카카오톡 검색서비스 추가 (0) | 2015.05.17 |
| 갤럭시 S6 엣지 실사 사진 및 아이폰6 기능 비교 (1) | 2015.03.02 |
| 다음 메일 네이버로 포워딩 기능과 외부 메일 POP3 설정 (0) | 2015.02.09 |