서브라임 텍스트 3 (Sublime Text 3) 설치 및 기본 설정
지난 포스팅의 내용에서 code를 표현할 때가 있었는데, 일반적인 텍스트 방식으로 표현하다 보니 가독성도 떨어지고 전문성이 없어보여서 오늘은 티스토리 블로그에 code를 멋지게 표현하는 방법에 대해 포스팅 해보려 합니다.
SyntaxHighlighter Download
파일을 다운로드 하기 위해 아래의 주소에 접속합니다.
URL: http://alexgorbatchev.com/SyntaxHighlighter/download/
위의 URL에 접속하여 위의 사진에서 표시된 빨간색 체크 박스인 'Click here to download'를 클릭합니다. 다운받은 파일을 압축 해제하면 여러 파일들이 나오는데 이 중 'scripts'와 'styles' 파일을 티스토리에 업로드 합니다.
티스토리 블로그에 File upload
티스토리 블로그에 로그인 한 뒤, 관리자 모드로 들어가서 '꾸미기' 카테고리에 있는 'HTML/CSS편집' 메뉴로 이동합니다.
'파일업로드' 탭을 선택하여 '추가'를 클릭합니다. 그리고 난 뒤, 위에서 말했던 'scripts'와 'styles'의 폴더 안에 있는 파일을 전부 업로드 합니다. 제가 업로드 해본 결과, 'scripts' 폴더 안에는 28개의 파일이 있고 'styles'의 폴더 안에는 17개의 파일이 있었으니 참고하시기 바랍니다.
스킨에 적용하기
파일을 업로드 했으니 이 업로드한 파일을 스킨에 적용해야 합니다.
아까와 마찬가지로 'html/css편집' 카테고리에 들어가 'html' 탭으로 이동합니다. '<head>'와 '</head>' 태그 사이에 아래의 소스코드를 입력합니다. 편하게 </head> 태그를 찾으셔서 그 바로 위에 입력하시면 됩니다.
저는 Defualt 테마가 아닌 Emacs 테마를 적용하고 싶어서 shCore.css와 shThemeDefault.css 파일명을 shCoreEmacs.css와 shThemeEmacs.css로 변경하여 입력하였습니다. 따로 파일을 다운로드 받을 필요 없이 파일명만 변경하면 테마 적용이 가능합니다. 필자와 같은 테마를 적용하고 싶으신 분들은 같은 위치에 위의 code가 아닌 아래의 code를 복사해서 붙여넣기 하시면 되겠습니다.
<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>
아래는 Script를 입력한 화면입니다.
<head>, <html>, <body>와 같은 태그들은 출력이 제대로 이루어지지 않을 수도 있습니다. 그럴 경우엔 부등호 >, < 대신에 >와 <로 html 입력창에서 입력하면 됩니다.
gt는 greater than의 약자로, '~보다 크다'의 의미를 가지고 있으며 >의 부등호를 나타내는 코드입니다.
lt는 less than의 약자로, '~보다 작다'의 의미를 가지고 있으며 <의 부등호를 나타내는 코드입니다.
예제) <body>의 태그를 입력하고자 하였을 때, <body>
SyntaxHighlighter를 이용하여 Code 표현
티스토리 포스팅 화면에서 HTML을 체크하면 HTML 입력화면으로 이동하게 됩니다.
형식은 이렇습니다.
<pre class="brush:브러시이름">
소스코드 입력
</pre>
예제)
<pre class="brush:html">
<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>
</pre>
Emacs 테마로 적용된 소스코드를 표현한 것은 아래와 같습니다.
'Code.D IT 강좌 > ETC' 카테고리의 다른 글
| Apache 설치 및 기본 설정 (0) | 2017.03.12 |
|---|---|
| [웹 어플리케이션] 클라이언트 서버 모델 개념 및 원리 (0) | 2017.03.08 |
| 서브라임 텍스트 3(Sublime Text 3) 설치 및 기본 설정 (0) | 2017.03.01 |
| 소스코드 에디터 선택, 서브라임 텍스트 3 (0) | 2017.02.19 |
| 왜 반응형 웹인가? (2) | 2017.02.18 |
