티스토리에 SyntaxHighlighter 3.0.83 적용하기 초간단

syntaxhighlighter 사용하기

 

*본 포스팅은 최신버전인 syntaxhighlighter_3.0.83를 기준으로 설명한다.

 

 

syntaxhighlighter 다운받기

 

syntaxhighlighter 사이트에 접속해 최신버전을 다운받는다.

 

 

 

 

 

 

 

 

티스토리에 파일 업로드 하기

 

 

다운받은 파일의 압축을 풀어보면 위 사진과 같은 파일들이 나올 것이다.

그 중, scripts 폴더와 styles 폴더를 티스토리에 업로드 해야한다.

 

 

 

티스토리 - 관리 - HTML/CSS 편집 - 파일업로드에 들어간 후

추가 버튼을 눌러 위에서설명한 scripts 폴더와 styles 폴더를 업로드 한다.

 

 

 

 

 

HTML/CSS에 코드추가

 

 

 

티스토리 - 관리 - HTML/CSS 편집 - HTML/CSS로 이동하여

skin.html에 코드를 추가한다.

 

Ctrl+F 찾기 - "/head " 검색한다.

</head>를 찾았으면 바로 윗줄에 소스를 입력하자

 

 

 

하단의 입력소스내용을 그대로 붙이면 된다.

 

<!-- SyntaxHighlighter 시작 -->

<script type="text/javascript" src="./images/shAutoloader.js"></script>
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushAppleScript.js"></script>
<script type="text/javascript" src="./images/shBrushAS3.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushColdFusion.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushDelphi.js"></script>
<script type="text/javascript" src="./images/shBrushDiff.js"></script>
<script type="text/javascript" src="./images/shBrushErlang.js"></script>
<script type="text/javascript" src="./images/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushJavaFX.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPerl.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushPowerShell.js"></script>
<script type="text/javascript" src="./images/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.js"></script>
<script type="text/javascript" src="./images/shBrushSass.js"></script>
<script type="text/javascript" src="./images/shBrushScala.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushVb.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
 
<link rel="stylesheet" type="text/css" href="./images/shCore.css">
<link rel="stylesheet" type="text/css" href="./images/shThemeDefault.css">
<link rel="stylesheet" type="text/css" href="./images/shCoreDjango.css">
<link rel="stylesheet" type="text/css" href="./images/shCoreEclipse.css">
<link rel="stylesheet" type="text/css" href="./images/shCoreEmacs.css">
<link rel="stylesheet" type="text/css" href="./images/shCoreFadeToGrey.css">
<link rel="stylesheet" type="text/css" href="./images/shCoreMDUltra.css">
<link rel="stylesheet" type="text/css" href="./images/shCoreMidnight.css">
<link rel="stylesheet" type="text/css" href="./images/shCoreRDark.css">
<link rel="stylesheet" type="text/css" href="./images/shThemeDefault.css">
<link rel="stylesheet" type="text/css" href="./images/shThemeDjango.css">
<link rel="stylesheet" type="text/css" href="./images/shThemeEclipse.css">
<link rel="stylesheet" type="text/css" href="./images/shThemeEmacs.css">
<link rel="stylesheet" type="text/css" href="./images/shThemeFadeToGrey.css">
<link rel="stylesheet" type="text/css" href="./images/shThemeMDUltra.css">
<link rel="stylesheet" type="text/css" href="./images/shThemeMidnight.css">
<link rel="stylesheet" type="text/css" href="./images/shThemeRDark.css">
<script type="text/javascript">
          SyntaxHighlighter.all();
</script>

<!-- SyntaxHighlighter 끝 -->

 

 

.js 파일은 스크립트에 관련된 등록이며, .css 파일은 스타일/테마와 관련된 등록이다.

기존에 syntaxhighlighter를 사용하였던 사람은 주로 사용하는 .css 만 입력하여도 된다.

 

 

 

syntaxhighlighter 사용하기

 

<pre> method를 사용하는 방법</p>

<pre class="brush: js">

function foo()
{
}
</pre>

 

<script> method를 사용하는 방법</p>

 

<script type="syntaxhighlighter" class="brush: js"><![CDATA[
function foo()
{
if (counter <= 10)
return;
// it works!
}
]]></script>

 

관련내용보기

 

여기서 중요한 부분은 class="brush: 언어"를 기억해야 한다.

예를들어 코딩소스가 cpp일 경우

class="brush: cpp"로 하면된다.

해당 내용은 링크페이지 를 통해 확인가능하다.

 

좀더 자세하게 살펴보자면 작성할 글을 입력한 후

 

 

 

HTML 체크박스를 클릭하여 작성한 소스가 들어간 부분을 다음과 같이 수정한다.

<pre> method를 사용하는 방법</p> 을 적용한화면이다.

 

 

 

 

 

 

 

 

<SyntaxHighlighter가 적용된 결과 화면>

 

 

해당 화면은 shThemeDefault.css 테마를 적용한 결과입니다.

 

 

 

일단 오늘은 여기까지 마무리하겠습니다.

이렇게 설명드렸는데도 이해안가시는 분은..

댓글남겨주세요^^;