구글의 Syntax Highlighter인 code-prettify를 티스토리에 적용했습니다. 깃 허브git-hub 스타일로 적용했습니다! Alex Gorbatchev가 만든 SyntaxHighlighter 적용하신 분은 상당히 많은것 같은데, prettify 사용하는 사람은 드문것 같아서. 간단하게 정리하고 넘어갑니다~
적용방법
사실 prettify 시작하기를 보시면 잘나와있는데, 그걸 더 간단하게 정리해 볼께요.
1. prettify.js 불러주기
아래와 같이 <scrip>태그 한줄을 </html>앞에 추가해주세요. 여기서 중요! run_prettify.js 가 아니라 prettify.js 입니다! 대신 body 태그에 onload="prettyPrint()" 꼭 넣어줘야 합니다.
<body onload="prettyPrint()">
...
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/prettify.js"></script>
</html>
run_prettify.js으로 하면 prettify.css까지 로딩되도록 되어있어서 저희가 원하는 스타일(여기서는 깃 허브 스타일)을 사용할 수 없습니다. (할 수는 있으나 불필요하고 귀찮아짐)
2. 스타일 정해주기
저는 아래 사이트에서 다운받아서 조금 더 손봤습니다. 첨부참고
http://jmblog.github.io/color-themes-for-google-code-prettify/github/
별다른것은 배경색이랑 word-break, word-wrap, border 수정해줬어요.
.prettyprint {
background: #f7f7f7;
font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
font-size: 12px;
line-height: 1.5;
border: 1px solid #ccc;
padding: 16px;
word-break: normal;
word-wrap: normal;
border: 0
}
적용할 css파일을 티스토리에 업로드한 다음 아래 한줄을 </head>위에 넣어주세요.
...
<link rel="stylesheet" type="text/css" href="./images/delisalt_github.css" />
</head>
3. 글에 코드 넣기
글 작성할때 소스 코드를 <pre> <code> 태그 안에 넣고 <pre>에 클래스 class="prettyprint" 추가해주면 됩니다.
주의 해야 할 점이 소스 코드에서 꺽쇄<와>를 <와 >로 변경해서 넣어야 합니다. 조금 귀찮긴 하지만 마크다운에디터같은 툴을 사용하거나, 웹에서 코드를 변환 해서 붙여넣기 하시면 됩니다.
text to html convert 사이트
라인을 표시하고 싶으면, 클래스에 linenums 를 추가하면 되고 linenums:3 이렇게 추가하면 시작 라인을 지정할 수도 있습니다.
prettify와 syntaxhighlighter 가 비교가 많이 되곤하는데, 깔끔해서 좋네요!ㅎ
'기술 이야기' 카테고리의 다른 글
| 텔레그램telegram 봇bot 사용법 소개 및 후기 (8) | 2015.09.19 |
|---|---|
| 파비콘favicon 만들어서 블로그에 적용하기 - 김프gimp사용 (0) | 2015.09.18 |
| 텔레그램 기반의 혁신적인 메신저 소셜라이저 소개 (0) | 2015.09.04 |
| 웹 서버를 운용하는 5가지 방식 (0) | 2015.08.03 |
| HTML5 & CSS3 오늘 구현하는 내일의 웹 표준 (1) | 2015.06.15 |
| 깃으로 디버깅 하기 - git bisect 활용 (0) | 2015.04.30 |
| 로드 밸런싱 2가지 타입 - Layer 4(L4), Layer 7(L7) (0) | 2015.04.28 |
댓글