Code highlighter 도전기

아무래도 개발을 위한 블로그다 보니 코드를 삽입할 경우가 많을거 같아 코드 삽입 법을 찾아봤는데 기본적으로 <pre> 태그를 html모드로 변경해 삽입 하는 엄청난 노가다를 구글에서 지원해준다.😲(구글이 그럴리 없어!)
코드쓰고 -> html모드로 바꾸고 -> 앞뒤로 <pre></pre>삽입.... 엄청난 노가다라 이런 비효율을 줄이기 위해 검색하던중 사이트 하나를 발견했다.

http://hilite.me/ 

여기 사이트로 가면 코드를 넣고 hilight를 하면!

1 2 3

fun (){ hell low }

이렇게 깔끔하게 코드가 나온다 .
사이트로 이동해서 코드를 쓰고 -> 이미지에 나온것처럼 HTML코드를 복사해서 -> html모드로 바꾸고 -> 삽입!
야호! 코드 시작과 끝을 찾는 번거로움이 사라졌다...😂
그래도 초반엔 엄청난 도움이 되서 사용을 하다가 다시 다른 사이트를 찾게됐다.

https://colorscripter.com/

이번에 찾은 사이트는 코드를 작성하고 우측하단에 클립보드 복사 한번 누르고 html모드 변경없이 바로 ctrl+v 만 해주면

요렇게 깔끔한 코드를 미리보기를 하지 않아도 볼수가 있다.🙌

하.지.만. 여기서 끝이 아니었다 작성하고 보니 사용하는 템플릿 css에 문제가 있는지 줄이 맞지 않았다..

.... 음... 그렇다 뭔가 잘못됐다. 뭔진 모르지만 잘못됐다..

css를 만저본 적이 많이 없으니 크롬의 개발자모드를 켜고 속성을 하나씩 바꿔가면서 문제를 탐색했다.

결국 위치 태그를 찾고 인터넷 검색을 통해 css로 태그 선택을 하고

1 2 3 4

.colorscripter-code-table td:first-child div div {     white-space: pre; !important; } Colored by Color Scripter

cs

해당 속성을 넣어줬더니 완벽하진 않아도 나름 볼만해졌다.

내가 못찾는건지 원래 이런건지 모르겠지만.. 어서 코드 삽입방식의 최적화된 방법을 찾아 적용해보고 싶다.😓