소스 코드를 블로그 본문에 이뿌게 보이도록 하자

안녕하세요. 행복을 노래하는 초매입니다.

블로그에서 글을 포스팅할 때 일반적인 텍스트라면 그냥 작성해서, 폰트 스타일을 수정해서 이뿌게 꾸미면 되지만, 소스 코드를 텍스트와 섞어서 작성하게 되면, 그리 이뿌게 표현되지 않습니다. 그래서 많은 분들이 SyntaxHighlighter 라는 것을 많이 사용해서 표현하곤 하죠. 그러면 SyntaxHighlighter 을 적용해서 하는 소스를 이뿌게 표현하는 방법을 설명하도록 하겠습니다.

 

▶ SyntaxHighlighter 를 적용한 예

 

 

 

 

위 이미지와 같이 소스코드를 1줄, 2줄... 로 표현되어 지며, 속성, 예약어, 값에 따라 색상이 다르게 표현됩니다. 이미지를 보고, 이런 기능을 사용하고 싶지 않다면, 이 블로그를 나가시면 됩니다... ㅎㅎㅎ

 

▶ 일단 다운 받기

 

다운받는 주소 ☞ http://alexgorbatchev.com/SyntaxHighlighter/download/ 

 

 

위 주소로 가시면, Click here to download. 라는 링크가 있고, 그것을 누르면 다운로드 받죠. 그것을 친절하게 압축을 풀어주시면 됩니다.

 

▲ 압축푼 모습...

 

자... 압축을 풀면, 해당 폴더가 생기고, 폴더 내에 계속 들어가게 되면, 여러 폴더와 파일들이 나타나게 됩니다.

 

 ▲ 여러 폴더와 파일들이 있지만, src, scripts, styles 에 있는 파일만 사용할꺼예요.

 

 

▲ 파일업로드의 추가버튼으로 파일들을 업로드 해야 합니다.

 

▲ src의 파일 3개를 업로드 합니다.

 

▲ scripts의 3개 파일만 업로드 합니다.

 

▲ styles의 2개 파일을 업로드 합니다.

 

위 이미지를 보시면 알겠지만, 파일들을 업로드를 해야 그것들을 이용해서 소스코드를 표현해줄 수 있습니다. 그러기 위해서 티스토리에서는 업로드 하는 기능이 있는데요. HTML/CSS 편집의 파일업로드의 추가 버튼을 통해서 파일을 업로드 해야 합니다.

 

< 업로드 해야 하는 파일 >

src 폴더의 3개 파일

scripts의 3개 파일

styles의 2개 파일

 

이미지를 보시고, 파일을 찾아 업로드 하시면 되구요. 일단 업로드가 끝나셨다면, 다음 단계로 넘어갑니다.

 

▶ 소스 코드 등록

적용되어 있는 것을 보면, 색상 및 여러가지 효과들이 있는 것을 볼 수 있는데요. 그것을 파일을 업로드 했다고 해서 바로 적용되는 것이 아닙니다. 업로드한 파일을 실행하기 위한 명령어를 등록해야 합니다.

 

 

위 그림과 같이 SyntaxHighlighter Start ~ End 까지 내용을 HTML 의 head 가 끝나기 전에 입력하시면 됩니다. 그러면 준비 과정은 모두 끝난 것입니다. 상세하게 설명하려다 보니, 점점 길어지네요.

 

▶ 본문에서 작성하기

 

 

위 이미지처럼 본문에서 작성하실 때는 HTML 모드에서 pre 태그의 class 속성값에 brush: js 라고 입력하신다음, 작성하시려는 소스를 작성하신 다음, pre 태그로 닫아 주시면 모든 것이 끝납니다. 저렇게 작성한 다음, 저장하시고 해당 포스팅을 보시면 아래 이미지와 같이 표현되어 있는 것을 보실 수 있습니다.

 

 

아,,,, 너무 돌아 돌아 돌아 왔네요. 보기에는 어렵게 보일 수도 있는데요. 간단하게 설명하자면...

 

1. 파일 다운 받기

2. 다운 받은 파일 중 몇개를 업로드하기

3. HTML/CSS 편집 기능을 이용해서 HTML 소스 추가하기

4. 본문에 pre 태그를 이용해서 작성하기

5. 심플하게 표시되는 모습 감상하기

 

pre 태그는 내가 키보드로 작성한 글들을 아무런 효과없이 그대로 보여주는 역할을 하는데요. 이 태그에 class 를 추가함으로써 여러가지 효과를 볼 수 있다는 것이 좋습니다. 예전 버전에는 소스보기, 복사하기, 프린트하는 기능까지 있었는데, 최신 버전은 그런것들을 찾아 볼 수 없어서 아쉬웠습니다. 제가 못하는 것 이겠죠? ^^?

 

이상, 초매였습니다.