몇일전 highlighter를 설치한다고 삽질 중이라는 포스트를 올린적이 있었답니다.
[일상의 얘기/주절주절] - Syntax highlighter를 설치 해본다고 삽질 중!!
어쩌다 한번씩 블로그 꾸미기에 관련된 tip을 올리곤 하는데요.
티스토리 블로그의 관리모드에서 skin.html 과 style.css의 소스를 바꾸거나 붙여넣어야 할 경우
본문에 필요한 소스를 적어놓게 되는데 이게 의도하는 그대로 보여지면 괜찮은데..
간혹 소스에서 중요한 부분이 누락되서 제대로 안보이는 경우가 발생하죠.
특히나 치환자의 경우에는 백프롭니다..
그래서 많은 분들이 소스가 담긴 텍스트파일을 업로드 하거나(저도 하다하다 이 방법을 썼더랬죠)
소스의 내용을 그대로 보여줄 수 있는 highlighter를 설치하거나... 대부분 둘 중에 한가지 방법을 쓰시죠.
그래서 저도 설치를 해보려 했던 것입니다.
버전 종류별로 설치도 해봤습니다. 완전 머리 아프더군요..
1.5, 2.0, 2.1, 3.0 등등........
최근에 사용되는 버전이 3.0이더군요. 뒤에 더 붙긴하지만 간단하게 3.0이라고 하겠습니다.
전 이중에 2.0(2.0.296) 버전을 설치해서 사용중입니다. 왜 굳이 최신버전이 아닌 구 버전을 사용하는지는 마지막에 말씀드리구요.
그럼 어떻게 설치를 하는지 설명을 해 보겠습니다.
여러 곳의 설치정보를 보며 돌아다녔지만 제대로 정보를 얻은 곳은 여기입니다.
티스토리에 Syntax Highlighter 2.0 적용하는 방법
링크를 따라가시면 더 많은 정보를 얻을 수 있습니다.
3D 입체 태그구름도 이 블로거(BLUEnLIVE)님의 작품이 아닌가 싶더군요.
저는 간단하게 필요한 부분만 설명을 드리겠습니다. 우선 아래 압축파일을 다운 받으시고 모든 파일을 관리모드에서 업로드 하세요~
highlighter 2.0.zip그리고 아래의 소스를 skin.html의 <head>와 </head>의 사이에.. 되도록이면 </head>의 바로 앞부분에 추가 해주세요.
아래 소스 창의 오른쪽 상단 첫번째 아이콘(view source)를 클릭하시고 새창에서 소스를 복사하시면 됩니다.
그리고 중요한 사용 방법
위의 BLUEnLIVE님이 설명한대로 하자면
설명하고자 하는 소스 내용
또 다른 방법으로 이렇게 할 수도 있습니다.
설명하고자 하는 소스 내용
위의 두가지 중 한가지의 방법으로 사용하실 수 있구요.
중요한 내용을 한가지 말씀드리자면 계속 언급했던 치환자는 그대로 쓰시면 역시나 표시가 안됩니다.
8행, 9행, 10행, 12행에 있는게 치환자인데 안보이죠? Recent Trackbacks
8행, 9행, 10행, 12행에 있는게 치환자. 이건 잘 보이시죠? Recent Trackbacks
두개는 트랙백 풀다운 모듈소스로 같은 내용을 나열한 것인데요.
첫번째 소스에서는 치환자가 다 빠졌는데 그 아래 소스에서는 치환자가 그대로 보이시죠?
치환자는 소스를 보이게 하려면 약간의 변화를 주셔야 한답니다.
<s_rcttb_rep> 왼쪽 꺽은괄호(<) 대신에 (& lt;) &다음에 공백 제거하세요. 꺽은괄호로 표시가 되길래 공백추가한거에요. [\##_rcttb_rep_link_##] 왼쪽 대괄호([)와 #사이에 (\)
좀 이해가 되시나요?
몇번의 시행착오를 거듭한 끝에 알아낸거랍니다.
설치를 하고 사용하기도 좀 번거로운게 사실입니다. 그치만 제가 필요한 소스를 구하면서 빠진소스 채워넣으랴, 틀린 소스 고치느라 고생한거 생각하면 다른 분들은 저같이 고생 안하시길 바라는 마음으로 포스팅을 해봅니다.
마지막으로 최신버전과 제가 사용하는 버전의 다른점은
인터페이스는 약간의 차이밖에 없는 반면 소스를 퍼가는 방법의 차이가 있답니다.
2.1 이하버전
- view source 아이콘을 클릭하여 뜨는 새창에서 소스를 깔끔하게 복사(소스 정렬형태 그대로 유지됨)
- copy to clipboard 아이콘을 클릭하여 소스복사(소스 정렬형태 무시 - 가로로 길게 나열됨)
3.0 버전
마우스로 소스를 드래그해서 복사하는 방법 뿐(소스 정렬형태 무시 - 가로로 길게 나열됨)
이런 차이가 있답니다.
도움이 되시길 바라면서........ 끝!!!
** 내용추가
- 댓글로 3.0버전에도 view source 아이콘을 표시할 수 있다고 의견 주셨습니다.
아이콘 추가 방법까지 확인 후 방법을 써 보겠습니다.(위의 내용을 수정하면 댓글이 뜬금없게 되니 수정하지 않고 놔두겠습니다.)
