Google Prettify - 티스토리에 소스코드 표시
Web Design/CSS & CSS32018. 4. 25. 02:22
티스토리에 소스코드(Code snippets) 표현을 예쁘게!
Google Prettify - 티스토리에 소스코드 표시
01. Google prettify 사용에 필요한 파일을 다운로드 후 압축을 해제합니다.
[다운로드] : 
googlePrettify.zip
설정 > 스킨편집 > html 편집 > 파일업로드 > + 추가를 클릭해 압축해제한 2개의 파일 tomorrow-night-eighties.css , run_prettify.js를 업로드합니다.
02. HTLM의 <head>~</head>안에 아래 코드를 삽입합니다.
<!-- prettify 설정 시작-->
<link rel="stylesheet" type="text/css" href="./images/tomorrow-night-eighties.css">
<script type="text/javascript" src="./images/run_prettify.js"></script>
<!-- prettify 설정 끝-->
03. <pre class="prettyprint linenums">
소스코드 들어갈 자리
</pre>
example)
<div class="camera_wrap">
<div data-src="images/image_1.jpg"></div>
<div data-src="images/image_1.jpg"></div>
<div data-src="images/image_2.jpg"></div>
</div>
<div class="camera_wrap">
<div class="row">
<div class="col-sm-3">
<a href="#">Type 05</a>
</div>
<div class="col-sm-3">
<a href="#">Type 06</a>
</div>
<div class="col-sm-3">
<a href="#">Type 07</a>
</div>
<div class="col-sm-3">
<a href="#">Type 08</a>
</div>
</div>
'Web Design > CSS & CSS3' 카테고리의 다른 글
| [CSS] Text Property (속성 ) : direction (0) | 2018.05.01 |
|---|---|
| [CSS] Text Property (속성 ) : color (0) | 2018.05.01 |
| SyntaxHighLighter 3.0.83 사용 - 티스토리에 소스코드 표시 (0) | 2018.04.24 |
| CSS Property (속성 ) : Font (0) | 2018.04.16 |
| CSS Vendor Prefixes (브라우저 접두사)로 부터 자유를... (0) | 2018.04.16 |
