SyntaxHighlighter 블로그에 적용하기

| 블로그/스킨변경(3.0.0)

SyntaxHighlighter 블로그에 적용하기

| 블로그/스킨변경(3.0.0)

 

유틸리티 다운로드 및 업로드

 

  • 아래 사이트에서 최신버전 syntaxhighlighter_3.0.83 를 다운로드 받는다
  • http://alexgorbatchev.com/SyntaxHighlighter/download/
  • 압축을 풀면 아래 그림처럼 폴더및 파일이 있는데 이중 scripts폴더 및 styles폴더만 사용한다

    •  

     

     

  • styles 폴더내에서 아래그림처럼 가장기본되는 3개의 파일을 블러그에 업로드 한다

    •  

     

     

  • scripts 폴더내에서 아래그림처럼 선택한 파일을 블러그에 업로드 한다
  • shAutoloader, shCore, shLegacy파일은 필수적으로 업로드하고, 추가로 자신이 쓸 언어들을 더 올린다

 

 

 

 

블로그내 skin.html 파일수정

 

  • 관리자모드 HTML/CSS로 가서 skin.html 코드의 </head>태그 바로위에 다음의 코드 추가한다

    •  

  • 관리자모드 HTML/CSS로 가서 skin.html 코드의 </body>태그 바로위에 다음의 코드 추가한다

 

 

사용하기

 

<pre/> 태그를 이용하는 방법

  • 이 태그의 문제는 code에서 < 기호를 사용할 때는 반드시 HTML entity인 &lt; 로 사용해야 합니다.
    • <pre class="brush: java">
<html>
<head>
function foo() {
}
</head>
</html>
</pre>

 

<script/> 태그를 이용하는 방법

  • 이 태그는 CDATA를 사용하여 어떤 기호든 사용하는대로 출력됨
  • RSS 등에서는 script 태그가 제거되어 정상적으로 표시되지 않는 단점이 있음
  • 블로그 등에서만 하이라이팅이 되도 괜찮다면 pre 태그 보다는 script 태그가 수월함
  • 태그 사용시 script type을 text/javascript 가 아닌 syntaxhighlighter 로 설정해야 함

 

 

설정하기

 

테마변경

  • Eclipse 테마를 설정하고 싶다면 아래와 같이 기존의 Default 테마를 Eclipse 테마로 바꾸어 주면된다
  • 또한 shThemeEclipse.css파일을 업로드 한다
  • 각 테마가 어떤 느낌을 가지고 있는지는 다음 사이트를 참조
  • http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

 

옵션설정

  • 기본적으로 <pre class = "brush: 언어; 옵션이름 : 값;"> 의 형식으로 사용
  • script사용시도 같음 <script class="brush: css;highlight:7" type=syntaxhighlighter>
  • 만약 여러가지 옵션을 동시에 지정하고 싶을 경우 세미콜론(;)으로 구분하여 연속으로 지정한다
    [옵션이름 및 값]
    이 름 초기값 내  용
    auto-links true URL입력시 자동으로 링크시킬지 여부 설정 데모 보기
    class-name '' SyntaxHighlighter에 CSS를 적용시킬 때 데모 보기
    collapse false 내용 숨기기 여부 설정 (클릭시 보여지게 하는 기능). 데모 보기
    first-line 1 첫번째 라인 번호를 변경 할 때 데모 보기
    gutter true 왼쪽  넘버링(숫자) 표시 여부 설정 데모 보기
    highlight null 특정 라인의 내용을 강조하고자 할 때 데모 보기
    html-script false HTML/XML 코드를 강조하여 표시 데모 보기
    smart-tabs true 탭 사용 설성. 데모 보기
    tab-size 4 텝 사용시 뛰울 간격 설정 데모 보기
    toolbar true 툴바 표기 설정. 데모 보기
  • 매번 입력이 아닌 항상 적용되게 하고 싶다면 SyntaxHighlighter 설정 과 마찬가지로 관리자모드의 skin.html 의 </body> 위에 다음과 같이 사용하면 된다

 

폰트크기 변경

  • styles 폴더내의 shCore.css파일을 수정한다
  • shCore.css 파일을 열어 50번째줄의 font-size: 1em !important; 이부분에서 1em을 수정해 준다
  • 참고로 이블로그는 10pt로 수정 사용함
  • 수정된 파일을 티스토리에 업로드 한다
  • ctrl + shift + r로 캐쉬를 날려주면 빠르게 적용됨

'블로그 > 스킨변경(3.0.0)' 카테고리의 다른 글

본문 폰트크기 변경  (0) 2014.05.03
본문 줄간격 및 글자간격 조정하기  (0) 2014.05.02
상단메뉴 고정하기  (0) 2014.04.21
상단이미지 삭제하기  (0) 2014.03.18
상단 메뉴변경하기  (0) 2014.03.18

Trackback : Comment

사이드바 ▼