티스토리 뷰

블로그운영/tistory

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

uthline 2014. 3. 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> 태그를 사용하는 방법이 글 작성시 더 편리하다.

이상 끝!




반응형

'블로그운영 > tistory' 카테고리의 다른 글

권한이 없거나 존재하지 않는 페이지입니다.  (0) 2023.07.06
TISTORY에 구글 지도 삽입하기  (0) 2018.03.01
sitemap  (0) 2018.02.02
티스토리(tistory)에서 자바스크립트 함수 호출 - 예제글  (0) 2014.04.03
티스토리(tistory) 글에서 자바스크립트 함수 호출동작  (0) 2014.04.03
서식작성(HTML, CSS)  (0) 2014.03.12
반응형
02-09 01:53
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
링크
TAG more
글 보관함