블러그 소스 코드 부분 깔끔 편집 - syntaxhighlighter

블로그

블러그에 글을 올리다가 항상 아쉬웠던 것이 소스코드 편집문제였다

개발툴에 있는 Edit 처럼 사용자 편의대로 편집할수도 없고 여간 불편한게 아니였다.
그러다 SyntaxHighlighter 이라는 자바 스크립트를 알게되었다.

http://code.google.com/p/syntaxhighlighter/
구글 사이트에 가면 소개가 되어있다.

소스는 옆 탭 downloads 를 눌러 받으면 된다.


압축을 풀고 관리자 > 스킨 > HTML/CSS 편집을 클릭한다.


파일 업로드 탭을 선택하고 압축푼 폴더중에 Script., Styles 에 있는 파일을 업로드한다


그리고 HTML/CSS 편집 탭을 클릭하여 Head 부분에 아래와 같은 스크립트
삽입 태그를 넣는다.


<!-- SyntaxHighlighter Include souce Start -->

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

<script type="text/javascript" src="./images/shCore.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/shBrushJava.js"></script>      

<script type="text/javascript" src="./images/shBrushJScript.js"></script>       

<script type="text/javascript" src="./images/shBrushPhp.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/shBrushSql.js"></script>           

<script type="text/javascript" src="./images/shBrushVb.js"></script>            

<script type="text/javascript" src="./images/shBrushXml.js"></script>             

<script language="javascript">

 dp.SyntaxHighlighter.ClipboardSwf = './images/clipboard.swf';

 dp.SyntaxHighlighter.HighlightAll('code');

</script>

<!-- SyntaxHighlighter Include source End -->

 

지원하는 언어는 다음과 같다

Language

Aliases

C++

cpp, c, c++

C#

c#, c-sharp, csharp

CSS

css

Delphi

delphi, pascal

Java

java

Java Script

js, jscript, javascript

PHP

php

Python

py, python

Ruby

rb, ruby, rails, ror

Sql

sql

VB

vb, vb.net

XML/HTML

xml, html, xhtml, xslt

 

설정값에 따라 표현형식을 바꿀수가 있는데 다음과 같은 속성이 있다

속성

설명

nogutter

Will display no gutter

nocontrols

Will display no controls at the top

collapse

Will collapse the block by default

firstline[value]

Will begin line count at value. Default value is 1.

showcolumns

Will show row columns in the first line.

 

이것들을 한번씩 설정해서 그 변화된 모습을 보면 금방 이해할것같다

화면에서 사용할때는 다음과 같이 태그중간에 코드를 삽입하면된다

class java 가 들어간거보니 stylesheet 에서 java 언어에 대한 값을

적용하는 것이다. 위의 표처럼 원하는 언어를 선택해서 class 값에 넣어주면 된다

<TEXTAREA class="java" name="code" rows=10 cols=50>

  <!-- 소스코드삽입 -->

</TEXTAREA>

 

<PRE class="brush:c#" name="code">

  <!-- 소스코드삽입 -->

</PRE>

버전이 몇부터인지는 모르겠으나 <TEXTAREA> 태그가 안먹는다고 한다.
그럴땐 밑에 PRE 태그를 사용한다.

한번 적용한 모습이다
. 이제 소스 정리가 깔끔하게 되는거 같아 정말 좋다.


한참 미루었던 일을 치루니 일주일 변비가 한꺼번에 분출된거 같아 정말 시원하다
..

역시 일은 미루면 어느모로 보나 손해다 ㅋㅋ

 


Posted by 녹두장군

댓글을 달아 주세요

  1. Favicon of https://maehyang.tistory.com mhx 2009.06.09 22:01 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다 ㅎㅎ