[블로그 꾸미기] 12. 코드 이쁘게 적용(Syntax Highlighter 적용)하기
많은 블로그 써칭을 하다보면 코드를 보기좋게, 이쁘게 표현해 놓은 블로그 들을 보았을 것이다.
매우 간단히 적용할 수 있다. SyntaxHighlighter 라는 라이브러리를 추가해 주면 된다.
syntaxhighlighter_3.0.83.zip
- </head>위에 다음의 코드를 삽입한다.
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shAutoloader.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" src="./images/shLegacy.js"></script>
<link type="text/css" rel="stylesheet" href="./images/shCoreDefault.css">
<script type="text/javascript"> SyntaxHighlighter.all(); </script>
- shCoreDefault.css 부분을 다른 파일명으로 바꿀 경우, 테마를 변경할 수 있다.
ex) shCoreEclipse.css, shCoreRDark.css 등등, 나와같은 경우는 shCoreEmacs.css 적용
▶ 4. 적용 방법
- <pre class="brush : 코드언어"></pre> 태그로 감싸주면 된다. 다음과 같이 자동 변경.
- 코드언어 참조 : http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
- 테마 참조 : http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/
- 사용 예시)
<pre class="brush:html"> <!-- HTML 소스표시 -->
<pre class="brush:css"> <!-- CSS 소스표시 -->
<pre class="brush:js"> <!-- JavaScript 소스표시 -->
<pre class="brush:sql"> <!-- SQL 소스표시
<pre class="brush:js html-script:true"> <!-- 다른 언어와 HTML 사용 -->
<pre class="brush: plain; gutter: false" <!-- SyntaxHighlighter 라인제거 -->
<pre class="brush: plain; collapse: true" <!-- 소스접기 -->
<pre class="brush: plain; first-line: 10" <!-- 시작행 번호 지정 -->
<pre class="brush: plain; highlight: 2" <!-- 단일행 (2번째행) 강조 -->
<pre class="brush: plain; highlight: [1, 3]" <!-- 다중 (1, 3번째행)강조 -->
<pre class="brush:html highlight:[2,4]"> <!-- 특정 행 강조 -->
<pre class="brush:html first-line:25"> <!-- 시작 행 번호 변경 -->
<pre class="brush:html toolbar:false"> <!-- 도구모음 숨기기 -->
<pre class="brush:html auto-links:false"> <!-- 오토 링크 해제 -->
<pre class="brush:html" title="Blomari Note"> <!-- 제목 표시 -->
▶ 5. 세로 스크롤바를 삭제 방법
HTML 탭에서 </html> 바로 윗줄에 다음 코드를 삽입.
<style>
.SyntaxHighlighter { overflow-y:hidden !important; }
</style>
'2. 개인 관심 > 2_2 블로그 관련 지식' 카테고리의 다른 글
| [블로그 꾸미기] 13. 블로그 방문자 실시간 확인 위젯 설정(Whos.amung.us) (0) | 2020.03.12 |
|---|---|
| [블로그 꾸미기] 12. 코드 이쁘게 적용(Syntax Highlighter 적용)하기 (0) | 2019.01.28 |
| [블로그 꾸미기] 11. 티스토리 스킨 바꾸기 (FastBoot v1.6.2) (1) | 2019.01.21 |
| [블로그 꾸미기] 유튜브 구독 버튼을 달아보자. (0) | 2018.09.30 |
| [블로그 꾸미기] 블로그차트 위젯을 달아보자. (7) | 2018.06.26 |
| [블로그 꾸미기] 8. 마우스 커서 바꾸기 (0) | 2018.06.12 |
댓글0