티스토리 소스코드 하이라이팅

[애드센스-중급강의 4/98] Tistory Source Code Hilighting

티스토리에 소스코드 하이라이팅을 하는 방법에 대해 알아보자. 

일반적인 생활, 사진, 요리, 육아 등의 개발 소스와 관련이 없는 블로그를 운영한다면 소스코드 하이라이팅을 사용할 필요는 없다. 

하지만 블로그에 html, JavaScript, java, c++ 등과 같은 개발 소스를 적을 필요가 있을 경우 좀 더 시각적으로 보기 좋고, 입력하기 편하게 할 필요성이 생긴다. 

SyntaxHighlighter는 소스코드를 시각적으로 보기 좋고, 입력하기 편하도록 만들어 준다. 

이번 포스트에서는 SyntaxHighlighter를 티스토리에 적용하는 방법에 대해 알아보자. 

<지원 언어> 
ActionScript3, Bash/shell, ColdFusion, C#, C++, CSS, Delphi, Diff, Erlang, Groovy, JavaScript, 

Java, JavaFX, Perl, PHP, Plain Text, PowerShell, Python, Ruby, Scala, SQL, Visual Basic, XML

다운로드

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

위의 다운로드 링크로 이동하여 파일을 다운로드 받고 압축을 푼다. 

파일 업로드

압축을 풀어서 아래 3개의 파일을 블로그에 업로드 한다. 

scripts 폴더의 shCore.js

scripts 폴더의 shBrushJScript.js

styles 폴더의 shCoreRDark.css

(필자는 다른 파일도 업로드 했지만, 위의 3개 파일만 업로드 하도록 하자. )

<폴더 설명>

 폴더는 크게 script와 styles가 있다. 

 script 폴더에는 개발 언어별로 js 파일들이 있고,

 styles 폴더에는 개발 소스를 어떤 형식으로 보여 줄지를 정의한 css 파일이 들어가 있다. 

.

만약 개발 소스가 자바스크립트가 아니라면 shBrushJScript.js 파일 대신에 자신이 사용하는 개발언어에 해당하는 js 파일을 업로드하면 된다. 

스타일은 우선 shCoreRDark.css 이 파일을 올리도록 하자. 

<개발 언어별 사용 파일> 

 개발 언어별로 어떤 파일을 사용해야 하느지는 아래 사이트에서 참고할 수 있다. 

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

파일이 업로드 되었다면, HTML/CSS 편집을 하자. 

</body> 태그 바로 위에 아래 내용을 추가하자. 

포스팅을 해보자.

환결설정은 모두 끝났다. 이제 포스팅을 해보자. 

티스토리 블로그의 글쓰기에서 개발 언어가 들어가는 부분을 작성하자. 

글쓰기에서 HTML에 체크한다. 

HTML 모드에서 아래 내용을 추가하자. 

function testSyntaxHighlighter()
{
	return "Test Complete!";
}

저장을 하고 포스팅을 보면 아래와 같이 보이게 된다. 

<다른 개발 언어 사용 방법> 
 pre 태그사이에 개발소스를 넣으면 된다. 

 brush 다음에 나오는 js 대시에 자신이 사용하는 개발 언어명을 입력하자. 

이제 모든 작업이 완료되었다. 

위에서 우리는 shCoreRDark.css 파일을 업로드하고, 이 파일을 사용했다. 

이 파일을 사용했을 때 위의 이미지에서 처럼 검은색 배경에 파란색과 연두색으로 소스가 표시된다.

하얀 배경을 사용하고 싶다면, shCoreDefault.css 파일을 사용하면 된다. 

styles 폴더에 다른 css 파일도 확인해보고, 자신의 블로그 디자인에 가장 잘 맞는 css파일을 선택하도록 하자. 

.