반응형
저번에 SyntaxHighlighter를 이용해서 소스코드를 보기 좋게 표시하는 방법에대해서 포스팅을 했었는데요.
오늘은 다른 방법으로 더 간단하게.. 소스코드를 보기 좋게 표시하는 방법을 알아보겠습니다.
오늘 이용할 것은 Google Code Prettify입니다.
SyntaxHighlighter처럼 .js, .css 파일을 직접 올리지 않고도 간단하게 CDN으로 사용이 가능합니다.
커스터마이징을 하고 싶으신 분들은 별도로 .css 파일을 받아서 적용을 하면 되구요.
1. 1-1. 자동 적용
자동 적용은 쉽습니다. 아래 소스를 <.html> 앞에 넣어주시기만 하면됩니다.
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script><code />
2. 1-2. 수동 적용
수동으로 적용하고 싶으신 분들은 일단 아래 코드를 자동 적용과 동일하게 </html>의 앞에 넣습니다.
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/prettify.js"></script><code />
.js파일을 적용하셨으면 <body> 태그에 아래 내용을 추가합니다.
<body onload="prettyPrint()"><code />
3. 2. 스타일 적용
css는 Color themes for Google Code Prettify에서 다운로드가 가능합니다.
다운로드 받아 업로드 하신 후에 <head>태그 내부에 넣어 적용하시면 됩니다.
<link rel="stylesheet" type="text/css" href="./images/tomorrow-night.css" /><code />
4. 3. 사용
적용을 다 하셨으면 사용을 해봐야겠죠?
<pre>태그를 사용하고 클래스를class="prettyprint" 이렇게 지정해주면 기본적인 설정은 끝입니다.
추가로 줄번호를 보여주고 싶으시면 클래스에 linenums를 추가해 주시고, 시작 라인 번호는 linenums:100 이렇게 설정하시면 됩니다. 쉽죠?
<pre class="prettyprint linenums:100"> <link rel="stylesheet" type="text/css" href="./images/tomorrow-night.css" /> </pre><code />
제가 적용한 css는 tomorrow-night입니다. 이 스타일시트 외에도 깃허브 등 다양한 테마가 있으니 한번 적용해 보시는 것을 추천합니다.
기존에 사용하던 SyntaxHighlighter보다 깔끔해서 마음에 듭니다. css 수정도 쉽고 말이죠!
반응형
