티스토리에 아래와 같이 예쁘게 소스 코드 입력하는 방법 알려드릴게요!
1. SyntaxHighlighter 홈페이지에서 필요한 파일을 다운로드
현재 홈페이지 연결하면 v4를 다운받을 수 있게 되어있네요.
http://alexgorbatchev.com/SyntaxHighlighter/
저는 3.0.83 기준으로 설명하겠습니다.
syntaxhighlighter_3.0.83.zip다운받으신 파일 압축을 풀면 아래와 같아요.
2. 티스토리에 파일 업로드
관리자 > 스킨편집 > HTML편집 > 파일업로드
압축해제한 폴더 중 scripts, styles 폴더 내에 있는 파일을 모두 업로드 합니다.
3. HTML편집 HEAD에 업로드한 파일 입력하기
HTML편집을 눌러 <head></head> 사이에 아래 내용을 추가합니다.
<!--SyntaxHighlighter Styles -->
<link type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css">
<link type="text/css" rel="stylesheet" href="./images/shCoreDefault.css">
<link type="text/css" rel="stylesheet" href="./images/shCoreDjango.css">
<link type="text/css" rel="stylesheet" href="./images/shCoreEclipse.css">
<link type="text/css" rel="stylesheet" href="./images/shCoreEmacs.css">
<link type="text/css" rel="stylesheet" href="./images/shCoreFadeToGrey.css">
<link type="text/css" rel="stylesheet" href="./images/shCoreMDUltra.css">
<link type="text/css" rel="stylesheet" href="./images/shCoreMidnight.css">
<link type="text/css" rel="stylesheet" href="./images/shCoreRDark.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeDjango.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeEclipse.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeEmacs.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeFadeToGrey.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeMDUltra.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeMidnight.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeRDark.css">
<!--SyntaxHighlighter Core -->
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript" src="./images/shBrushAppleScript.js"></script>
<script type="text/javascript" src="./images/shBrushAS3.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushColdFusion.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/shBrushErlang.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/shBrushJavaFx.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPerl.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/shBrushPowerShell.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/shBrushSass.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>
<script type="text/javascript">
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();
</script>
4. 글 작성 시 소스 코드를 아래 템플릿 안에 작성합니다.
<pre class="brush: javascript" auto-links:true="">
</pre>
그러면 아래와 같이 정렬된 모습의 소스 코드를 볼 수 있습니다.
class에 brush: javascript라고 써있는 부분에 아래 표에서 맞는 언어를 넣어주시면 변경 가능합니다.
'이것저것 > 정보정보' 카테고리의 다른 글
| [IT정보] 웹마스터도구에 등록하기 위한 사이트맵 만들기 (0) | 2018.04.18 |
|---|---|
| [IT정보] 이미지파일을 ico로 변환(favicon 만들기) (0) | 2018.04.13 |
| [IT정보] 클릭몬 - 블로그에 광고 넣기 (0) | 2018.04.13 |
| [IT정보] 티스토리에 유투브 동영상 넣는 방법 (0) | 2018.04.12 |
| [생활정보] 2018년 연봉 실수령액 표 (0) | 2018.04.06 |
