블로그 소스코드 예쁘게 만들어보기

제가 블로그 시작을 개발정보로 스타트를 하였습니다. JAVA로 시작하여 C#이나 JAVASCRIPT, JQUERY 등의 소스를 설명할 일이 많이 있는데 블로그용 소스 하이라이트 기능이 너무 사용하기가 어려워서 실제적으로 사용을 제대로 못하고 캡쳐를 해서 대처를 하고 있었습니다. 당연히 블로그에 방문을 하시는 분들은 소스를 복사한다던지 그런 행위자체가 안되어서 실망을 많이 하셨을듯합니다. 제가 첨부파일로 올린다고 해도 번거롭게 다운을 하셔야 하니까요.

 

 

http://linguist79.tistory.com/21

 

이전에 포스팅한 SyntaxHighlighter입니다. 이게 사용하기가 은근히 힘들어서 서식으로 양식을 만들고 소스가 있을때 불러오거나 하면 HTML모드로 이동을하고 왔다갔다하면서 그렇게 해야 되는게 너무 불편하더라구요.

 

2017/06/16 - [마케팅/블로그] - 티스토리 댓글 프로필이미지 오류 수정

2017/06/15 - [TIPS] - ico 파일 순식간에 만들기

2017/06/13 - [마케팅/블로그] - 블로그스팟 테마지원 되고 있었네요.

2017/06/14 - [마케팅] - 카카오 플러스친구 등록 안내

2017/06/12 - [마케팅/블로그] - 티스토리 하단 목록 추가방법

 

블로그 소스코드 예쁘게 만들어보기

 

아이티블로그를 운영하는데 있어서 소스를 예쁘게 표시를 하는건 정말 중요하다 생각합니다. 위에서 표기한 SyntaxHighlighter로 가끔씩 소스를 정리하긴 하는데 블로그마다 크기나 사이즈 조정이 조금씩 안맞고 무엇보다 뭔가를 수정하려면 너무 귀찮아져서 그게 힘들었습니다. 따른 대안법이 없을까 고민을 하다가 좋은 사이트를 발견하여서 이렇게 포스팅하게 되었습니다.

 

사이트 명칭은 컬러스크립터이며, 사용하고자 하는 코드를 복사해서 변환시키고 공유버튼 하나로 공유를 손쉽게 할수 있는 것이 장점입니다.

 

 

사이트바로가기 : 컬러스크립터

 

우선 홈페이지에 접속을 해보겠습니다. 화면 구성은 아래와 같습니다. 심플하게 간단한 메뉴와 하단 커서가 깜빡이는게 보이는데요. 여기에 소스를 그냥 붙여넣기만 하면 됩니다. 그리고 공유버튼을 클릭을 해주셔서 블로그에 가져오는 것인데요. 한번 실행해보겠습니다.

 

 

 

 

메인화면입니다. 처음에는 아무것도 없는 상태로 커서만 깜빡이는데, 언어선택으로 소스용으로 사용할 언어를 선택하여 주세요. 제경우에는 PHP로 선택을 하였는데, 실재 사용한 소스는 자바스크립트입니다.^^

 

왠지 코드가 길어질것 같아서 자바스크립트로 선택을 하였는데, 이미 캡쳐를 전부 해놓아서 수정도 못하겠네요ㅎㅎ

 

 

 

 

 

소스를 붙여넣고나서 공유하기 버튼을 클릭하면 즉시 공유가 가능합니다. 클릭보드로 바로 복사하는 기능도 지원을 하네요.

 

 

 

첫번째 메뉴 언어선택입니다. 다양한 언어가 지원되고 있는데요. 저희가 사용하는 거의 모든 언어는 다 보이는것 같습니다. 원하시는 언어를 선택하여주세요.

 

 

 

 

지원되는 언어가 너무 많아도 혼잡한데, 딱 쓰는것만 보이니 간단해서 좋은 것 같습니다.

 

 

두번째는 배경스타일 지정도 가능한데요. 여기까지 지원이 될줄 몰랐습니다. 블로그 소스코드 보는 플러그인들은 세팅을 하기가 힘들뿐만아니라 일괄 적용이기에 개별적으로 적용이 안되는게  참 아쉽더라구요.

 

 

이런식으로 세가지 메뉴에서 1가지를 고를 수 있습니다. 블랙톤이 처음보면 이상하게 느껴지실 수도 있는데 장시간 코딩하기에 이만한 색상은 없는 것 같습니다.

 

 

 

 

 

다음으로 배경의 색상을 지정하는 기능입니다. 살펴보니 투명하게 하느나, 단일색상이나 이중으로 배경색상을 스타일링하느냐 하는 옵션인것 같네요.

 

 

 

 

 

마지막 세부설정사항입니다. 일반적으로 사용을하기에는 크게 문제가 없을듯한데 모바일버전을 생각해서인지 크기까지 세팅을 가능하게 지원이 되는군요.

 

 

 

우선 샘플 소스는 다음과 같습니다.

 

 

<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src ="b_blue.gif";
}
function mouseOut()
{
document.getElementById("b1").src ="b_pink.gif";
}
</script>

 

이렇게 블로그에 직접 서식을 만들어서 올리면 이런식으로 단조롭게 나타나며 하나하나 소스에 색을 칠해줄수도 없는 노릇이라 소스를 보기에는 너무 힘든것 같습니다.

 

 

그래서 변환을 해보았습니다. 소스코드를 붙이고 간단하게 캡쳐한뒤 공유소스를 받아서 기재를 하는 방식이었습니다.

 

 

이처럼 업로드가 되면 공유할 수 있는 코드가 생성됩니다. 이코드로서 소스를 왔다갔다 손쉽게 정리하고 볼 수가 있게 되어 있네요.

 

코드는 아래와 같습니다 .제가 기대한건 블로그내에서 위젯이나 아이프레임으로서 소스를 직접삽입하는 방식을 원했는데 이부분 만큼은 아쉽습니다.

 

 

변환소스 코드 : http://colorscripter.com/s/xGtCM3n

 

 

소스는 이처럼 표기가 됩니다. 여러분들도 한번 방문하셔서 소스를 확인해보세요.  이처럼 변환을 시키고 캡쳐를 해서 붙여 넣으면 훨씬 편하게 소스코드를 블로그에 넣을 수 있습니다. 사진을 직접캡쳐해서 불이니 드래그가 안되어서 문제가 생겼는데, 공유코드를 제공하니 그걸로 받으실 수 있게 확용하면 좋을것 같습니다. 잘 활용하셔서 블로그 잘 꾸며보세요