2014. 5. 26. 13:37ㆍ2018년 이전 관심사/개발환경
티스토리에 Line Number가 있는 형태로 소스코드를 넣기 위해서는 Syntax Highlighter를 설치 해야 한다.
1. SyntaxHighlighter Download
http://alexgorbatchev.com/SyntaxHighlighter/download/
2. SyntaxHighlighter 설치
[관리자]-[HTML/CSS편집]-[파일업로드]-[추가]버튼 선택
추가 버튼 클릭 후, 조금 전에 다운로드 받은 SyntaxHighlighter 폴더 중, scripts와 styles 폴더 안에 있는 파일들을 티스토리 서버에 업로드 한다.
3. 티스토리 HTML/CSS 편집
skin.html의 내용 중, </head>를 검색 한 후, </head> 위에 아래 script 들을 추가 한다.
<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>
위 과정을 마친 후, <body>를 검색해서 아래와 같이 수정한다. 아래와 같이 수정하면 textarea 태그를 본문에서 사용 할 수 있다.
<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">
4. SyntaxHighlighter 사용 방법
SyntaxHighlighter를 사용하는 방법은 두가지가 있다.
1. <pre> 태그 이용
2. <textarea> 태그 이용
<pre> 태그는 일반적인 HTML 태그 코드와 중복되어 많이 불편하다. 때문에 <textarea> 태그를 사용하면 된다.
방법은 아래와 같다.
1. 글 작성 시, 소스 코드를 써야 하는 일이 생기면, HTML 에디터 타입으로 변경한다.
2. 변경 후 다음과 같이 입력하면 Syntax Highlighter가 적용 된다.
<textarea name="code" class="brush:cpp;">
void main
{
cout << "test"
}
</textarea>
'2018년 이전 관심사 > 개발환경' 카테고리의 다른 글
| vi에서 바이너리 파일을 헥사 모드로 보기 (0) | 2014.08.11 |
|---|---|
| 인민에어3(a34x) Linux mint 17 설치기 (0) | 2014.08.11 |
| 사용하지 않는 시리얼 포트 삭제 하기 (0) | 2014.04.10 |
| IpTime NAS2 SVN (0) | 2014.04.06 |
| Eclipse Plugin 삭제 방법 (0) | 2014.03.31 |