[티스토리] 소스 코드 가독성을 위한 SyntaxHighlighter 설치

이번 포스팅에서는 티스토리에서

소스 코드를 열었을 시

가독성을 한층 높일 수 있는

SyntaxHighlighter

설치에 대한 포스팅을 진행 할 예정입니다.

일단 정확히 SyntaxHighlighter 가 무엇인지에 대하여 살펴본다면

function getRequest(valuename)  

{

var rtnval;

var nowAddress = unescape(location.href);

var parameters = new Array();

parameters = (nowAddress.slice(nowAddress.indexOf("?")+1,nowAddress.length)).split("&");

for(var i = 0 ; i < parameters.length ; i++){

if(parameters[i].indexOf(valuename) != -1){

var splitVal = parameters[i].split("=");

if(splitVal[1] == undefined || splitVal[1] == null){

rtnval = "";

} else rtnval = splitVal[1];

return rtnval;

}

}

}

function getUUID() {

    var d = new Date().getTime();

    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {

        var r = (d + Math.random()*16)%16 | 0;

        d = Math.floor(d/16);

        return (c=='x' ? r : (r&0x3|0x8)).toString(16);

    });

    return uuid;

};

와 같은 코드를 테마를 덧씌어서

요렇게 가독성이 좋게 보일 수 있도록 하는 자바스크립트 라이브러리입니다

현재 4.0.1 버전까지 뜬 것으로 알고 있는데요.

안되요..ㅠㅡ ㅠ

그래서 제가 들고 온 버전은 

3.0.83 

버전입니다

원래는 해당 사이트를 연결하는게 맞을 지언데

해당 사이트에 들어가서 해당 버전을 받을 수 없습니다.

그래서 

다운로드하기

에서 다운 받으시라고 파일을 올려놓았습니다.

해당 압축 파일을 풀게 되면

와 같은 폴더 구조가 나오는데..

저희가 필요한 폴더는 Scripts, styles 폴더만 있으면 됩니다.

파일이 참 많지만 핵심 파일은

shBrushJScript.js And Etc Js Files

와

Core Theme.css

두개만 사용하시면 되겠습니다.

단 

업로드는 모든 파일을 업로드하시는게

향후 변경하기가 쉽습니다.

티스토리를 사용해보신 분이라면 아시겠지만

파일 등록은

관리자페이지 > 꾸미기 > HTML/CSS 편집에서 수정 하실 수 있습니다.

해당 메뉴에 들어가보시면

(예전에 사용하던 블로그에서 가져왔더니 옛날 블로그가 보이네요^^;;)

파일업로드에서 추가 버튼을 클릭하신 후

해당 js, css 파일을 업로드 하신 뒤

HTML 메뉴를 선택 후

코드를 넣으시면 됩니다.

즉 JS 와 CSS는 한개씩만 Include 시키시면 됩니다.

전부 등록하시면 됩니다.

------------------------------------------------------------

2018.08.08 추가 내용입니다.

확인 결과 각각 언어에 대하여 따로 처리하는 것으로 확인되었습니다.

예를 들어 작성하고자 하는 글이

html + js 인 경우

shBrushJScript.js 만 파일을 추가하였을 시

html은 인식하지 못합니다.

즉 html 글을 만들기 위해서는 최소

shBrushJScript.js

shBrushXml.js

shBrushCss.js

 3가지의 자바스크립트 파일이 필요로 합니다.

------------------------------------------------------------

Style폴더에 들어가면 비슷 한 이름들이 두개씩 있는데

비교를 해보니..

먼가 소스가 막 다르다고 뜨는데..

결국은 ShCore* 가 붙어 있는 파일이 많은 내용을 담고 있네요.

뭔가 참 많은데..

막상 적용한 후 확인을 해보면 다른게 없습니다^^;;

그래도 혹시나 스타일이 많이 들어가 있는게 좋겠지!

라고 생각하신다면 Core를 아니면 Theme를 사용하시면 될 것으로 보입니다.!

그럼 사용 방법을 알아보겠습니다!

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

와 같이 HTML 모드에서 

<pre class="brush: 언어">

.... Source Code ....

</pre>

처럼 쓰시면 되고,

테마를 변경하시려거든

앞에서 Include 시켰던 CSS 를 변경하면 됩니다.

테마를 간단하게 보고 넘어갈께요~

언어는 JS 입니다.

shCoreDefault

shCoreDjango

shCoreEclipse

shCoreEmacs

shCoreFadeToGrey

shCoreMDUltra

shCoreMidnight

shCoreRDark

와 같이 보실 수 있습니다.

지원하는 코드 언어를 확인 하시려면

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

에서 확인해주시면 될 것 같습니다^^

코드를 블로그에서 쓸 일이 있으신 분들은

사용하기를 권장해드립니다^^

이것으로 이번 포스팅을 마치도록 하겠습니다.