블로그꾸미기 #2 소스코드 깔끔하게 포스팅하는 방법 (SyntaxHighlighter)
by jennysgapSyntaxHighlighter
포스팅을 하다 보면 소스코드를 공유할 때가 많은데,
코드를 그대로 복사하면 주석이랑 실제 본문이랑 구분이 안가 눈에 잘 안 들어오고
코드가 길면 그림으로 캡쳐해서 올리게 되니 사용하려면 타이핑해야 하는 불편한 점이 있었다.
다른 블로그를 살펴보니 소스코드를 작성할 때 SyntaxHighlighter를 사용한다는 것을 알게되었다.
SyntaxHighlighter 플러그인을 이용해서 소스코드를 깔끔하게 올려보자!!
▼ SyntaxHighlighter 홈페이지
http://alexgorbatchev.com/SyntaxHighlighter/
SyntaxHighlighter 설치하는 방법
1. 티스토리에 SyntaxHighlighter 소스파일을 업로드한다.
2. 티스토리 HTML 소스코드를 수정한다.
3. 포스팅할 때 SyntaxHighlighter 태그를 이용해서 작성한다.
1. 티스토리에 SyntaxHighlighter 소스파일을 업로드
티스토리 관리페이지에서 [ HTML/CSS 편집 ]을 클릭한다.
파일업로드 항목으로가서 [ 추가+ ] 버튼을 누른다.
SyntaxHighlighter 알집을 풀면 아래와 같은 파일들을 확인할 수 있는데, 그 중 script와 styles 폴더만 업로드 한다.
2. 티스토리 HTML 소스코드 수정
HTML 항목을 클릭하고 [ Ctrl + F ]를 눌러 </head>를 검색한다.
※ 검색 결과 1개만 출력됨
</head> 바로 위에 코드를 붙여넣는다. 그리고 <body> 태그도 수정하고 저장한다.
</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 rel="stylesheet" type="text/css" href="./images/shCore.css">
<link rel="stylesheet" type="text/css" href="./images/shThemeDefault.css">
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
<body> 코드
<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">
3. 포스팅할 때 SyntaxHighlighter 태그를 이용
코드에 SyntaxHighlighter 를 적용하려면 일반글작성모드가 아닌 HTML 편집모드에서 작성해야 한다.
적용하는 방법은 2가지가 있다.
1. pre 태그를 사용하는 경우
범용성이 좋지만 HTML 코드를 작성할 때는 '<' 이것을 '<'로 바꿔져야하는 불편함이 있다.
<pre class="brush: 언어이름;"> /* 코드 입력 */ </pre>
2. script 태그를 사용하는 경우
brush로 적용 가능한 언어 목록
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
Default 가 아닌 Emacs 테마 적용하기
아래 코드는 Defualt 테마 설정이다.
<link type="text/css" rel="stylesheet" href="./images/shCore.css"> <link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css"> <script type="text/javascript">
테마를 바꾸기 위해서는 파일 다운로드할 필요 없이
shCoreEmacs.css / shThemeEmacs.css 로 파일명만 수정하면 테마 적용이 가능하다.
<link type="text/css" rel="stylesheet" href="./images/shCoreEmacs.css"> <link type="text/css" rel="stylesheet" href="./images/shThemeEmacs.css"> <script type="text/javascript">
'끄적끄적 > 블로그꾸미기' 카테고리의 다른 글
| [블로그관리] 네이버 웹마스터도구에 검색등록/RSS/사이트맵 제출 (0) | 2018.04.26 |
|---|---|
| 티스토리 스킨 CCZ-CROSS로 적용! (0) | 2018.03.02 |
| 블로그꾸미기 #4 티스토리 마우스 우클릭 금지 (0) | 2017.12.22 |
| 블로그꾸미기 #3 드래그 색상 변경 (0) | 2017.12.21 |
| 블로그꾸미기 #1 티스토리 스킨 적용하는 방법 (0) | 2017.12.21 |
블로그의 정보
jennysgap
jennysgap