반응형
얼마전 블로그에 올린 글(기본적인 Javadoc 사용하기)에 소스코드를 첨부할 일이 있었다. 아래와 같이 소스코드를 소스코드 같이 나타내고 싶어서 검색을 해보니 방법이 있었다. ㅋㅋㅋ
Step1. Syntaxhighlighter 다운 받기
블로그에 소스 코드를 소스 코드 답게 나타내기 위해서 아래 주소에서 Syntaxhighlighter를 다운 받는다.
※자세한 설명은 아래 주소에 나와있다.
http://en.wikipedia.org/wiki/Syntax_highlighting
필자는 최신 버전인 syntaxhighlighter_3.0.83 을 다운 받았다.
다운 받은 후 압축을 푼다.
Step2. 티스토리 블로그에 업로드 하기
블로그에 적용하기 위해서 티스토리 관리화면에서
파일 업로드에서 파일업로드를 선택한 다음 Scripts 폴더와 Styles 폴더 모두 선택해 업로드 해준다. (필요한 파일들만 업로드 해도 된다.)
Step3. 티스토리 블로그에 적용하기
다음 파일 업로드 옆에 HTML/CSS 편집 메뉴를 선택하고, 아래와 같이 skin.html 을 편집한다.
</head> 태그 바로 위에 아래와 같이 적는다.
이때 Styles 폴더에 있는 다른 css 파일로 변경하면 자신이 원하는 스타일에 따라서 변경 할 수 있다.
예를들어 Eclipse 스타일을 원한다면 ShCoreDefault.css 부분을 shCoreEclipse.css 로 바꿔주면 된다.
다음으로 </body> 태그 바로 위에 아래와 같이 적는다.
소스코드는 아래 첨부파일에 있다.
여기 까지 되면 이제 모든 준비가 끝났다. 이제 사용하면 된다.
Step4. 티스토리 블로그에 소스코드 삽입하기
적용하는 방법은 간단한다. 글쓰기에서 HTML을 선택해서 HTML 편집 모드로 들어간 다음 아래와 같이 <pre class="brush: html> 과 </pre> 사이에 넣고싶은 코드를 자유롭게 넣으면 된다.
SyntaxHighlighter를 이용해서 여러가지 소스코드를 언어에 맞게 표현 가능하다. 아래는 지원가능한 언어 목록이다.
Step1. Syntaxhighlighter 다운 받기
블로그에 소스 코드를 소스 코드 답게 나타내기 위해서 아래 주소에서 Syntaxhighlighter를 다운 받는다.
※자세한 설명은 아래 주소에 나와있다.
http://en.wikipedia.org/wiki/Syntax_highlighting
필자는 최신 버전인 syntaxhighlighter_3.0.83 을 다운 받았다.
syntaxhighlighter_3.0.83.zip다운 받은 후 압축을 푼다.
Step2. 티스토리 블로그에 업로드 하기
블로그에 적용하기 위해서 티스토리 관리화면에서
스킨 → HTML/CSS 편집 선택 → 파일 업로드 선택
파일 업로드에서 파일업로드를 선택한 다음 Scripts 폴더와 Styles 폴더 모두 선택해 업로드 해준다. (필요한 파일들만 업로드 해도 된다.)
Step3. 티스토리 블로그에 적용하기
다음 파일 업로드 옆에 HTML/CSS 편집 메뉴를 선택하고, 아래와 같이 skin.html 을 편집한다.
</head> 태그 바로 위에 아래와 같이 적는다.
이때 Styles 폴더에 있는 다른 css 파일로 변경하면 자신이 원하는 스타일에 따라서 변경 할 수 있다.
예를들어 Eclipse 스타일을 원한다면 ShCoreDefault.css 부분을 shCoreEclipse.css 로 바꿔주면 된다.
다음으로 </body> 태그 바로 위에 아래와 같이 적는다.
소스코드는 아래 첨부파일에 있다.
SyntaxHighlighter_tistory.txt여기 까지 되면 이제 모든 준비가 끝났다. 이제 사용하면 된다.
Step4. 티스토리 블로그에 소스코드 삽입하기
적용하는 방법은 간단한다. 글쓰기에서 HTML을 선택해서 HTML 편집 모드로 들어간 다음 아래와 같이 <pre class="brush: html> 과 </pre> 사이에 넣고싶은 코드를 자유롭게 넣으면 된다.
SyntaxHighlighter를 이용해서 여러가지 소스코드를 언어에 맞게 표현 가능하다. 아래는 지원가능한 언어 목록이다.
자! 이제 멋지게 소스코드를 넣을 수 있다.
원문주소> http://saoa.tistory.com/entry/티스토리-블로그에-소스코드-넣기-넣기