구글 블로그에 HTML, CSS, JS, C++ 같은 여러 언어 코드 본문에 넣는 방법
이런 부분에서는 티스토리가 확실히 한 수 위이긴 합니다. 글로벌 블로그 플랫폼이라는 이름이 무색할 정도로 구글 블로거(Blogger)는 여러모로 불편한게 많습니다. 일단 코드입니다. 티스토리는 코드블럭이라는 기능이 있어서 자체적으로 여러 코딩 언어들을 편리하게 본문에 넣을 수 있는데 구글 블로거에는 그런 기능이 없습니다. 따라서 별도의 힘을 빌려서 본문에 넣을 수 있는데 다행히 어떤 능력자께서 이 부분을 아주 말끔히 해결할 수 있는 길을 제시해 주셨습니다.
Color Scripter
바로 컬러 스크립터라고 하는 플랫폼입니다. 과거에는 후원을 받아서 운영중이었던 것 같은데 지금은 무슨 이유에서인지 후원을 받지 않고 있습니다. 개인 서버로 운영하시는 것 같은데 대단하네요.
|
1
2
3
|
<div>
<h2>안녕하세요. 친절한효자손 입니다.</h2>
</div>
|
cs |
먼저 결과부터 보여드리자면 위의 화면처럼 본문에 삽입됩니다. 티스토리의 코드블럭을 사용하지 않았습니다. 컬러스크립터를 이용해서 본문에 넣은 것입니다. 그러면 어떻게 넣는지 바로 살펴보겠습니다.
Color Scripter
Simple & Flexible Syntax HighLighter
colorscripter.com
먼저 위의 공식 홈페이지에 접속합니다.
구글 블로그 본문에 삽입하고자 하는 코드를 입력합니다.
언어는 기본적으로 자동에 선택되어 있을텐데 해당 코드의 언어로 변경해 줍니다. 그래야 이쁜 코드 색상이 적용됩니다.
또한 스타일패키지 부분에서 코드박스의 디자인 변경도 가능합니다. 기본, 핑크 레몬에이드, 서브라임 블랙 이렇게 세 개의 테마를 제공하며 저는 블랙 백그라운드를 좋아해서 서브라임 블랙을 선택했습니다.
세부설정 버튼을 눌러서 기타의 HTML태그 자체 복사에 체크를 합니다. 글꼴 부분은 어차피 본인의 PC에서만 적용되는 부분이기에 원하는 글꼴을 넣어도, 넣지 않아도 그만입니다. 글꼴 설정은 꼭 필요한 과정이 아닙니다.
이제 다 되었습니다. 오른쪽 하단에 있는 HTML로 복사 버튼을 누릅니다.
기본적으로 모든 코드가 자동 전체 선택되어 있을겁니다. Ctrl+C를 눌러 복사 후 닫기 버튼을 누릅니다.
이제 구글 블로그의 글쓰기 모드를 HTML 보기 모드로 변경합니다.
본인이 원하는 위치에 방금 복사한 컬러스크립터 코드를 그대로 붙여넣기 합니다. 저는 코드 정리를 했기 때문에 코드들이 많이 늘어난것처럼 보일 뿐, 정리하지 않은 코드와 기능적인 부분은 차이가 없습니다. 이제 작성 완료 후 완성된 문서를 살펴보시면 완벽하게 적용된 컬러코드의 코드블럭을 확인할 수 있을겁니다.
CSS 추가 설정
다만 순정 코드 스크립터에서는 줄바꿈이 일어나지 않아서 코드가 다소 긴 경우에는 가로 스크롤이 생겼을 겁니다. 이걸 해결하는 방법 또한 간단합니다.
/* 가로 사이즈 100% 확장 */
div.colorscripter-code > table.colorscripter-code-table {
width: 100%;
}
/* 자동 줄바꿈 */
div.colorscripter-code > table.colorscripter-code-table tr td:nth-child(2) > div > div {
white-space: normal !important;
}이 코드를 구글 스킨의 CSS 영역에 붙여넣기 합니다. 아래에 코드가 담긴 메모장을 첨부했으니 다운받아서 편하게 복사해 가시면 됩니다.
구글 블로거의 경우에는 <b:skin>부터 끝나는 </b:skin> 태그 영역의 안쪽에 위치한 CSS 코드 영역에 붙여넣기를 하면 됩니다. 스킨마다 상이할 수 있기에 이 이상 자세한 설명은 불가한 점 양해 부탁드립니다. 오늘 내용 끝!
