하는 일이 하는 일인지라 구글에서 코드를 찾아 블로그를 다닐 때가 많다. 그러다가 예전에도 어디서 본듯하긴한데 소스를 이쁘게 정리해주는 소스 입력기? 소스 편집기? 코드 입력기?? 뭐 이런 걸 발견했다.


     바로 Syntax Highlighter


     이름을 몰라서 한참을 찾았었는데 구글링의 힘으로 찾아서 설치/적용 방법을 알게되었다. 차근 차근 따라해보자.


     1. Syntax Highlighter Download


    http://alexgorbatchev.com/SyntaxHighlighter/download


    다운로드는 의외로 간단하다. Syntax Highlighter 공식 홈페이지에서 다운로드 받을 수 있다. 위 링크를 클릭하면 큼지막 하게 Click Here to Download. 라고 씌여있다.

    이 제작자분께서 강력하게 Donate를 원하는 것 같으니 죽어가는 개발자를 위해 Paypal로 돈을 보내줄수도 있겠다.


     

      2. 파일 업로드


    압축 폴더를 풀면 다음과 같은 폴더들이 나온다. 



    이 중 우리가 업로드 할건 scripts 폴더와 styles 폴더이다. 내용은 아래 그림과 같다. 

    필요한 것만 올려도 상관 없으나 용량이 부족하지 않은이상 큰 문제가 없으니 모두 업로드하자.



    Tistory 관리 >> HTML/CSS 편집 >> 파일 업로드 >> 추가 버튼을 차례로 눌러서 모두 업로드



      그럼 업로드가 완료된다.



     3. HTML 수정하기

    각 단계의 코드는 아래 텍스트 파일을 받아서 복붙합니다!

    syntaxhighliter 코드.txt


     여러분이 제일 귀찮아하는 나도 귀찮은 HTML 손보기는 의외로 간단하다

     Tistory 관리 >> HTML/CSS 편집에 다시 들어가 CTRL + F 로 </head>를 찾는다.

     찾고나서 </head> 바로 위에 다음 태그를 삽입해준다.(복붙) 



     아직 끝난게 아니다. 범용성을 늘리기 위해 우리는 textarea 태그를 이용할 것이므로 추가 수정이 필요하다.

     다시 CTRL + F로 <body>를 찾아주자. 

     찾았다면 <body>를 다음과 같이 덮어씌운다(바꾼다).


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

     

    그렇다면 HTML 수정이 완료된다. 이제 사용법만 알면 된다. 참 쉽죠?


     4. Syntax Highlighter 적용법


     원래 Syntax Highlighter 적용법에는 크게 두가지가 있다. <pre> 태그 이용법과 <textarea> 태그 이용법, 하지만 <pre>태그를 이용하게 되면 html태그 코드를 사용할 때 많이 많이 불편하게 되므로 <textarea>태그를 이용하자.


     간단하다. 글 작성할 때 코드를 쓰게된다면 먼저, HTML에티터 타입으로 변경한다.


    그리고 나서 다음과 같이 입력해준다.

     



     5. 예시 및 다양한 변형


     만약 c++ 코드를 입력하고 싶다면? 다음과 같이 입력하면 된다. col이나 width는 중요하지 않다.



     사용할 언어 목록은 다음과 같다.


    Brush name

    Brush aliases

    File name

    ActionScript3

    as3, actionscript3

    shBrushAS3.js

    Bash/shell

    bash, shell

    shBrushBash.js

    ColdFusion

    cf, coldfusion

    shBrushColdFusion.js

    C#

    c-sharp, csharp

    shBrushCSharp.js

    C++

    cpp, c

    shBrushCpp.js

    CSS

    css

    shBrushCss.js

    Delphi

    delphi, pas, pascal

    shBrushDelphi.js

    Diff

    diff, patch

    shBrushDiff.js

    Erlang

    erl, erlang

    shBrushErlang.js

    Groovy

    groovy

    shBrushGroovy.js

    JavaScript

    js, jscript, javascript

    shBrushJScript.js

    Java

    java

    shBrushJava.js

    JavaFX

    jfx, javafx

    shBrushJavaFX.js

    Perl

    perl, pl

    shBrushPerl.js

    PHP

    php

    shBrushPhp.js

    Plain Text

    plain, text

    shBrushPlain.js

    PowerShell

    ps, powershell

    shBrushPowerShell.js

    Python

    py, python

    shBrushPython.js

    Ruby

    rails, ror, ruby

    shBrushRuby.js

    Scala

    scala

    shBrushScala.js

    SQL

    sql

    shBrushSql.js

    Visual Basic

    vb, vbnet

    shBrushVb.js

    XML

    xml, xhtml, xslt, html, xhtml

    shBrushXml.js


     나머지 자세한 사항은 홈페이지에 가면 나와있다.


    이 글이 도움이 되셨다면 아래 버튼을 눌러주세요. 로그인이 필요 없습니다.

    공감은 큰 힘이 됩니다.


    Posted by EE June_Kim
    • 이전 댓글 더보기
    • Favicon of http://smg2252.tistory.com BlogIcon *me
      2015.01.10 16:25 신고

      감사합니다 담아갑니다 ㅋㅋ

    • Favicon of http://moonshoo.tistory.com BlogIcon 골드망고
      2015.01.14 16:32 신고

      덕분에 잘 알았습니다 감사합니다.

    • Favicon of http://bigbigdata.tistory.com BlogIcon 포키극세
      2015.01.21 11:45 신고

      덕분에 잘 설치했습니다!!

    • Favicon of http://scvspace.kr BlogIcon SCV
      2015.02.01 15:53 신고

      잘 정리해주셔서 도움 많이 됐습니다. 감사합니다!

    • Favicon of http://heygyun.tistory.com BlogIcon 뻬이스북
      2015.02.14 18:07 신고

      꿀팁 감사합니다.

    • Favicon of http://iamswdeveloper.tistory.com BlogIcon 춘자
      2015.04.01 19:43 신고

      정말 잘 정리해 주셔서 잘 보고 갑니다.
      감사합니다 :)

    • Favicon of http://fallingstar.tistory.com BlogIcon 무한공백
      2015.04.24 17:13 신고

      감사합니다. 덕분에 쉽게 적용했어요~ ^^

    • Favicon of http://smg2252.tistory.com BlogIcon *me
      2015.06.16 00:04 신고

      감사합니다 매번 여기 보고 참고 합니다.

    • Favicon of http://moksunung.com BlogIcon 구름강아지
      2015.06.30 22:21 신고

      이게 바로 그것이었군요?
      구글링으로 코딩 팁검색하면 늘 있던 그것이...
      이제야 알게되네요 ㅎㅎ감사합니다! 제 블로그에 해야겠어요 ^^

    • Favicon of http://nukestorm.tistory.com BlogIcon _Dogpig
      2015.07.21 17:50 신고

      와 꿀팁이네요 감사합니다!!
      제 블로그에 주소만 퍼가겠습니다 ㅎㅎ

    • Favicon of http://sancs.tistory.com BlogIcon 상크스
      2015.11.19 09:05 신고

      안녕하세요?
      잘 보고 갑니다. 감사합니다.

    • Favicon of http://wengdiiiy.tistory.com BlogIcon 웽디
      2015.12.03 18:26 신고

      감사해요^^!!!!!

    • 감사 합니다 담아가겠습니다 ^^

      • Favicon of http://jb-story.tistory.com BlogIcon EE June_Kim
        2015.12.18 19:11 신고

        트랙백으로 달아주시면 감사하겠습니다!! ^^

    • Favicon of http://bugnote.tistory.com BlogIcon 동희동균다연
      2016.01.19 23:45 신고

      좋은정보 감사합니다.

    • Favicon of http://blog.naver.com/shegirl1003?91611 BlogIcon 좋은날
      2016.06.11 19:54 신고

      좋은 정보 잘보고 갑니다

    • Favicon of http://itchipmunk.tistory.com BlogIcon Chipmunks
      2016.08.08 11:57 신고

      좋은 정보 감사합니다!

    • Favicon of http://iamjoso.tistory.com BlogIcon iamjoso
      2016.11.12 23:56 신고

      ㅜㅜㅜ 전왜 스크립트랑 CSS가 적용이 안될까요ㅜㅜ

    • Favicon of http://huklee.tistory.com BlogIcon 휴클리
      2016.11.13 21:20 신고

      질문이 있습니다~ textarea 안에 html을 활용한 내용을 집어 넣을떄, 문자열로 인식이 안되고 코드로 인식되어 버리는 문제가 있더라구요... 예를 들어서

      <textarea name="code" class="brush:cpp;">
      </textarea>

      를 textarea에 넣고 싶을 떄 다음처럼 써 넣으면

      <textarea name="code" class="brush:cpp;">
      <textarea name="code" class="brush:cpp;">
      </textarea>
      </textarea>

      라고 하면 안쪽의 /textarea가 내용물이 아닌 태그로 인식되어 버리는 문제가 발생하던데... 이 부분은 어떻게 해결하셨나요?

    • Favicon of http://engkimbs.tistory.com BlogIcon 나는새롭다
      2017.04.01 13:09 신고

      오 감사합니다 이번에 새로 블로그 꾸리는 데 도움이 많이 될 것 같습니다

      번창하세요 ㅎㅎ

    • Favicon of http://youthbyme.tistory.com BlogIcon Mainstream
      2017.08.08 16:26 신고

      상세히 설명해주셔서 잘 따라했습니다 감사합니다 !













티스토리 툴바