티스토리에 깔끔한 코드를 넣어보자

티스토리에 코드를 삽입할때 깔끔한 방법을 찾다가 다른 분들도 다 쓰던 그걸 찾아서 썼습니다.

먼저 http://alexgorbatchev.com/SyntaxHighlighter/download 에서 SyntaxHighlighter를 다운로드합니다.

다운만 받지말고 기본 설치법과 사용법을 숙지하십시다.

압축 파일을 열어서 script폴더와 style폴더 두 곳의 파일들을 적당한 곳에 풀어놓습니다.

그런 다음 티스토리의 관리자 모드에서 스킨메뉴로 갑니다.

스킨 메뉴의 파일업로드를 클릭하여 압축 푼 파일들을 업로드합니다.

업로드는 실시간으로 바로 올라가집니다.

그런 후 skin.html에 HTML코드를 추가해줍니다.

코드삽입 위치는 </head> 윗 부분입니다.

자주 사용하는 코드들을 플러그인 스크립트들을 연결합니다.

언어별로 따로 있습니다. 여러 언어들이 있군요.

골라서 쓰시길 바랍니다.

파일들이 많으면 트래픽 증가 및 웹페이지 로딩속도 저하가 생기니 필요한 js파일만 링크 시킵시다.

아래는 코드들입니다.

<!-- 
    Include required JS files
    필수 플러그인 스크립트입니다.
-->
<SCRIPT type=text/javascript src="./images/shCore.js"></SCRIPT>
<!--
    At least one brush, here we choose JS. You need to include a brush for every 
    language you want to highlight
    최소 한개이상의 브러시(코드언어)를 추가해야합니다.
-->
<SCRIPT type=text/javascript src="./images/shAutoloader.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/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>

<!-- Include *at least* the core style and default theme -->
<LINK rel=stylesheet type=text/css href="./images/shCore.css">
<LINK rel=stylesheet type=text/css href="./images/shThemeDefault.css">
 
<!-- Finally, to actually run the highlighter, you need to include this JS on your page -->
<SCRIPT type=text/javascript>
     SyntaxHighlighter.config.tagName = "pre";
     SyntaxHighlighter.all()
</SCRIPT>

코드를 넣고 저장을 꼭 해줍시다. 이건 자동 저장 아닙니다. 저장 꼭 해야됩니다.

이제 세팅은 다 끝났습니다.

이제 에디터에서 코드를 넣는 일만 남았습니다.

코드 강조 플러그인을 사용하려면 <pre>요소로 코드를 감싸주면 됩니다.

사용 법은 다음과 같습니다.

<pre class="brush:js">
    /*
     *
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter &lt;= 10)
            return;
        // it works!
    }
</pre>

function check_jumin(){
  var temp=0;
  var yy=member.jm1.value.substring(0,2);
  var mm=member.jm1.value.substring(2,4);
  var dd=member.jm1.value.substring(4,6);
  var sex=member.jm2.value.substring(0,1);
  var last=member.jm2.value.substring(6,7);

  if(sex<=2){aa=19}else{aa=20};
  yy=aa+yy;

  if(sex==1 || sex==3) sexchar="남자";
  if(sex==2 || sex==4) sexchar="여자";

  var jumin=member.jm1.value+member.jm2.value;
  var mmm=[2,3,4,5,6,7,8,9,2,3,4,5];

  for(i=0;i<12;i++){
    temp=temp+(parseInt(jumin.substring(i,i+1))*mmm[i]);
  }

  temp=temp%11;
  temp=11-temp;

  if(temp==10) temp=0;
  if(temp==11) temp=1;

  if(last!=temp){
	document.getElementById("jm_chk").innerHTML="잘못된 주민번호입니다";
    document.member.jm1.value="";
    document.member.jm2.value="";
    member.jm1.focus();
	member.jm_ok.value=0;
	return false;
  }else{
  info=yy+"년 "+mm+"월 "+dd+"일생 "+sexchar;
  document.getElementById("jm_chk").innerHTML="올바른 주민번호입니다";
  document.getElementById("jm_info").innerHTML=info;
  member.jm_ok.value=1;
  return true;
  }
}

테스트용 주민번호 체크 자바스크립트입니다.