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

소스 코드를 열었을 시

가독성을 한층 높일 수 있는


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/


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


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

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


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

Comment +0