이 영역을 누르면 첫 페이지로 이동
gallery25 블로그의 첫 페이지로 이동

gallery25

페이지 맨 위로 올라가기

gallery25

Photo & Remembrance

syntaxhighlighter 티스토리 본문에 적용하기

  • 2016.05.14 09:24
  • 추억/쌈지



1. [준비] 먼저 아래 사이트에서 필요한 화일을 다운로드 받는다 

http://alexgorbatchev.com/SyntaxHighlighter/download/


2. [화일] 업로드 필수 파일은 scripts 폴더와 styles 폴더안에 있는 파일들 중 아래 4개다

scripts/shCore.js

scripts/shBrushJScript.js

styles/shCore.css

styles/shThemeDefault.css

3. [설치] 티스토리 관리자모드에서 HTML/CSS편집 메뉴에서 설치 화일을 업로드 한다. 

물론 모두 업로드 해도 상관없고 필요한 테마를 선별해서 업로드 해도 된다

만약 스킨을 바꾸고 싶다면 skin.html의 <head></head> 사이<link href=...>에서 파일을 맞추어 링크를 변경 해주면 된다

예) 나는 "KoPubDotum Roboto" 폰트를 적용하고 토마토님의 shThemeTomato를 선택하였다.

<link href="./images/shCore.css" rel="stylesheet" type="text/css">

<link href="./images/shThemeTomato.css" rel="stylesheet" type="text/css">

이곳으로 검색 타고 오신 분들은 간략히 설명된 여긴 허접하니 토마토님의 포스팅을 참고하시길...


4. [skin.html 소스 수정] 티스토리 관리자모드에서 HTML 클릭 > skin.html 페이지 <head>와 </head> 사에에 아래 소스를 넣는다

		
		
		
		
		
			


5. [적용법] 편집기에서 글쓰기 중 소스가 필요한 부분에서 HTML 모드로 전환 후 <pre> 태그 안에 소스코드 삽입

<pre class="brush: js">

function setBrush()

{

alert("set Brush!!");

}

</pre>



적용예)

function setBrush()
{
alert("set Brush!!");
}

6. [기타] 브러시 정보는 아래 링크에서 확인한다
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/


7. 토마토님의 shThemeTomato.css 소스

/**
 * SyntaxHighlighter
 * http://alexgorbatchev.com/SyntaxHighlighter
 *
 * SyntaxHighlighter is donationware. If you are using it, please donate.
 * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
 *
 * @version
 * 3.0.83 (July 02 2010)
 * 
 * @copyright
 * Copyright (C) 2004-2010 Alex Gorbatchev.
 *
 * @license
 * Dual licensed under the MIT and GPL licenses.
 *
 * @Customized by Sometimes-n
 * http://sometimes-n.tistory.com/
 *
 */
.syntaxhighlighter {
  background-color: white !important;
}
.syntaxhighlighter .line.alt1 {
  background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: white !important;
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: #e0e0e0 !important;
}
.syntaxhighlighter .line.highlighted.number {
  color: black !important;
}
.syntaxhighlighter table caption {
  color: black !important;
}
.syntaxhighlighter .gutter {
  color: #afafaf !important;
}
.syntaxhighlighter .gutter .line {
  border-right: 3px solid #6ce26c !important;
}
.syntaxhighlighter .gutter .line.highlighted {
  background-color: #6ce26c !important;
  color: white !important;
}
.syntaxhighlighter.printing .line .content {
  border: none !important;
}
.syntaxhighlighter.collapsed {
  overflow: visible !important;
}
.syntaxhighlighter.collapsed .toolbar {
  color: blue !important;
  background: white !important;
  border: 1px solid #6ce26c !important;
}
.syntaxhighlighter.collapsed .toolbar a {
  color: blue !important;
}
.syntaxhighlighter.collapsed .toolbar a:hover {
  color: red !important;
}
.syntaxhighlighter .toolbar {
  color: white !important;
  background: #6ce26c !important;
  border: none !important;
}
.syntaxhighlighter .toolbar a {
  color: white !important;
}
.syntaxhighlighter .toolbar a:hover {
  color: black !important;
}
.syntaxhighlighter .plain, .syntaxhighlighter .plain a { /* 일반 글자 색상 (html 예:일반 텍스트) */
  color: black !important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a { /* 주석 처리 글자 색상 */
  color: #009f00 !important;
}
.syntaxhighlighter .string, .syntaxhighlighter .string a { /* '글자' 또는 "글자" 안의 색상 */
  color: #ff1493 !important;
}
.syntaxhighlighter .keyword { /* 키워드로 등록된 색상 (html 예:태그명) */
  color: #066de2 !important;
}
.syntaxhighlighter .preprocessor { /* preprocessor 색상 (javascript 예:#region 또는  #endregion) */
  color: #994500 !important;
}
.syntaxhighlighter .variable { /* variable 색상 (php 예:$thisvalue) */
  color: #aa7700 !important;
}
.syntaxhighlighter .value { /* value 색상 (css 예:숫자 또는 색상코드#a0a0a0 또는 bold 같은 값)  */
  color: #df5000 !important;
}
.syntaxhighlighter .functions { /* functions 색상 (php 예:substr 같은 funcs에 등록한 키워드 색상) */
  color: #ff1493 !important;
}
.syntaxhighlighter .constants { /* constants 색상(php 예:__FILE__ 같은 constants에 등록한 키워드 색상 */
  color: #066de2 !important;
}
.syntaxhighlighter .script { /* script class 색상(이 class는 찾지 못해서 .keyword와 같은 색상으로 지정했어요) */
  color: #a71d5d !important;
}
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a { /* color1 class 색상(html 예:태그의 attribute 색상- width, height, class 등등)  */
  color: #df5000 !important;
}
.syntaxhighlighter .color2, .syntaxhighlighter .color2 a { /* color2 class 색상(html 예: 같은 ..) */
  color: #ff1493 !important;
}
.syntaxhighlighter .color3, .syntaxhighlighter .color3 a { /* color3 class 색상(css 예:!important 단어 색상) */
  color: red !important;
}

/* class의 font-weight: bold 는 모두 삭제 했습니다 */



Syntaxhighlighter 테마 7가지


1. Default


2. Django


3. Eclipse


4. Emacs


5. Fade To Grey


6. Midnight


7. RDark


출저 : http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/


저작자표시 비영리 동일조건

댓글

이 글 공유하기

  • 구독하기

    구독하기

  • 카카오톡

    카카오톡

  • 라인

    라인

  • 트위터

    트위터

  • Facebook

    Facebook

  • 카카오스토리

    카카오스토리

  • 밴드

    밴드

  • 네이버 블로그

    네이버 블로그

  • Pocket

    Pocket

  • Evernote

    Evernote

다른 글

  • Lens Project gallery25

    Lens Project gallery25

    2016.05.19
  • gallery25 Titles and Lowerthirds Ver.01

    gallery25 Titles and Lowerthirds Ver.01

    2016.05.17
  • gallery25 intro V.07

    gallery25 intro V.07

    2016.05.13
  • 부산 개념커피숍 마크커피로스팅

    부산 개념커피숍 마크커피로스팅

    2016.05.03
다른 글 더 둘러보기

정보

gallery25 블로그의 첫 페이지로 이동

gallery25

  • gallery25의 첫 페이지로 이동

검색

메뉴

  • 여기

카테고리

  • 전체 (481)
    • 사진 (394)
      • 인물 (263)
      • 풍경 (44)
      • 스냅 (87)
    • 추억 (87)
      • 어제 (70)
      • 쌈지 (15)

댓글

공지사항

  • 공지 - 3월

정보

그섬의 gallery25

gallery25

그섬

블로그 구독하기

  • 구독하기
  • RSS 피드

방문자

  • 전체 방문자
  • 오늘
  • 어제

티스토리

  • 티스토리 홈
  • 이 블로그 관리하기
  • 글쓰기
Powered by Tistory / Kakao. © 그섬. Designed by Fraccino.

티스토리툴바