위 소스는은 검색을 하다보면 블로그에 많이 보이는 형태입니다.
딱 봐도 보기 쉽게 정렬이 되어있습니다.
이 때, 소스를 편하게 보기 위해 필요한 Syntax Highlighter 입니다.
이 툴을 다운받기 위해 syntaxhighlighter_3.0.83.zip 을 다운 받습니다.
1. 다운로드
http://alexgorbatchev.com/SyntaxHighlighter/download/ 으로 접속 하여
Click here to download. 라고 쓰여 있는 부분을 클릭합니다. ( <- 바로 이 링크 따라가세요. )
2. 압축해제
다운이 끝났으면 압축을 해제합니다.
3. 설정
4. 파일 업로드
파일 업로드를 선택합니다.
추가를 누릅니다.
좀 전에 압축을 풀었던 폴더로 갑니다.
scripts 폴더와 styles 폴더에 있는 파일들을 Ctrl + A를 눌러서 모두 업로드 해주세요.
6. HTML/CSS 편집
HTML 을 눌러서 수정할 준비를 합시다.
Ctrl + F ( 찾기 ) 를 이용하여
</head> 검색!
아래의 코드를 </head> 위에 붙여넣기 하세요.
</head> 밑에 바로 <body>라는 부분이 있습니다.
이 부분도 바꿔야 합니다.
<body> 를 아래의 코드로 바꾸세요.
저장을 눌러 완료합니다.
7. 적용
글 쓸 때,
위 사진에 보이는 HTML 체크를 합니다.
모르는 코드가 많지만 당황하지 않고,
작성할 코드 위, 아래로 이 소스를 사용하여 감싸줍니다.
<textarea name="code" class="brush:java;"> ,
</textarea>
ex)
<textarea name="code" class="brush:java;">
이 부분에 작성!!!
</textarea>
참고로,
스킨을 변경하고 싶을 때
HTML/CSS 편집에서 붙여넣었던 코드 중
아래, 빨간 색으로 된 부분을 변경하면 됩니다.
<link type="text/css" rel="stylesheet" href="./images/shThemeMidnight.css">
참고 사이트
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/
스킨 목록은 아래와 같습니다.
shThemeDefault
shThemeDjango
shThemeEclipse
shThemeEmacs
shThemeFadeToGrey
shThemeMDUltra
shThemeMidnight
shThemeRDark
'Tistory' 카테고리의 다른 글
| 51_17년 01월 티스토리 초대장 배부 (4) | 2017.01.04 |
|---|---|
| 26_highlightjs (0) | 2016.09.23 |
| 19_티스토리 나눔고딕 적용 (0) | 2016.08.31 |