블로그에 글쓰기 - Syntax highlighter 기능을 사용하자

블로그를 만들기 시작하면서 포스팅 횟수가 많아 지다보니, 포스팅하는 내용의 대부분이 티스토리 글쓰기, 블로그 관리하기와 관련된 내용이 많습니다. 어제 까지 문제가 없었는데, 무심코 html코드가 포함된 글을 올리면 html tag가 인식되어 code 자체를 글에 포함할 수 없는 사태 - 이미 알고 계시는 분들이야 문제가 아니되겠지만 - 가 벌어졌습니다. 이런 황당한 일이 . . . ?

안되면 습관적으로 구글링합니다. 
그래서 발견한 해결책입니다. 저 처럼 블로깅을 처음하시는 많은 분들이 이 문제에 직면할 수 있을겁니다. 물론 구글링을 통해 저 처럼 해법을 찾을 수도 있습니다. 이런분들께 조금이라도 도움이 되길 바라면서 정리해 봅니다.

Syntax highlighter 기능을 이용하면 블로그에 글을 작성할 때 이 문제를 해결할 수 있습니다. 다음에 제가 학습하고 적용한 내용을 서머리 합니다.

티스토리 에디터에 Syntax highlighter 기능 삽입하기

이하의 설명들 이미 폐기하였습니다. 링크를 따라가서 관련된 방법 조치하심이 마땅한 줄로 아뢰오.

신규하님의 블로그를 참조하기 바랍니다. 방법은 비슷하지만 사용하기가 훨씬 쉬워졌습니다. 옛날 방법은 정말 짜증납니다. 3시간을 헤메다가 실폐했습니다.

• 첨부한 자바스크립트(js) 파일과 스타일(css) 파일 다운로드하여 관리자 페이지에서 파일업로드 기능을 이용하여 ../images/폴더(자동으로 여기에 들어감)에 업로드 합니다.
• 위의 압축파일을 임의의 폴더에 압축해제 합니다.
• 압축해제를 하면 두 개의 폴더가 보입니다. scripts 폴더와 styles 폴더에 있는 모든 파일들(자바스크립트(js) 파일과 스타일(css) 파일)을 업로드 (블로그 관리 - 스킨 - Html/css 편집에서 파일업로드 클릭하여 압축해제한 폴더의 파일들을 차례대로 선택 - 확인) 하여 티스토리 시스템에 추가합니다.
• 이제 사용하는 스킨의 skin.html 과 style.css 를 편집합니다. 편집 방법은 아래의 코드를 skin.html에 추가해줍니다. 태그 바로 위에 추가하면 됩니다.
• Syntax highlighter 기능을 사용합니다. 이제 html code를 티스토리 에디터에서도 htm 코드로 인식하지 않고, 텍스트 문장처럼 글 내용에 포함 시킬 수 있습니다.

Syntax highlighter 기능 사용법 1.<pre> tag 사용하는 방법

다음의 예시 처럼 <pre> 태그를 열고 닫으며 class엘리먼트를 추가해 줍니다. 이 때 엘리먼트 class의 "brush: 언어"에서 언어위치에 오는 단어에 따라 어떤 언어로 적용될지가 결정됩니다. 아래 예제에서는 코드를 html에서 작성했을때, java언어로 적용된 코드를 보여줍니다. (cpp, xml, js, java 등에 따라 각각 적용됩니다.)

<pre class="brush: java">

private void method(int flag)

{

}

</pre>  

다음의 예시 처럼 <pre> 태그를 열고 닫으며 class엘리먼트를 추가해 줍니다. 이 때 엘리먼트 class의 "brush: language"에서 언어(language)위치에 오는 단어에 따라 어떤 언어로 적용될지가 결정됩니다. 아래 예제에서는 코드를 html에서 작성했을때, java언어로 적용된 코드를 보여주는 예입니다. (cpp, xml, js, java 등에 따라 각각 적용됩니다.)

적용예

다음은 자바스크립트 소스코드를 입력하여 확인한 예입니다. 시도하고 처음으로 성공한 예입니다. 인증샷 - 이랄까? -> 젠장 작동이 안됨 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

이거 생각보다 매우 어렵습니다. 초보자는 시작 안하는게 나을듯 합니다.