태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

Code Highlighter를 tistory(티스토리)에 적용하기

블로그운영/tistory|2014.03.12 08:45

Code Highlighter를 tistory(티스토리)에 적용하기

1. Code highlighter란?

인터넷을 하다보면 소스코드를 IDE환경처럼 깔끔하게 보여주는 페이지들을 흔하게 찾아 볼 수 있다. 앞으로 C언어 관련 내용이나 css관련 내용을 블로깅할 때 이것을 활용해야 겠다는 생각이 들어 한번 찾아 보았다. 이미 많은 사람들이 사용법을 올려놓았기 때문에 어렵지 않게 설치하고 사용할 수 있었다. 아래는 code highlighter 적용 전/후 모습이다. 단순한 텍트스보다 훨씬 가독성을 올려준다.

적용 후 

적용 전

 function helloSyntaxHighlighter()
{
return "hi!";
}

정식 명칭은 SyntaxHighlighter이다. 관련내용을 검색하기위해 code highlighter를 사용했었는데 정식명칭은 아닌가부다? 아님뭐 history가 있거나. 어쨌뜬 이곳에 가면 상세한 정보가 나와있다.

2.  Code highlighter  다운로드

먼서 SyntaxHighlighter를 다운받는다. 

링크를 클릭하면  위와 같은 페이지가 뜰 것이다. 간단히 Click here to download를 클릭하면 된다.


3.  Code highlighter 설치(업로드)

압축 파일을 해제하면 아래와 같은 내용이 들어 있을 것이다. 여기서 사용할 것은 styles와 scripts폴더에 있는 파일들이다. 

이 파일들을 tistory에 upload하여야 글작성시에 code highlighter를 적용시킬 수가 있다. 업로드하는 방법은 '관리자->HTML/CSS 편집->파일 업로드'를 선택하면 된다. 아래 그림에서 추가 버튼을 누른 면 css와 js를 tistory의 images폴더로 업로드 할 수 있다. 글 작성시 사용할 언어만 골라서 업로드 하여도 상관없을 듯 하다.


4.  Code highlighter 적용

이제 아까 올린 파일들을 이용하여 tistory에 설정해줘야 한다. 설정은 크게 js를 로딩시켜주는 부분과 js의 start(!?)함수를 실행 시켜주는 것을 나눌 수 있다.

먼저 .js파일들을 tistory가 로딩할 수 있도록 HTML에 추가시켜주는 내용이다. 방법은 '관리자->HTML/CSS 편집'의 아래에 부분에서 skin.html에서 </head>태그 앞 부분에 아래의 내용을 복사/붙여넣기 하면 된다.

다음에 할일은 dp.SyntaxHighlighter.HighlightAll('code'); 함수를 호출해주는 일이다. 이 함수의 역할은 name이 'code'인 태그를 찾아서 해당 CSS를 적용하려의 것 같다. 만약 <pre>태그를 이용하여 code highlighter를 사용할 것이라면 해당 한수를 호출해주지 않아도 되지만, <textarea>태그를 사용할 것이라면 이 함수를 호출해줘야한다. 나중에 사용해보면 알겠지만, <pre>태그를 사용해서 code highlighter를 사용한 것은 불편하다. 예를 들어 글 작성시 안보인다는 등.... 암튼 <textarea>태그를 사용 할 것을 추천한다.
함수를 호출하는 방법은 여러가지가 있겠지만, body의 Onload 이벤트에 연결하여 사용하는 방식으로 해보자. 뱅법은 <body>태그를 찾아서 아래와 같이 수정해주면 된다. 
<body Onload="dp.SyntaxHighlighter.HighlightAll('code');"> 이렇게 수정하면 

5.  Code highlighter 사용

이제 code highlighter를 사용할 모든 준비가 끝났다. 실제로 글 작서이 사용하는 방법을 설명하겠다. 먼저 <pre>태그 방법은 아래와 같다.

다음은 <textarea>태그 방법이다.

앞에서도 말했지만, <textarea> 태그를 사용하는 방법이 글 작성시 더 편리하다.

이상 끝!




댓글(1)
  1. 문돌이 2014.03.13 13:55 신고 댓글주소  수정/삭제  댓글쓰기

    좋은 내용 잘 보고 갑니다.

티스토리 툴바