ETC/Tip
Syntax Highlighter :: 티스토리에서 코드 이쁘게 넣기VallistA2015. 5. 18. 17:44
프로그래밍 관련한 블로그에서는 코드를 복사하기 쉽게, 혹은 코드를 잘 보여주기 위해서 다른 툴을 사용해서 표출해주어야 하는데 그때 필요한 것이 바로 Syntax Highlighter 이다.
그래서 이러한 기능을 사용하는 방법을 알려주기 위해서 글을 쓴다.
1. Syntax Highlighter 다운로드
Syntax Highlighter는 무료다.
그리고 아무대서나 가져와서 쓸 수 있으며, 상업적 용도는 모르겠지만 비상업적 용도에 대해서는 무료를 지원하여 많은 곳에서 이 기능을 사용한다.
http://alexgorbatchev.com/SyntaxHighlighter/download
이 링크로 가서, 다운로드를 받으면 된다. 최신 버전을 받아주고 자기가 알기 쉬운 위치에 저장하도록 하자.
물론 이러한 것을 무료로 사용할 수 있으니 개발자에게 경의를 표하고자 돈을 얼마정도 보내주도록 하자. (필자는 10000원 보냄)
2. 티스토리에 설정방법
먼저 다운 받으면 이러한 파일과 폴더로 이루어져 있을것이다.
이중에 우리가 봐야할 폴더는 Scripts 와 Styles 이다.
이 두개 폴더 내부의 파일들 전부를 넣어주어야 한다.
Scripts 파일
- 사용할 언어를 지정할 수 있는 js 파일들이다.
Styles 파일
- 스킨을 지정하는 css파일들 이다.
폴더 안에 있는 모든 파일들을 자신의 티스토리 관리안의 파일 업로드로 가서 업로드 하도록 하자.
저기서 추가를 누른후 파일을 전부 업로드 해주자.
시간이 좀 걸린다.
3. HTML 에서 사용할 수 있도록 수정해주기
이 소스코드를 복사해서 탐색으로 </body> 찾은후 그 위에다 붙여넣기를 한다.
그 다음 <body>를 찾는다.
<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">
<body>를 이걸로 바꿔준다.
4. 사용법 예시
<textarea name="code" class="brush:cpp;">
사이의 원하는 코드
</textarea>
C++ 으로 하고 싶으면 이렇게 해주면 된다.
'ETC > Tip' 카테고리의 다른 글
| Tip :: 객체지향의 원칙 (0) | 2015.07.10 |
|---|---|
| Tip :: 게임의 데이터 관련 이슈 (6) | 2015.06.02 |
| Tip :: What is the Reflection? (리플렉션 이란?) (0) | 2015.05.28 |
| Tip :: "Authorise your app now" enabled popup (지금 앱 승인 팝업이 안보임) (2) | 2015.04.01 |
| Visual Studio 2013 ; (세미콜론) 시 자동 줄 변경 해제 (1) | 2014.08.25 |
댓글
VallistA
병특이 끝나서 게임에서 웹으로 스위칭한 프로그래머.
프로그래밍 정보등을 공유합니다.
현재는 이 블로그를 운영하지 않습니다.
vallista.kr 로 와주시면 감사하겠습니다!
자고 싶습니다. ㅠㅠ
Github :: 링크
궁금한점 문의 주시면 답변드리도록 하겠습니다
VISITED
Today :
Total :
SNS
Lately Post
Lately Comment
