SyntaxHighLighter 3.0.83 사용 - 티스토리에 소스코드 표시
SyntaxHighLighter 3.0.83 사용 - 소스코드 표시 [티스토리]
☞ SyntaxHighlighter v3.0.83
syntaxhighlighter_3.0.83.zip※ 신텍스하이라이터란?
블로그, 웨사이트 등에 프로그램 소스를 예쁘게 표시해 주는 자바스크립트 라이브러리 입니다. PHP, HTML, CSS, JavaScript, ColdFusion, Ruby, Python 등 다양한 언어의 코드의 개발문서를 웹에 게시할 때 유용하게 사용할 수 있습니다.
[1] 필요파일 업로드
01. 다운로드한 파일의 압축을 풉니다.
02. 압축을 해제한 폴더 중에 [scripts]와 [styles] 두개의 폴더 안의 파일을 다음과 같이 업로드 합니다.
티스토리 블로그 "설정" > (1) 스킨편집 > (2) html 편집 > (3) 파일업로드 > (5) + 추가
[scripts]와 [styles] 두개의 폴더 안의 파일을 업로드 합니다.
[2} 필요 소스 삽입
다운로드 : 
themeSkin.txt
HTML (6)으로 이동해
<head>안의 <title>All about {Web} : : SyntaxHighLighter 3.0.83 사용 - 티스토리에 소스코드 표시</title>밑에 themeSkin.txt의 내용을 삽입한 후 저장합니다.
[3] 사용방법
글작성시 HTML에 체크 후
<pre class="brush: html;">소스 넣을 자리</pre>
SAMPLE : Theme - Midnight
Name File
---------------------------------------------------
Default shThemeDefault.css
Django shThemeDjango.css
Eclipse shThemeEclipse.css
Emacs shThemeEmacs.css
Fade To Grey shThemeFadeToGrey.css
Midnight shThemeMidnight.css
RDark shThemeRDark.css
Google Prettify 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 (속성 ) : color (0) | 2018.05.01 |
|---|---|
| Google Prettify - 티스토리에 소스코드 표시 (0) | 2018.04.25 |
| CSS Property (속성 ) : Font (0) | 2018.04.16 |
| CSS Vendor Prefixes (브라우저 접두사)로 부터 자유를... (0) | 2018.04.16 |
| CSS - Embedding Styles (HTML에 CSS 적용 방법) (0) | 2018.04.16 |
