코드 예쁘게 넣기, Tistory에서 syntaxhighlighter 설치/적용/사용법

하는 일이 하는 일인지라 구글에서 코드를 찾아 블로그를 다닐 때가 많다. 그러다가 예전에도 어디서 본듯하긴한데 소스를 이쁘게 정리해주는 소스 입력기? 소스 편집기? 코드 입력기?? 뭐 이런 걸 발견했다.

바로 Syntax Highlighter

이름을 몰라서 한참을 찾았었는데 구글링의 힘으로 찾아서 설치/적용 방법을 알게되었다. 차근 차근 따라해보자.

1. Syntax Highlighter Download

http://alexgorbatchev.com/SyntaxHighlighter/download

다운로드는 의외로 간단하다. Syntax Highlighter 공식 홈페이지에서 다운로드 받을 수 있다. 위 링크를 클릭하면 큼지막 하게 Click Here to Download. 라고 씌여있다.

이 제작자분께서 강력하게 Donate를 원하는 것 같으니 죽어가는 개발자를 위해 Paypal로 돈을 보내줄수도 있겠다.

2. 파일 업로드

압축 폴더를 풀면 다음과 같은 폴더들이 나온다.

이 중 우리가 업로드 할건 scripts 폴더와 styles 폴더이다. 내용은 아래 그림과 같다.

필요한 것만 올려도 상관 없으나 용량이 부족하지 않은이상 큰 문제가 없으니 모두 업로드하자.

Tistory 관리 >> HTML/CSS 편집 >> 파일 업로드 >> 추가 버튼을 차례로 눌러서 모두 업로드

그럼 업로드가 완료된다.

3. HTML 수정하기

각 단계의 코드는 아래 텍스트 파일을 받아서 복붙합니다!

여러분이 제일 귀찮아하는 나~~도 귀찮은~~ HTML 손보기는 의외로 간단하다

Tistory 관리 >> HTML/CSS 편집에 다시 들어가 CTRL + F 로 </head>를 찾는다.

찾고나서 </head> 바로 위에 다음 태그를 삽입해준다.(복붙)

아직 끝난게 아니다. 범용성을 늘리기 위해 우리는 textarea 태그를 이용할 것이므로 추가 수정이 필요하다.

다시 CTRL + F로 <body>를 찾아주자.

찾았다면 <body>를 다음과 같이 덮어씌운다(바꾼다).

그렇다면 HTML 수정이 완료된다. 이제 사용법만 알면 된다. ~~참 쉽죠?~~

4. Syntax Highlighter 적용법

원래 Syntax Highlighter 적용법에는 크게 두가지가 있다. <pre> 태그 이용법과 <textarea> 태그 이용법, 하지만 <pre>태그를 이용하게 되면 html태그 코드를 사용할 때 많이 많이 불편하게 되므로 <textarea>태그를 이용하자.

간단하다. 글 작성할 때 코드를 쓰게된다면 먼저, HTML에티터 타입으로 변경한다.

그리고 나서 다음과 같이 입력해준다.

5. 예시 및 다양한 변형

만약 c++ 코드를 입력하고 싶다면? 다음과 같이 입력하면 된다. col이나 width는 중요하지 않다.

사용할 언어 목록은 다음과 같다.

나머지 자세한 사항은 홈페이지에 가면 나와있다.

이 글이 도움이 되셨다면 아래 버튼을 눌러주세요. 로그인이 필요 없습니다.

공감은 큰 힘이 됩니다.

티스토리툴바