ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • SyntaxHighlighting 사용법
    etc 2018. 6. 20. 11:37

    서론

    블로그를 작성하면서 여러가지 sysntax highlighting 방법을 찾고 사용해보다가 그 중 유일하게 라인넘버가 표시되는 것을 찾았다.
    추후 까먹을까봐 정리..

    본론

    다운로드 : https://github.com/syntaxhighlighter/syntaxhighlighter

    위 링크에서 SyntaxHighlighter 를 받을 수 있다. 그러나 github 사이트의 버전은 작성일 기준 v4 이므로 필자는 블로그를 돌아다니며 v3.0.83 을 다운받았다.


    [step 1]

    위 링크에서 다운받은 파일을 압축 해제하여 scripts 폴더와 styles 폴더의 파일들을 tistory manage 페이지의 HTML 의 파일업로드 탭을 통해 업로드한다.


    [step 2]

    HTML 탭에서 <head> 와 </head> 태그 사이에 아래 내용을 기입한다.


    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    


    [step 3]

    <body> 태그의 attribute 를 아래와 같이 수정한다.

    
    


    [step 4]

    CSS 탭에서 아래 코드를 적당한 위치에 기입한다.

    /* SyntaxHighlighter */
    /* 불필요한 세로 스크롤바를 제거합니다 */
    div .syntaxhighlighter { overflow-y: hidden!important; overflow-x: auto!important; }
    


    [step 5]

    코드 작성시 <pre class="brush:[langage]"></pre> 태그를 사용하여 작성한다.

    <pre class="brush:cpp">
    void main() { ~ }
    </pre>
    


    'etc' 카테고리의 다른 글

    Terminal Key mapping  (0) 2018.08.08
    OSX 초기설정  (0) 2018.05.22
    Ubuntu 초기설정  (0) 2018.05.22
Designed by Tistory.