이 영역을 누르면 첫 페이지로 이동
필린(FILLIN) - 느낌을 담은 사진 블로그의 첫 페이지로 이동

필린(FILLIN) - 느낌을 담은 사진

페이지 맨 위로 올라가기

티스토리에서 SyntaxHighlighter 사용하는 방법

필린(FILLIN) - 느낌을 담은 사진

티스토리에서 SyntaxHighlighter 사용하는 방법

  • 2013.11.28 09:42
  • Note/Web



프로그래밍 관련하여 구글링 하다보면 상용 Edit 편집기의 형태를 띠고 있는 소스 편집 블로그 글을 종종 보게 된다.


Javascript 편집이 가능한 블로그에서 SyntaxHighlighter를 사용해 Edit 편집기 형태로 블로그를 꾸밀 수 있다. 


SyntaxHighlighter 사용 시, 검정색으로 소스코드만 죽 나열해 놓은 타 블로그에 비해, 예약어에는 파란색 Bold 형태로 Highlight가 들어가 있어서 예쁘게 보이기도 하고 시인성도 상당히 뛰어나다.

	
import java.io.IOException;
import java.util.*;

티스토리에서 소스코드를 Edit 편집기 형태로 꾸미는 방법을 소개하고자 한다.

 

 

 

1. SyntaxHighlighter 다운로드

 

SyntaxHighlighter를 다운로드 한다. (현재 최신버전 3.0.83)

http://alexgorbatchev.com/SyntaxHighlighter/

 

 

다운로드한 zip 파일을 압축해제 하면 여러 파일이 있는데, 이 중 필요한 것은 script, Styles 폴더의 파일 뿐이다.

 

 

 

2. 관리 - HTML/CSS 편집 메뉴에서 파일 등록

 

 

 

 

자신의 블로그 관리 페이지로 들어가면 왼쪽 메뉴에 HTMLL/CSS 편집 메뉴를 볼 수 있다.

HTML/CSS 편집 내용 중 파일업로드 탭으로 이동한다.

아래에 추가 버튼을 눌러 조금 전 압축 풀어놓은 script, Styles 폴더 내의 파일을 모두 업로드 시킨다.

 

 

3. HTML/CSS 편집

 

파일 업로드를 마쳤다면 옆 탭인 HTML/CSS 탭으로 이동한다.

 

 

 

skin.html을 수정하는 부분을 볼 수 있는데, </head> 윗쪽으로 아래 내용을 복사해서 붙여 넣는다.

이 때, 주의할 사항으로는 엔터(Enter)가 적용되지 않은 상태로 붙여넣기 되는 경우가 있으니 태그에 맞게 줄바꿈 해준다.

줄바꿈이 없게 되면 스크립트가 주석 뒤에 붙으면서 해당 스크립트 이하를 주석처리 하게 만들기 때문이다.


SyntaxHighlighter에서 글 줄바꿈이 적용되도록 글 전체를 복사하는 방법은 소스에서 더블클릭(전체선택) 후 복사를 하면 된다. 

 

 

 

 

 저장을 눌러 설정을 끝낸다.

 

 

4. SyntaxHighlighter 적용 방법

 

 

 

 

일반적으로 포스팅을 작성하던 것처럼 내용을 입력한 후, 우측 상단의 HTML 편집 체크박스를 눌러 HTML 편집 모드로 이동한다.

 

 

 

 

 

사용법은 상당히 간단하다.

pre 태그에 brush 속성을 해당 코드에 맞게 입력 해주고, pre 태그 사이에 해당 소스코드가 위치하게 하면 된다.

	
<!--Start of SyntaxHighlighter-->
<link rel="stylesheet" type="text/css" href="./images/shCore.css">
<link rel="stylesheet" type="text/css" href="./images/shThemeDefault.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 language="javascript">
SyntaxHighlighter.defaults['toolbar'] = false; // 툴바 설정 (기본값 True)
SyntaxHighlighter.defaults['gutter'] = true; // 라인 번호 설정 (기본값 True)
SyntaxHighlighter.defaults['tab-size'] = 2; // 탭 사이즈 설정 (기본값 4)
SyntaxHighlighter.defaults['first-line'] = 1; // 라인 시작 숫자 (기본값 1)
SyntaxHighlighter.defaults['auto-links'] = false; // 링크 설정 (기본값 true)
SyntaxHighlighter.all();
</script>
<!--End of SyntaxHighlighter-->

 

그리고 미리보기나 저장을 눌러 확인해보면 소스코드가 예쁘게 포스팅 되어 있는 것을 볼 수 있다.

 

 

 

 

 

 

pre 태그의 brush 속성으로는 아래와 같이 정의되어 있다.

	
SyntaxHighlighter.autoloader.apply(null, path(
'applescript @shBrushAppleScript.js',
'actionscript3 as3 @shBrushAS3.js',
'bash shell @shBrushBash.js',
'coldfusion cf @shBrushColdFusion.js',
'cpp c @shBrushCpp.js',
'c# c-sharp csharp @shBrushCSharp.js',
'css @shBrushCss.js',
'delphi pascal @shBrushDelphi.js',
'diff patch pas @shBrushDiff.js',
'erl erlang @shBrushErlang.js',
'groovy @shBrushGroovy.js',
'java @shBrushJava.js',
'jfx javafx @shBrushJavaFX.js',
'js jscript javascript @shBrushJScript.js',
'perl pl @shBrushPerl.js',
'php @shBrushPhp.js',
'text plain @shBrushPlain.js',
'py python @shBrushPython.js',
'ruby rails ror rb @shBrushRuby.js',
'sass scss @shBrushSass.js',
'scala @shBrushScala.js',
'sql @shBrushSql.js',
'vb vbnet @shBrushVb.js',
'xml xhtml xslt html @shBrushXml.js'
));


이 글은 (새창열림) 본 저작자 표시, 비영리, 변경 금지 규칙 하에 배포할 수 있습니다. 자세한 내용은 Creative Commons 라이선스를 확인하세요.
본 저작자 표시
비영리
변경 금지

댓글

댓글을 사용할 수 없습니다.

이 글 공유하기

  • 구독하기

    구독하기

  • 카카오톡

    카카오톡

  • 라인

    라인

  • 트위터

    트위터

  • Facebook

    Facebook

  • 카카오스토리

    카카오스토리

  • 밴드

    밴드

  • 네이버 블로그

    네이버 블로그

  • Pocket

    Pocket

  • Evernote

    Evernote

다른 글

  • 크롬 글자(글씨) 안보임 문제 해결, chrome characters disappearing, DirectWrite 사용

    크롬 글자(글씨) 안보임 문제 해결, chrome characters disappearing, DirectWrite 사용

    2014.08.28
  • 구글 지메일 단축키 모음, Gmail 단축키 보기

    구글 지메일 단축키 모음, Gmail 단축키 보기

    2014.01.07
  • SyntaxHighlighter 복사 붙여넣기 - 클립보드 이용 방법(No Flash copy to clipboard)

    SyntaxHighlighter 복사 붙여넣기 - 클립보드 이용 방법(No Flash copy to clipboard)

    2013.12.04
  • 웹 브라우저(Web Browser) 별 HTML5의 기능 지원 범위

    웹 브라우저(Web Browser) 별 HTML5의 기능 지원 범위

    2013.08.20
다른 글 더 둘러보기

정보

필린(FILLIN) - 느낌을 담은 사진 블로그의 첫 페이지로 이동

필린(FILLIN) - 느낌을 담은 사진

  • 필린(FILLIN) - 느낌을 담은 사진의 첫 페이지로 이동

검색

메뉴

  • Home
  • Guest Book
  • Tag

카테고리

  • 분류 전체보기 (592)
    • His Story (135)
      • Korea (93)
      • Australia (39)
      • Japan (2)
      • Essay (1)
    • Photography (120)
      • Concept Story (5)
      • Landscape (52)
      • Planet (5)
      • Feeling (22)
      • Macro (20)
      • Model (12)
      • Photo Contest (4)
    • Reviewing (138)
      • Electronics (5)
      • Photo & Imaging (22)
      • Testing a wine (45)
      • Arts (3)
      • Cafe (11)
      • Foods (37)
      • Etc. (15)
    • Note (197)
      • 리시드(Reseed) (1)
      • Photoshop (10)
      • 촬영장소 (1)
      • SongWriting (1)
      • Tip & Tech. (52)
      • Database (10)
      • Dev (19)
      • Mobile Game (1)
      • Drawing (24)
      • Network (7)
      • iOS , OS X (28)
      • Web (8)
      • Car (19)
      • Event (5)
      • Photo Contest schedule (11)

태그

  • 티스토리챌린지
  • 선광신컨테이너터미널
  • SNCT
  • 와인
  • 오블완
  • 송도
  • 오막포
  • 색칠공부

나의 외부 링크

  • 느낌을 담은 사진, 필린(FILLIN)
  • 네이버 블로그 이웃으로 추가
  • 필린 그라피
  • Instagram for Fillin
  • Facebook for Fillin
  • 500px
  • 디지털카메라매거진
  • 캐논코리아 블로그
  • 영상디자인 연구실
  • 산들산들
  • 디카 허브
  • Point of the day
  • 단적비의 찰칵하는 순간의 설레임
  • 파란오레오
  • Mute's Blog
  • Digital Photography Review
  • LensTip.com - lens review
  • 루비의 정원
  • 신나는 디지털놀이터 | 팝코넷
  • 프라치노 공간 (스킨)
  • Google Adsense
  • Google Analytics
  • 구글 서치
  • W생활정보
  • SWEV

정보

Fillin(필린)의 필린(FILLIN) - 느낌을 담은 사진

필린(FILLIN) - 느낌을 담은 사진

Fillin(필린)

블로그 구독하기

  • 구독하기
  • 네이버 이웃 맺기
  • RSS 피드

방문자

  • 전체 방문자
  • 오늘
  • 어제

티스토리

  • 티스토리 홈
  • 이 블로그 관리하기
  • 글쓰기
Powered by Tistory / Kakao. Copyright © Fillin(필린).

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.