[NERD] Tistory Tip: 간단 CSS로 소스코드 강조하기

최근 TDD 워크샵에서 배운 내용들을 정리해 포스팅하면서, 티스토리는 소스코드와 함께 글을 쓰는 부분이 상당히 미흡한 것을 깨달았다.

내가 개발하면서 구글링할 때마다 그렇~~~~~게도 많은 결과가 tistory 블로그 포스팅이었는데.... 무슨일이지...??

당연히 있겠지 하고 글을 쓰다가 소스코드 하이라이트 템플릿? 기능이 없는걸 보고 당황....;;;;

무슨 인용구 강조는 있으면서... 소스 강조는 없냐아........... 카카오 뭐하냐....!!!

그렇다고 이렇게 일반글과 소스코드를 구별하지 않고 올려버리는건 너무 읽는 사람에게 배려가 없는 일이라고 생각되어..

스킨을 편집하기 시작했다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 

구글링해보니 하이라이터 js가 꽤 여럿 있긴하던데.. 나에겐 그닥 쓸모 없다고 생각되는 복잡한 기능들 때문에 수많은 js파일을 업로드하고, import하는게 비효율적이라고 생각했기 때문에 별로 쓰고 싶진 않았음 ㅡ,.ㅡ

당연히 구글링은 필수로 하였고,, https://codepen.io/elomatreb/pen/hbgxp 이 코드를 많이 참조했다.

CSS만 추가해서 소스코드 부분을 highlight할 거기 때문에 블로그 스킨의 CSS 코드를 건드려야하는데, 요게 어디있는지 모르는 사람들을 위해 알려주자면, 

블로그 관리 > 꾸미기 > 스킨편집 > HTML 편집을 선택하면 나오는 창에서

요 CSS 탭을 클릭하면 자기 블로그 스킨의 CSS 코드를 볼 수가 있다.

처음에 참조했다던 저 코드를 쓰윽 긁어다가 CSS에 넣었는데, 글 작성창의 html 태그만 좀 바꿔주면 동작하겠지? 했던 내 예상과 달리 line counter가 적용되지 않았다.

(tistory 글 작성 중에 오른쪽 위 □HTML를 체크해보면 작성 중인 글을 html형태로 바꿔볼 수 있다. 소스코드 CSS를 적용하려면 여기서 태그를 편집해줘야하니 참고해둘것.)

그래서 태그명도 티스토리 스킨 시스템이 인식할 수 있도록 하나하나 분리하고, editor html태그와 바로 호환되게 수정한 결과 다른 js처럼 특별한 기능은 없지만 소스코드를 강조할 수 있는 티스토리 전용 소스코드 템플릿 CSS를 완성했다. 

/* simple sourcecode highlighter_kilogramy */
pre {
  font-family: courier;
  background-color: #fff;
  padding: 0.5em;
  border-radius: .25em;
  box-shadow: .1em .1em .5em rgba(0,0,0,.45);
  line-height: 0;
  counter-reset: line;
  font-size:11pt;
}


pre > span {

    line-height: 1.3rem;
    counter-increment: line;
}


pre span:before {
      content: counter(line);
      display: inline-block;
      border-right: 1px solid #ddd;
      padding: 0 .5em;
      margin-right: .5em;
      color: #888
      -webkit-user-select: none;
}


pre > p {
    display: block;
    line-height: 1.3rem;
    counter-increment: line;
}






pre p span{
    display:inline-block;
}






pre p span:before{
    display:none;
}


pre p:before {
      content: counter(line);
      display: inline-block;
      border-right: 1px solid #ddd;
      padding: 0 .5em;
      margin-right: .5em;
      color: #888
      -webkit-user-select: none;
}


/* SSCHKGY */

사용법은 아래와 같다

1. 위 CSS코드를 본인의 블로그 CSS코드 부분에 삽입.

2. 글 작성시 소스코드를 일반 editor에 붙여넣기.

3. HTML 모드로 editor를 바꿔 본인이 붙여넣기한 소스코드의 앞 뒤에 <pre>, </pre> 태그 붙여주기.

(소스코드에 붙어있는 <p> 및 <span> 태그를 ★그대로 냅둘 것!★)

4. 발행을 누르고 확인하면 위 CSS 소스코드와 같은 템플릿으로 본인 코드가 보일 것이다~

물로 다른 소스코드 하이라이터들보다는 기능도 부족하고, 폰트 색상도 일관되는등 부족한점이 많지만 가볍게 그냥 소스코드인것만 보여주고 싶다! 하는 사람은 한번 시도해보길 바란다. //HTML모드에서 일반모드로 돌아와 글씨 색상을 바꾸는 방법으로 폰트 색 바꾸기 가능!

* 아쉬운점: line number가 한자리씩 늘어날때마다(ex. 9 -> 10 줄이 공백 하나만큼씩 틀어진다 ㅠㅠㅠㅠㅠㅠ)

해결법 아시는 분은 댓글남겨주세욜./..... 흑 ....