티스토리 뷰

Tistory

티스토리 좋은 소스코드 표현방법

Mir(whdghks913) 2013.08.28 21:15

안녕하세요~

티스토리 강좌는 오랜만이군요


전부터 시도했지만 안됬던게 하나 있었습니다

바로 Syntax Highlighter...


이게 뭐냐면... 티스토리 블로그를 보면 코드소스가 깔끔하게 정리된 블로그가 있는대요 이게 부러워서 게속 시도했지만 fail...


그런대 오늘 성공했습니다!

그래서 그 방법을 오늘 소개하도록 할까 합니다 ㅎㅎ


먼저 Syntax Highlighter을 다운받아야 합니다


공식 홈페이지 http://alexgorbatchev.com/SyntaxHighlighter에서 받아도 되고 첨부파일을 받아도 됩니다


syntaxhighlighter_3.0.83.zip


첨부하였습니다 바로 받아주세요~ 2013-08-28기준 최신 파일입니다



다운받은다음 압축을 풀어주세요


압축풀면 나오는 폴더의 갯수는 5개정도 되지만 지금 필요한건 몇개 안됩니다

scripts와 styles가 필요한 폴더입니다



티스토리 관리자 페이지에 가서 Html을 수정해 봅시다


사진처럼 들어가 주세요


그다음 아래에 있는 [+추가] 버튼을 눌러 필요한 파일을 추가해 봅시다


scripts폴더안에 있는 js파일중 원하는 파일을 업로드 해주세요

만약 너무 많다... 그렇다면 필요한 파일만 업로드 해도 됩니다

shBrush**.js파일은 나중에 지정할 소스 언어의 종류 입니다

shBrushCpp는 C, shBrushJava는 자바, shBrushDiff는 diff이죠


이렇게 shBrush**.js중에서 자신이 필요한 파일만 업로드 해도 됩니다

shCore.js같은 파일(shBrush가 없는파일들)은 모두 업로드 해주세요


scripts폴더에서는 shCore.js와 shLegacy.js는 필수 파일 입니다


styles폴더에서는 shCore.css파일과 shThemeDefault.css(또는 shTheme~.css)파일도 무조건 넣어주셔야 합니다




그다음 위에 있는 HTML/CSS를 눌러서 html을 수정해 봅시다

<html>이라는 코드 아래에 어디든지 아래 코드를 복사해서 추가해 주세요



<script type="text/javascript" src="./images/shCore.js"></script>

<script type="text/javascript" src="./images/shLegacy.js"></script>

<script type="text/javascript" src="./images/shBrushAppleScript.js"></script>

<script type="text/javascript" src="./images/shBrushAS3.js"></script>

<script type="text/javascript" src="./images/shBrushBash.js"></script>

<script type="text/javascript" src="./images/shBrushColdFusion.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/shBrushErlang.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/shBrushJavaFx.js"></script>

<script type="text/javascript" src="./images/shBrushJScript.js"></script>

<script type="text/javascript" src="./images/shBrushPerl.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/shBrushPowerShell.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/shBrushSass.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">



그다음 skin.html의 마지막 부분인   </body></html>위에 아래 코드를 또 넣어주세요


<pre class="brush: javascript">

<script type="text/javascript"> SyntaxHighlighter.defaults['toolbar'] = false; SyntaxHighlighter.all();

</script>



자 그럼 이제 작업은 끝났습니다

이제 게시글을 작성할때 코드를 아래 html소스안에 넣어주시면 됩니다


<pre class="brush: 언어종류">


// 코드내용을 이곳에 적습니다


</pre>


이때 언어종류에는 javascript, c, java등등이 들어갈수 있습니다

자세한건 http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/에서 참조해 주세요^^



+ 모바일 환경에서 코드가 안보일경우 또는 하이라이딩(강조표시)가 안될경우

SyntaxHighlighter의 치명적인 단점이랄까요?

코드에 < 나 >가있으면 작동을 하지 않습니다...;

<는 &lt;으로, >는 &gt;으로 치환해 줘야 하는대요


간단한 프로그램을 찾았습니다

http://emflant.tistory.com/42

여기서 프로그램의 설명과 방법을 확인하실수 있습니다


<pre>를 사용하지 않고 <script>를 사용하면 해결할수 있다고 합니다

그러나 특정환경(모바일등등)에서는 아에 표시되지 않을수 있고 검색봇에게 <script>는 검색하지 않는다는점이 단점이 되겠습니다


아래는 <script>로 사용한 코드의 예입니다 (모바일에서는 안보일겁니다, 또는 자바스크립트 사용여부를 확인하세요)


<script type="syntaxhighlighter" class="brush: js">

// 코드를 입력하시면 됩니다

</script>


이런식으로 작성해 주시면 됩니다

예제는 http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html에서 주어왔습니다




이글은 [] 에서 다시 보실수 있으며 원본 글의 저작권은 미르에게 있습니다



+추가

http://prev.kr/app/ColorScripter/

ColorScripter라는것도 있습니다

이것은 html 자바스크립트를 사용할수 없는 환경, 즉 Syntax Highlighter을 못쓰는 환경에서 사용가능한 방법입니다

댓글
  • Favicon of https://naddola.tistory.com 나돌라 스킨 한번 잘 못 바꿨다가 그전에 올린 코드들이 다 안되서, 한참 헤매다가 이글 보고 다시 수정했네요. 좋은 정보 감사합니다 ^^ 2014.02.06 12:14 신고
댓글쓰기 폼