깃 허브 스타일로 구글 Syntax Highlighter prettify 적용하기 기술 이야기 2015. 8. 20. 02:07

구글의 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" 추가해주면 됩니다.

주의 해야 할 점이 소스 코드에서 꺽쇄<>&lt;&gt;로 변경해서 넣어야 합니다. 조금 귀찮긴 하지만 마크다운에디터같은 툴을 사용하거나, 웹에서 코드를 변환 해서 붙여넣기 하시면 됩니다.
text to html convert 사이트

라인을 표시하고 싶으면, 클래스에 linenums 를 추가하면 되고 linenums:3 이렇게 추가하면 시작 라인을 지정할 수도 있습니다.

prettify와 syntaxhighlighter 가 비교가 많이 되곤하는데, 깔끔해서 좋네요!ㅎ

댓글