[티스토리(Tistory)] SyntaxHighlighter Setting!!

Author : 퓨림노 / Date : 2014.06.10 23:18 / Category : before/Develop




블로그를 몇일(달) 째 방치하다가..
css과 관련된 홈페이지 설정을 만지작 거리다가. 티스토리에 css를 이용한 양식들이 있지 않을까 생각이 되어, 검색을 하였습니다.
정말 티스토리에 있는 추천 스킨보다 더 많이 있었지요.

아무생각없이 티스토리에 스킨을 적용하였더니, 
기존에 적용되어 있는 구글광고 및 소스코드출력을 위한 자료들이 초기화가 되어 ㅠ_ㅠ 
참조하였던 블로그들을 다시 살펴보고 추가하는데... 
도저히, 다시보고 할 수 없어 필요한 것을 블로에 그냥 정리하고자 생각했지요. 
요약판이므로 꼭! 젤 아래 참조한 블로그들을 보시길 바랍니다. 

by 퓨림노





먼저 미리보는 움짤!








01. SyntaxHighlighter 3.0.83 Version Download


<THML/CSS 을 편집하자>

01. 관리창 > HTML/CSS 편집 > skin.html 수정
  1.1 "</head>" 검색 하여 바로 위에 아래 코드 저장

<link rel="stylesheet" type="text/css" href="./images/shCoreEclipse.css" />

  1.2 "</body>" 검색 하여 바로 위에 저장
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shAutoloader.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>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>


02. 관리창 > HTML/CSS 편집 > style.css 수정
 - 아래는 문법과 관련은 없지만, 티스토리 스킨(Skin) 변경으로 인해, 이미지의 Size가 제대로 출력되지 않을 때,
   블로그의 폭(width)를 조정하는 것이다. 각 Style마다 width를 조정하는 것이 틀리니, 꼭 제작자 홈페이지를 확인해보아야 할 것 같다. 

@media (min-width: 1200px) {
  .container {
    width: 1500px;
  }
}



03. SyntaxHighlighter 문법 정리
 - 기본적으로  "Pre" 를 많이 사용하고 있다. 하지만 스킨을 변경하면서 코드를 보니 코드에 line번호가 보여 지저분하게 되었다.
    이를 위해서 몇가지 조사를 하다보니 아래와 같이 몇가지 속성을 지정해 줄 수 있었다. 각자 필요한 몇가지만 캐치하고 넘어가도록 하자. 



위의 내용을 티스토리(Tistory)에서 사용하기위해서는 html tag 형태로 삽입을 하여야 한다. 
블루레이( http://blueray21.tistory.com/30 ) 님의 블로그 게시물의 아래쪽에내려가면 정리가 잘되어 있다. 

나에게 필요한 몇가지만 따로 정리하도록 해보자. 




Default

<pre class="brush: java">
class HellowJava
{
    public static void main(String[] args)
    {
        System.out.println("Hello, Java ! ");
    }
}
</pre>

Example
class HellowJava
{
    public static void main(String[] args)
    {
        System.out.println("Hello, Java ! ");
    }
}




gutterAllows you to turn gutter with line numbers on and off. Click here for a demo.

<pre class="brush: java; gutter: false;">
class HellowJava
{
    public static void main(String[] args)
    {
        System.out.println("Hello, Java ! ");
    }
}
</pre>

Example
class HellowJava
{
    public static void main(String[] args)
    {
        System.out.println("Hello, Java ! ");
    }
}




highlight Allows you to highlight one or more lines to focus user’s attention. When specifying as a parameter, you have to pass an array looking value, like [1, 2, 3] or just an number for a single line. If you are changing SyntaxHighlighter.defaults['highlight'], you can pass a number or an array of numbers. Click here for a demo.

<pre class="brush: java; first-line: 11; highlight: [13, 15];">
class HellowJava
{
    public static void main(String[] args)
    {
        System.out.println("Hello, Java ! ");
    }
}
</pre>

Example
class HellowJava
{
    public static void main(String[] args)
    {
        System.out.println("Hello, Java ! ");
    }
}






개인 참고글
 - 티스토리 스킨을 날려버릴 경우를 대비해서, css/html 을 셋팅 해둔 것을 저장해두도록 하자!



reference
[1] 티스토리 본문 폭 늘리기
[2] 티스토리 블로그, 이미지가 본문 가로폭을 넘어갈 때 해결 방법
[3] 티스토리 본문폭 변경으로 인한 이미지 잘림현상 해결하기
[4] 신규하님 블로그 - 초기에 SyntaxHighlighter 를 참조 많이했던 곳 ㅎ
[5] SyntaxHighlighter Themes
[6] 기타




저작자 표시 비영리 동일 조건 변경 허락
신고

'before > Develop' 카테고리의 다른 글

[Unity3D] Animation 제어  (0) 2014.11.01
[unity] unity can not sign application  (0) 2014.07.03
[티스토리(Tistory)] SyntaxHighlighter Setting!!  (0) 2014.06.10
[OpenCV] Blending  (2) 2014.04.22
openCV ROI 영역에 관해  (0) 2013.11.13
Visual studio assist 1830  (0) 2013.11.13

Tags : , , , , ,

Blog Information

퓨림노

앞으로 블로그에 markdown+dropbox를 이용하여 포스팅 예정중!!

Search

Statistics

  • Total : 461,710
  • Today : 10
  • Yesterday : 78

Archives

Copyright © http://vbflash.net All Rights Reserved
Designed by CMSFactory.NET