블로그 소스코드 가독성 높이기

서론

IT업종에 종사하다보니 소스 코드를 볼일이 많다. 특히나 관련 공부를 하거나 도움이 될 만한 정보가 있으면 블로그에 올렸었는데 전에 쓰던 블로그에서는 하나하나 바보같이 수동으로 색깔을 주었었다. ㅠㅠ 그런데 검색을 조금 하다보니 툴을 이용하여 긁어오는 방법, 그리고 css와, js파일들을 사용하여 <pre>태그로 사용하는 방법도 있다는 것을 알게 되었다.

여러가지 방법들 중 이 포스팅에서는 SyntaxHighlighter 라는 자바스크립트를 사용하여 블로그 내에 사용 할 것이다!!

public class Java {

public static void main(String[] args) {

//안녕안녕 출력

System.out.println("안녕안녕");

}

}

↓

public class Java {

	public static void main(String[] args) {
				//안녕안녕 출력
				System.out.println("안녕안녕");
	}
}

SyntaxHighlighter?

SyntaxHighlighter is a fully functional self-contained code syntax highlighterdeveloped in JavaScript

라고 설명이 되어있다. 뭐 자세한 정보는 해당 사이트에 들어가면 잘 나와있다. 

SyntaxHighlighter사이트 링크 

사실 이 곳에 들어가서 보고 따라 해도 되지만 티스토리 블로그에는 어떻게 적용하는지에 대해서 포스팅을 할 것이다.

본론

1. 파일 다운로드 하여 업로드 하기

scripts.zip

위의 사이트로 들어가서 다운로드 받는다. 따로 압축하여 올렸다.

그리고 압축을 풀어보면 여러개의 파일이 있는데 이 중에 styles와 script 폴더에 있는 모든 css, js 파일을 업로드 할 것이다.

Tisory 관리 페이지 -> HTML/CSS 편집 -> 파일업로드

업로드하기

올린 후 저장을 한다.

2. 설정 하기

HTML 부분에다가 아래 사진과 같이 소스코드를 추가 한다..

</head> 가 끝나기 전에 넣으시면 된다. 단 주의사항!! 아래 사진에서 파란색 밑줄 친 부분의 순서가 바뀌면 작동이 안될 수도 있다. 반드시 저 두개는 상위에 올려놓아야한다. 차례대로 읽는거라서 아래 브러시들이 인식을 못하게 되면 Can`t find brush for: java. 이런식으로 뜰 것이다.

HTML에 추가하기

그리고 빨간색 밑줄 친 부분은 보여질 형식의 테마 인데, 나는 이클립스 테마가 마음에 들어 이클립스로 해주었는데 아래 링크를 따라 들어가셔서 다른 테마로 변경하고 싶으시면 해당하는 css명으로 적용 하면 된다.

테마 변경 CSS 명 링크 

아래 소스를 긁어다가 붙여넣기 하자. 

3. 적용하기

아주 간단 하다. 다음과 같은 형식을 지켜서 쓰면 된다.

예시..

<pre>태그 안에 변환하실 소스코드를 넣어두고, class로 구분 한다. 위의 그림에서는 brush: java;로 되어있으므로 java 언어로 적용하여 되어 있다. c언어로 하고 싶다면 brush: c;로 하면 된다.

또 다른 언어들은 아래 링크를 따라가 표를 참고하여 적용 하시면 된다.

브러시 별명 링크

두번째 컬럼의 Brush aliases 라고 되어있는 부분 중에 아무거나 하나 넣어서 사용하면 된다.

결론

아주 심플하게 잘 만든 자바스크립트. 굿굿 툴을 사용하여 긁어서 붙여넣기 하는 것이 편할 수도 있지만, 이렇게 한번 설정해 놓으면 언제 어디서든 적용 할수 있으니 필자는 이 방법을 추천한다. 다시 한번 말하지만 HTML에 소스 붙여넣기 할때 순서 바뀌면 오류 나니 조심하자.