SyntaxHighlighter을 사용하여 티스토리에서 소스 코드를 보기 쉽게 삽입하는 방법.
SyntaxHighlighter을 사용하여 티스토리에서 소스 코드를 보기 쉽게 삽입하는 방법.
1. SyntaxHighlighter 설치
http://alexgorbatchev.com/SyntaxHighlighter/download/
위 링크에서 Click here to download 을 클릭하여 다운받고 압축을 해제한다.
2. 티스토리에 파일 업로드
다운받은 폴더 내의 script 폴더와 style 폴더의 모든 파일들을 업로드한다.
방법 : 티스토리 관리 페이지 -> 꾸미기의 HTML/CSS 편집 -> 파일업로드 -> 추가
3. HTML/CSS 편집
1) skin.html의 내용 중 </head> 위에 아래의 코드를 추가한다.
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushDelphi.js"></script>
<script type="text/javascript" src="./images/shBrushDiff.js"></script>
<script type="text/javascript" src="./images/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.js"></script>
<script type="text/javascript" src="./images/shBrushScala.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushVb.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css">
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
2) <body>
<body> 를 검색해서 <body Onload="dp.SyntaxHighlighter.HighlightAll('code');"> 로 수정한다.
3) style.css 편집
style.css에 아래의 코드를 삽입한다.
div .syntaxhighlighter {
overflow-y: hidden!important; overflow-x: auto!important;
}
4. 본문에서 SyntaxHighlighter를 사용하는 방법 두가지.
HTML 에디터 타입으로 변경 후에 아래와 같이 작성하면 SyntaxHighlighter가 적용된다.
원하는 소스 코드에 따라서 'brush:' 옆에 'java'(자바)‘js'(자바스크립트) ‘cpp'(C++)등을 입력한다.
1. <pre> 태그 이용
<pre class= "brush: java;”>
소스 코드
</pre>
2. <textarea> 태그 이용
<textarea name="code" class="brush:java;">
소스 코드
</textarea>
'Info' 카테고리의 다른 글
| 티스토리에 배경음악(BGM) 삽입 (0) | 2015.08.16 |
|---|---|
| 엑셀 셀 안에 PDF 등의 파일 삽입하는 방법.(링크 형식X, 아이콘모양) (0) | 2014.06.11 |