프로그램/BLOG TIP

SyntaxHighlighter 블로그에 적용하기

주원대디 2014. 4. 19. 08:29

 

SyntaxHighlighter 블로그에 적용하기

 

적용절차. 

1. 다운받기

2. 관리자모드 -> HTML/CSS 편집 -> 파일업로드

3. 관리자모드 -> HTML/CSS 편집 -> HTML/CSS 수정

3. 사용방법

 

1. 다운받기

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

으로 가서 다운을 받는다.

 

최신 SyntaxHighlighter 버전은 3.0.83이 있었지만.. 테스트 해본결과

view source(소스보기) , copy to clipboard(소스복사), print(프린트) 의 플래시.. 기능이 보이지 않아

2.1.382의 이전버전으로 설치함!!

 

2. 관리자모드 -> HTML/CSS 편집 -> 파일업로드

2.1.382 버젼을 다운 받아 압축을 풀면

 

 

test로 실행을 해 보면.. 간단한 예제내용을 확인 할수 있다.

 

script 폴더에 들어가면 각종 프로그램들의 js 파일들이 나열 되어 있다.

본인이 사용하는 프로그램들만 업로드 해주면 된다.

 

              

 

 

내가 scripts 폴더에서 업로드한 파일.

필수

clipboard.swf

shCore.js     

선택사항들
shBrushXml.js  
shBrushJScript.js
shBrushCss.js
shBrushPhp.js
shBrushJava.js
shBrushSql.js

 

내가 styles 폴더에서 업로드한 파일.

help.png

magnifier.png

page_white_code.png

page_white_copy.png

printer.png

shCore.css

shThemeDefault.css

 

 

3. 관리자모드 -> HTML/CSS 편집 -> HTML/CSS 수정

  

 

 아래의 내용을 복사해서 skin.html </head>태그 위에 붙여넣기 해주면 끄읏!

<link type="text/css" rel="stylesheet" href="./images/shCore.css"/>
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css"/>
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript">
		SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf';
		SyntaxHighlighter.all();
</script>                    


 

4. 사용방법 (에디터 HTML모드에서 작성)

<pre class="brush: js;">
function helloSyntaxHighlighter()
{
 return "hi!";
}
</pre>

종종 입력하는데... 본인이 원하지 않는 값이 나올때가 있다.

정확히 입력했는데도 이상한 값이 나온다.

예를들면 <?=$test ?> 이런식으로 하면 이상한 나옴..ㅡㅡ

이럴때는...

< == &lt

> == &gt

태그 열고 닫는 것을 치환 해주어야 한다.