소스코드 가시적으로 포스팅 하기!

블로그를 시작하기 전에 소스를 저장하거나 공유하게 될 일이 많이 생길 것 같아
SyntaxHighlighter를 이용하여 가시적으로 보기 편하게
포스팅하는 방법에 대하여 간단하게 소개하고자 합니다.

– 본 포스팅에서는 버전3.0.83을 사용합니다.

https://github.com/syntaxhighlighter/syntaxhighlighter

우선 위 사이트로 이동하여 사용하고자 하는 버전을 다운로드 합니다.

다운로드 후 압축파일의 루트폴더입니다.
스크립트 폴더와 스타일 폴더의 내용물을 압축해제하여 서버 적당한 곳에 업로드해 주세요!

<!--SyntaxHighlighter시작-->
<link rel="stylesheet" type="text/css" href="/syntaxhighlighter/styles/shCoreDefault.css" />
  
<script type="text/javascript" src="/syntaxhighlighter/scripts/shCore.js" ></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushCss.js" ></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushJScript.min.js" ></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushXml.js" ></script>
  
<script type="text/javascript">SyntaxHighlighter.all();</script>
<!--SyntaxHighlighter끝-->

위의 코드를 수정하여(js위치,css위치,테마,사용할 언어등) 헤더에 위치시켜 줍니다.

<pre class="brush: xml">
코드내용은 여기에!!
(xml이나 html의 경우 "<"를 "& lt;"로 ">"를 "& gt;"로 바꿔주세요. 띄어쓰기 없이!)
</pre>

위의 코드를 본문에 넣으면 보시는것과 같은 효과를 얻을 수 있습니다.
xml이나 html의 경우 줄바꿈이 되지 않는 문제가 있는데요.
이 경우 <를 &lt ;로 >를 &gt ;로 변경하여 입력 해 주세요.

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

각 언어별 스크립트 파일 이름은 여기서 확인하세요

http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

테마는 여기서 확인하세요.

https://cdnjs.com/libraries/SyntaxHighlighter

업로드 가능한 호스팅 서버가 없다면 위의 사이트에서 같은 방법으로 가져와 사용이 가능합니다.