티스토리에서 Syntax Highlighter 사용하기
카테고리 없음 2017. 5. 25. 22:34
'17. 05. 26.
오픈소스의 호스팅이 안정적이지 않아 일시적인 블로그 접속장애가 일어났습니다.
그래서 관련 파일들을 티스토리에 업로드하는 방식으로 변경해서 사용했습니다. (첨부)
사용법에서 본문 내용과 거의 유사하며 단지 URL로 연결된 파일들을
티스토리에 업로드해서 링크하는 식으로 변경하는것 뿐입니다.
SyntaxHighlighter 3.0.83.7z작성하는 코드들의 가독성을 위해 티스토리에 Code Highlighting 사용하기로 했습니다.
"SyntaxHighlighter"란 오픈소스를 블로그에 적용하면서 사용하는 방법에 대해 다루어보겠습니다.
(작성일 기준 최신 4.x 버전이지만, 사용절차가 번거로워 구버전인 3.0.83으로 포스팅합니다.)
SyntaxHighlighter 은 무엇?
보이는 것처럼 Javascript로 개발된 완전히 기능적으로 자체포함된 Code Syntax Highlighter입니다.
단순하게 아래의 데모처럼 화면에서 코드를 가독성을 좋게하는 역할을 합니다.
항상 소스를 사용할 땐 License를 먼저 보고 있습니다.
이 소스는 아래보시는 것처럼 MIT License, GPL 중 사용자에 적합한 라이센스 규정을 따라 사용할 수 있습니다.
밑줄친 부분처럼 심지어 상용 프로젝트에서도 Copyright Header가 유지되는 한 사용할 수 있다고 합니다.
Tistory 블로그에 SyntaxHighlighter 적용하기
보통 Tistory에 오픈소스를 적용할때 사용할 수 있는 방법은 크게 두가지 입니다.
- 코어를 다운로드 받아 티스토리에 업로드해서 사용하는 방법
- 이미 온라인 상에 업로드된 파일을 링크해 사용하는 방법
코어를 다운로드 받아 사용할 경우,
오픈소스 개발자가 일방적으로 변경하는 부분(또는 문 닫는...)에 있어서 영향을 받지 않아 안정적입니다.
하지만, 저는 번거로움 때문에 그냥 온라인 링크를 사용하도록 하겠습니다.
공식적인 사용법을 보고 싶다 하시는 분은 [SyntaxHighlighter] 에 접속하셔서,
우측 하단에 Hosting 메뉴 참고하시면 됩니다.
들어가서 읽어보면 개발자는 수동 업그레이드의 번거로움 없이 최신 버전을 사용하고 싶어하는
당신을 위해 호스팅 기능을 "무료"로 제공하고 있습니다.
무료로 호스팅을 제공하는 동안 약 22백만건의 Request와 83GB의 대역폭을 사용하고 있고,
매달 40달러의 비용이 소요된다고 합니다.
그래서 이를 지불하기위한 Donation을 부탁하는 내용이 있어 언급하고 넘어갑니다. ㅎㅎ;;
이제 공식 사이트에 대한 소개를 마무리하고 간단하게 적용하는 방법에 대해서만 포스팅하겠습니다.
호스팅 기능을 통해 적용할 경우, 적용자체는 매우 간단합니다.
[티스토리 블로그] > [관리자 페이지] > [HTML/CSS 편집] 기능으로 접속합니다.
그리고 <head></head> 태그에 사이에 아래처럼 SyntaxHighlighter를 사용하기 위한 부분을 링크를 걸면 됩니다.
테마와 사용할 언어는 공식 사이트에 친절하게 안내가 되어있습니다.
제공되는 테마는 아래와 같고, 원하는 테마가 있다면 해당하는 css를 위의 shThemeDefault.css에 대체하면 됩니다.
(공식링크: [SyntaxHighlighter Themes] )
제공되는 언어입니다. 위에 있는 사용법에서 Language(주석)과 같이 필요한 언어를 하나씩 추가하시면 됩니다.
(공식링크: [SyntaxHighlighter Brushs])
글은 길었지만, 사용법은 상당히 쉽습니다.
여기까지 끝나셨으면 이제 사용하러 가세요!
사용법은 글을 작성할 때 HTML 편집기를 열어
function foo() { }</pre> |
이런식으로 쓰면 되고, brush에 위 그림의 Brush Alias 중 알맞는 것을 적어주시면 됩니다.
HTML 편집기를 종료하면 글작성중일 때는 제대로 안보일 수 있지만 미리보기해서 제대로 보이면
정상적으로 적용된 것입니다.
아래는 제 블로그에 적용한 모습입니다.
