티스토리를 사용하다가 보면, 코드라던가 소스라던가 html, css 수정을 통해서
여러가기 원하는것을 만들어가는것이 참 재미있습니다.
그러다가 보면 나도 소스코드등의 글을 작성할때 정확히 구분도 되고
반응형 페이지처럼 구분도 잘되고 하이라이트도 잘되게 사용하고 싶죠!
저도 그래서 네이버블로그 보다는 티스토리를 이용하는것일지도 모르겠네요
너무 서론이 길었습니다. 바로 방법에 대해 알아보도록 하지요
일단 SyntaxHighlighter 을 다운로드 받습니다.
http://alexgorbatchev.com/SyntaxHighlighter/
다운로드를 받으신후 압축을 푸시고 나면 해당폴더에
Scripts 폴더와 Style 폴더 두개 의 폴더의 파일전부를 티스토리에 업로드 시켜줍니다.
전부 업로드후 html 편집에서 <head> </head> 사이에 해당 소스를 넣어 줍니다.
<--- 소스코드 이쁘게 사용하기 --->
<link type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.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>
<script type="text/javascript" src="./images/shBrushMatlab.js"></script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
<--- 소스코드 이쁘게 사용하기 --->
이렇게 모든작업을 완료 한후에 확인및 테스트 한번 해봐야 겠지요?
저는 서식에 입력시켜 놓고 사용합니다.
다들 편한 하게 사용하기 위해 여러가지를 이용중인걸로 알고 있는데요
이제 테스트 방법에 대해 알아볼까요?
글쓰기를 누르시고 html 편집모드에서 아래 코드를 넣고 미리보기 해보시기 바랍니다.
<pre class="brush: html">
<script type="text/javascript">
alert("SyntaxHighlighter");
</script>
</pre>
이렇게 입력하시고 미리보기 하시면 아래 처럼 보이실껍니다.
<script type="text/javascript">
alert("SyntaxHighlighter");
</script>
어때요? 아주 간단 하지요?
모든 파일과 정보는 준비 되어있으니~ 아주 편하게 맘에드시는 티스토리 이용하시고
맘에 드시는 결과가 있길 바라겠습니다.
syntaxhighlighter.zip
이것저것 어려우시면 위에 다운로드 파일 다운받으시고
적용하세요 ^^ 그럼 공감정도는 기본으로 해주시는거죠??!!