티스토리 코드 강조 - SyntaxHighlighting

티스토리 블로그에서 IT분야 정보글을 작성하다보면

html, css, php 등 웹언어나 프로그램언어를 소개할 때 난감했던 분들이 많으실 겁니다.

저같은 경우는 해당 언어를 지원하는 툴(에디터플러스 또는 울트라에딧 등)에서

소스코드 작성 후 스크린샷을 찍어 올리는 방법으로 글작성을 많이 했었는데요

이런 번거로운을 한 방에 날려줄 코드구문강조 방법을 알게 되어서 소개합니다.

아래 안내를 따라하시면 됩니다.

SyntaxHighlighting - 코드구문강조

1. http://alexgorbatchev.com/SyntaxHighlighter/download/

Alex Gorbatchev의 사이트에서 다운로드

2. 티스토리에 다운로드 받은 소스를 업로드

3. 티스토리의 관리 > 꾸미기 > html/css 편집에서 코드 추가

4. 적용법 및 사용법

위 다운로드 링크를 통해 접속하면 아래와 같은 화면이 보이는데요

사진의 Click Here to download 를 클릭하여

내 컴퓨터의 적당한 곳에 다운로드합니다.

압축파일의 형태로 다운로드 됩니다. 압축을 해제해 줍시다.

파일업로드 탭 선택

파일업로드 선택에서 아래의 추가버튼을 클릭한 후

빨간 테두리로 강조한 scripts 폴더와 styles 폴더 내의 모든 파일을 업로드 합니다.

다른 파일들은 전혀 필요가 없습니다.

이제 위 경로에 있는 skin.html 에 소스를 추가해 줘야합니다.

우선 티스토리 관리화면에서 Ctrl + F (검색기능 단축키)를 눌러

</head>부분을 찾은 후 아래의 소스를 </head> 윗 부분에 추가해 줍니다.

3번까지 모두 하셨으면 이제 사용할 준비가 모두 끝났습니다.

블로그에 글을 작성하실 때 html모드를 선택합니다.

소스에 아래 예시대로 하시면 적용 끝 - 미리보기로 확인하세요

 
// C또는 C언이이면 해당언어에 cpp 또는 C
// PHP면 해당언어에 php와 같은 형태로 입력
// html이면 html, css이면 css 자바스크립트이면 js
....
적용할 코드
....

코드 강조에 대해서 알아보았습니다.

일반 가입형 블로그에서도 적용할 수 있는지는 잘 모르겠지만

티스토리 같은 설치형 블로그라서 이런 구문강조기능도 사용할 수 있네요.

즈칸루하