http://alexgorbatchev.com/SyntaxHighlighter/

 

 

블로그에서 다들 이 사이트에 가서 다운로드 하면 된다고 하던데.. 잘 모르겠다ㅠ;;

그래서 그냥 압축파일 올릴테니 이거 다운 받으시고 따라오세요~

 

1. 압축파일을 저장하고 푼다(바탕화면이나 외장하드나 상관없어요!)

 

syntaxhighlighter_3.0.83.zip

 

2. Tistory에 파일을 업로드 한다.

 

   (1) 티스토리 관리에서 HTML/CSS를 누른다.

 

(2) 파일업로드에서 추가 버튼을 눌러 압축풀었던 파일을 찾는다.

 

(3) 풀었던 압축파일 중 script파일과 styles파일 두개를 업로드 한다.

(+설명 : script는 사용할 언어를 지정하는 파일들 / styles는 스킨을 지정하는 파일들 이에요. 용량때문에 저 두 파일만 등록해야합니다!!!)

 

 

 

-> script파일들!! Ctrl+A를 눌러서 모두 열어야 해요!!

 

 

-> styles파일들!! Ctrl+A를 눌러서 모두 열어야 해요!!

그리곤 저장!!

 

여기까지 잘 따라 오셨나요?

그러면 이제 HTML과 CSS부분을 만져볼게요 ㅋㅋ

 

3. HTML에서 </head> 바로 앞 부분에 밑에 코드를 넣는다.

 

 

 

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

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

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

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

  SyntaxHighlighter.defaults["toolbar"] = false; // 툴바없애기

  SyntaxHighlighter.defaults["auto-links"] = false; // 자동 링크없애기

  SyntaxHighlighter.defaults["tab-size"] = 2; // 탭사이즈를 2로 설정

  SyntaxHighlighter.all(); 

 // 줄바꿈을 안하실 분들은 여기 부터 생략하세요.

  function SyntaxlineWrap(){ // 줄바꿈을 위한 스크립트

   var wrap = function () {

        var elems = document.getElementsByClassName('syntaxhighlighter');

        for (var j = 0; j < elems.length; ++j) {

            var sh = elems[j];
var gLines = sh.getElementsByClassName('gutter')[0].getElementsByClassNam('line');

 var cLines = sh.getElementsByClassName('code')[0].getElementsByClassName('line');

            var stand = 20;

            for (var i = 0; i < gLines.length; ++i) {

                var h = $(cLines[i]).height();

                if (h != stand) {

                    console.log(i);

            gLines[i].setAttribute('style', 'height:' + h + 'px !important;');

                }

            }

        }

    };

    var whenReady = function () {

        if ($('.syntaxhighlighter').length === 0) {

            setTimeout(whenReady, 800);

        } else {

            wrap();

        }

    };

    whenReady();

  }

$(function(){

   $(window).bind("load resize", function(){

     SyntaxlineWrap();

   });

});

</script>


 

이 코드를 모두 복사해서 </head>바로 앞 부분에 복사해 넣어주세요~!!

 

4. <body>찾아서 코드 바꾸기

그리고, Ctrl+F를 이용해서 <body>부분을 찾으세요!!!<body id~어쩌구>라고 씌여있는 경우도 있음!

암튼, <body>를 찾으셨다면, 다음과 같이 덮어씌어주세요(바꿔주세요!)

 

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

 

5. Syntax Highlighter 적용법

 이제 소스를 적용하여 글을 써 보겠습니다.

 티스토리 글쓰기로 들어가서 HTML탭을 눌러줍니다.

 

 

그리고 <pre>태그법을 이용해 다음과 같이 작성해 주세요.(복붙)

 

<pre name="code" class="brush:원하는 언어;">
에디터 모드에서 이 사이에 코드를 작성하면 된다.
</pre>
 
에디터 모드에서 이 사이에 코드를 작성하면 된다.

 

 

사용언어는 다음과 같이 쓸 수 있습니다.

 

끄읕!!!

 

+ 덧1) 스크롤바가 너무 귀찮으시면 Tistory관리 > HTML/CSS편집 으로 들어가서 맨 마지막 부분에 다음 코드를 삽입하면 불필요한 스크롤바를 제거하실 수 있습니다.

 

div .syntaxhighlighter { overflow-y: hidden!important; overflow-x: auto!important;

 

 

'기타' 카테고리의 다른 글

[자소서팁] 한국이름 영어식 표기  (0) 2018.05.08
[기타] SyntaxHighlihter 설치 및 사용법  (4) 2017.08.10
  1. 모종 2017.08.24 19:20 신고

    간지작살입니다!!

  2. 오늘밤바라봄 2017.08.27 22:21

    소스를 깔끔하게 올릴 수 있어서 좋네요 감사합니다~

+ Recent posts