저번에 SyntaxHighlighter를 이용해서 소스코드를 보기 좋게 표시하는 방법에대해서 포스팅을 했었는데요.

오늘은 다른 방법으로 더 간단하게.. 소스코드를 보기 좋게 표시하는 방법을 알아보겠습니다.


오늘 이용할 것은 Google Code Prettify입니다.

SyntaxHighlighter처럼 .js, .css 파일을 직접 올리지 않고도 간단하게 CDN으로 사용이 가능합니다.

커스터마이징을 하고 싶으신 분들은 별도로 .css 파일을 받아서 적용을 하면 되구요.


1-1. 자동 적용

자동 적용은 쉽습니다. 아래 소스를 <.html> 앞에 넣어주시기만 하면됩니다.

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>


1-2. 수동 적용

수동으로 적용하고 싶으신 분들은 일단 아래 코드를 자동 적용과 동일하게 </html>의 앞에 넣습니다.

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/prettify.js"></script>


.js파일을 적용하셨으면 <body> 태그에 아래 내용을 추가합니다.

<body onload="prettyPrint()">


2. 스타일 적용

cssColor themes for Google Code Prettify에서 다운로드가 가능합니다.

다운로드 받아 업로드 하신 후에 <head>태그 내부에 넣어 적용하시면 됩니다.

<link rel="stylesheet" type="text/css" href="./images/tomorrow-night.css" />


3. 사용

적용을 다 하셨으면 사용을 해봐야겠죠?

<pre>태그를 사용하고 클래스를class="prettyprint" 이렇게 지정해주면 기본적인 설정은 끝입니다.

추가로 줄번호를 보여주고 싶으시면 클래스에 linenums를 추가해 주시고, 시작 라인 번호는 linenums:100 이렇게 설정하시면 됩니다. 쉽죠?

<pre class="prettyprint linenums:100">
<link rel="stylesheet" type="text/css" href="./images/tomorrow-night.css" />
</pre>

제가 적용한 csstomorrow-night입니다. 이 스타일시트 외에도 깃허브 등 다양한 테마가 있으니 한번 적용해 보시는 것을 추천합니다.

기존에 사용하던 SyntaxHighlighter보다 깔끔해서 마음에 듭니다. css 수정도 쉽고 말이죠!



WRITTEN BY
덜구
시간나면 강아지들 데리고 캠핑도 가고, 셀프 리모델링도 하고 이것 저것 하면서 즐겁게 잘 살고 있습니다 :-)

트랙백  0 , 댓글이 없습니다.
secret

SyntaxHighlighter를 이용하면 소스 코드를 블로그에 올릴때 깔끔하고 보기 좋게 올릴 수 있습니다.

설치와 사용은 꽤 간단합니다.


다운로드

SyntaxHighlighter 홈페이지


업로드

압축을 풀면 나오는 scripts, styles 폴더에 있는 파일들을 업로드합니다.

모든 파일을 다 넣을 필요는 없으며, 본인이 필요한 것만 넣으면 됩니다.


script/css 추가

아래 내용을 <head></head> 사이에 넣습니다.

물론 조금전에 업로드한 .js, .css파일에 따라 아래 내용은 달라져야겠죠?


<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushDelphi.js"></script>
<script type="text/javascript" src="./images/shBrushDiff.js"></script>
<script type="text/javascript" src="./images/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.js"></script>
<script type="text/javascript" src="./images/shBrushScala.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushVb.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css">

<script type="text/javascript">
SyntaxHighlighter.all();
</script>


html 수정

<body>태그를 찾아 아래와 같이 변경.

<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">


적용

저 같은 경우는 <pre>태그를 이용하는데 <textarea>를 이용하는 분들도 있더라구요.

<pre class="brush:language">Hello World</pre>

brush:language에는 적용할 언어를 넣어줍니다.


지금까지 SyntaxHighlighter를 이용해서 티스토리 블로그에 소스코드를 깔끔하게 올리는 방법을 알아봤습니다.


텍스트로 정리하는것 보단 훨씬 가독성이 좋아졌네요!


WRITTEN BY
덜구
시간나면 강아지들 데리고 캠핑도 가고, 셀프 리모델링도 하고 이것 저것 하면서 즐겁게 잘 살고 있습니다 :-)

트랙백  0 , 댓글이 없습니다.
secret