블로그에 소스코드를 올리는 두 번째 방법을 소개합니다.
이번에는 SyntaxHighlighter 를 다운받아서 HTML/CSS 를 수정하는 방법을 이용해 보도록 하겠습니다.
1. 아래의 링크를 통해서 SyntaxHighlighter 페이지를 방문해서 다운로드 받습니다.
(현재 최신 버전은 3.0.83 입니다.)
http://alexgorbatchev.com/SyntaxHighlighter/download/
Click here to download 를 클릭합니다.
저장 버튼을 클릭해서 원하는 위치에 파일을 다운로드 받습니다.
2. 다운로드 받은 zip 파일의 압축을 풉니다.
여러가지 폴더가 보여지는데요.
이중에서 사용할 폴더는 scripts 와 styles 입니다.
scripts 는 지원할 언어에 대한 파일들을, styles 은 적용할 스타일 정보에 대한 파일들을 포함하고 있습니다.
scripts : shCore.js
styles : shCore.css, shThemeDefault.css
필수 파일(3가지) 를 포함해서 사용할 언어를 위해서 필요한 js 파일을 위의 화면을 참고하여 scripts 폴더에서 확인합니다.
3. 관리자 메뉴로 들어갑니다.
좌측 사이드 > 꾸미기 > HTML/CSS 편집을 클릭합니다.
파일업로드 탭에서 추가 버튼을 클릭하여
(압축을 푼 폴더에서) 위에서 선택했던 파일들을 모두 업로드 합니다.
4. HTML/CSS 탭에서 skin.html 파일을 수정합니다.
Ctrl + F 를 눌러서 skin.html 영역에서 </head> 를 검색하여
</head> 위의 부분에 다음과 같이 입력합니다.
<link href="./images/shCore.css" rel="stylesheet" type="text/css">
<link href="./images/shThemeDefault.css" rel="stylesheet" type="text/css">
Ctrl + F 를 눌러서 skin.html 영역에서 </body> 를 검색하여
</body> 위의 부분에 다음과 같이 입력합니다.
(압축을 푼 폴더에서) 위에서 선택했던 파일들을 모두 입력합니다.
<script src="./images/shCore.js" type="text/javascript"></script>
<script src="./images/shBrushCpp.js" type="text/javascript"></script>
<script src="./images/shBrushJava.js" type="text/javascript"></script>
<script src="./images/shBrushJScript.js" type="text/javascript"></script>
<script src="./images/shBrushPlain.js" type="text/javascript"></script>
<script src="./images/shBrushSql.js" type="text/javascript"></script>
<script src="./images/shBrushXml.js" type="text/javascript"></script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
소스코드.txt(포스트는 복사가 금지되어 있으므로, 소스코드를 다운받아서 사용해주세요)
5. 글쓰기 에디터에서 좌측에 HTML 항목을 체크한 후에, 본문에서 다음과 같이 사용합니다.
(아래의 java 는 원하는 언어로 변경하시면 됩니다.)
소스코드
</pre>
6. 이제 작성된 글에서 스타일이 적용된 형태의 소스코드를 확인하실 수 있습니다.
복잡한 듯 보이지만 1 ~ 4번은 한번만 수행해 주시면 되는 작업입니다.
지난번에 포스팅한 color scripter 와 함께 유용하게 사용하시길 바랍니다.
블로그에 소스코드 올리기 - Color Scripter
'블로그 관리' 카테고리의 다른 글
| 티스토리 블로그 RSS FEED 확인 (0) | 2015.02.28 |
|---|---|
| 티스토리 초대장 없이 가입하는 방법 (0) | 2015.02.28 |
| 블로그에 소스코드 올리기 - Color Scripter (0) | 2015.02.25 |
| 마우스 드래그, 우클릭(복사) 금지하기 (6) | 2015.02.24 |
| 티스토리 카테고리 펼치기 (0) | 2015.02.24 |
