티스토리 소스코드 예쁘게 꾸미기 - Color Scripter

티스토리에 포스팅을 하기로 하면서 우선적으로 신경 쓴 것은 본문에 나타나는 소스코드를 얼마나 깔끔하고, 보기좋게 표현하는가였다.

초보 개발자로서 소스코드 검색을 할 때 조금만 더 깔끔하고 보기 좋았으면 하는 아쉬움이 컸기 때문이다.

다짐한대로 깔끔하게 표현하기 위해 검색을 통해 처음 접한 것은 SyntaxHighlighter(바로가기 클릭) 이라는 플러그인이었다.

티스토리 내에 적용하기 위해서 별도의 소스파일들을 업로드하고, 작성해서 올리긴 했는데 뭔가 살짝 아쉬운 마음이 들었다. 

모바일 어플내에서는 소스코드가 깔끔하게 표현되지 않고, html효과가 적용되어버리는 이슈도 있고해서 다시 찾아다녔다.

그렇게 해서 Color Scripter이라는 사이트를 알게 되었다. 별도의 플러그인 없이 깔끔하게 꾸밀 수 있다는게 가장 마음에 들었고, 모바일 어플로 확인해도 소스코드가 자연스럽게 출력되는 것을 보고 이거다 싶어서 바로 이런저런 테스트를 해보았다.

주소: https://colorscripter.com/

먼저 SyntaxHighlighter를 적용하고 포스팅했던 자료의 코드 부분이다. (PDF.js 간단한 사용법 - web상에서 pdf파일 보기)

web상에서는 깔끔하게 보이는데 css를 통해 작성하다보면 html과 글쓰기 모드를 왔다갔다하는 중에 span태그가 중복 발생하는 현상이 발생해서 몇차례 수정을 한 후 완성했던 소스코드였다. 그리고 사진을 남기지 못했지만 티스토리 모바일 어플로 봤을 때는 코드가 아닌 실제 iframe이 출력되며 그 안에서 404에러를 표시해주는 현상이 발생했다. 

기존 코드를 지우고, 오늘 알게된 Color Scripter를 적용해보았다.

한결 깔끔한데다 모바일 어플로 확인했을 때도 동일한 코드가 출력되니 마음에 쏙 들었다. 고로 앞으로 이 코드를 사용해서 계속 포스팅을 할 예정이다.

그리고 다음은 CSS 커스터마이징을 통해 약간의 차별화를 준 모습이다.

사실 소스코드 상에 border값을 통해 테두리까지 구현하려 했는데 radius효과(곡선처리)와 동시에 적용하지 못했다. 미리보기까지는 정상적으로 적용되는데...

발행하고 나면 아래와 같이 되버린다. 패딩값과 보더값 모두 적용하고자 했으나 실패. 

분명 다른 해결방법이 있을 것 같긴했지만 나중에 파헤쳐보기로 하고, 그나마 깔끔하고 쉽게 적용할 수 있는 선에서 사용하기로 한 것이 지금의 모습이다.

<div class="colorscripter-code" style="color: rgb(240, 240, 240); overflow: auto; font-family: Consolas, &quot;Liberation Mono&quot;, Menlo, Courier, monospace !important; position: relative !important; text-align: left;"><table class="colorscripter-code-table" style="margin:0; 
 padding:0;
 border:none; background-color:#272727;
 border-radius:10px 15px 0;" cellspacing="0" cellpadding="0" align="left"><tbody><tr><td style="padding:10px 15px; border-right:2px solid #4f4f4f"><div style="margin:0; padding:0; word-break:normal; text-align:right; color:#aaa; font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace !important; line-height:130%"><div style="line-height:130%">1</div><div style="line-height:130%">2</div><div style="line-height:130%">3</div></div></td><td style="padding:6px 0"><div style="margin:0; padding:0; color:#f0f0f0; font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace !important; line-height:130%"><div style="padding:0 6px; white-space:pre; line-height:130%">&lt;<span style="color:#ff3399">a</span>&nbsp;<span style="color:#a8ff58">href</span>=<span style="color:#ffd500">"web/viewer.html?file=samplepdf.pdf"</span>&gt;view&lt;/<span style="color:#ff3399">a</span>&gt;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&lt;<span style="color:#ff3399">br</span>&gt;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&lt;<span style="color:#ff3399">iframe</span>&nbsp;<span style="color:#a8ff58">src</span>=<span style="color:#ffd500">"web/viewer.html?file=samplepdf.pdf"</span>&nbsp;<span style="color:#a8ff58">style</span>=<span style="color:#ffd500">"width:500px;&nbsp;height:300px;&nbsp;border:1px&nbsp;solid&nbsp;#00c;"</span>&gt;&lt;/<span style="color:#ff3399">iframe</span>&gt;</div></div></td><td style="vertical-align:bottom; padding:0 2px 4px 0"><a href="http://colorscripter.com/info#e" target="_blank" style="color: white;"><span style="font-size: 9px; word-break: normal; background-color: rgb(79, 79, 79); border-radius: 10px; padding: 1px;">cs</span></a></td></tr></tbody></table></div><p style="text-align: left; clear: none; float: none;"><span style="font-size: 12pt;"><br /></span></p>
 

위의 모습대로 나타내기 위해서 초기설정값인 colorscripter-code class의 border-radius:4px와 첫번째 td의 padding: 6px를 각각 아래와 같이 수정해주었다.

border-radius: 5px 10px 0; 

padding: 10px 15px;

<css 코드상에 적용한 모습>

Color Scripter를 사용하는 방법은 https://colorscripter.com/로 접속한 후에 출력하고자 하는 소스코드를 붙여넣기, 스타일 패키지 및 기타 설정 등을 하면 된다. 

아래 사진은 언어와 스타일 패키지만 설정한 모습이다. 실시간 하이라이팅으로 되어있기 때문에 코드를 넣고 잠시 기다리면 사진처럼 색상이 적용되어 보기 좋게 변환이 된다. 확인해 보지는 않았지만 코드가 길 경우 시간이 조금 더 걸릴 것 같다. 

변환이 끝나면 한가지만 주의해주면 된다.

텍스트 직접 복사가 아닌 반드시 하단의 '클립보드에 복사'를 눌러서 복사해야 한다는 것!

텍스트를 복사해서 넣으면 일부 코드가 복사되지 않아 불완전하게 출력되니 꼭 '클립보드에 복사' 버튼을 통해 복사한 후 포스팅하는 자료에 붙여넣기 해주어야 한다.