블로그에 소스코드 이쁘게 넣기

블로그에 소스코드
이쁘게 넣는 방법

BY ROMEONEWS

블로그 글을 쓸때 html, css 를 공유하려고 할때 태그작동이 될까봐 별모양을쓰거나 하는경우를 많이 봤다.

이번에 소개할사이트는 원하는 프로그램 언어에 맞게 바로 클립보드에 복사할수있는 사이트를 소개시켜주겠다.

좀더 이쁘게 나올수있고 자체적으로 스크롤바도 생기기때문에 굉장히 유용하다.

예를 든 태그는 현재 내블로그에 적용된 "다른카테고리글 원형꾸미기에 사용된 css 언어이다.

홈페이지 링크

 

https://colorscripter.com

위 사이트로 가게되면

원하는 언어, 스타일 패키지등 적용할수있다.  확장 스토어를 통해서 기존에 사용하고있는사람들의 추천 언어팩/패키지가 있으니 이를 바로 적용하면 된다.

원하는방식으로 만들게 되면 이메일로 공유하거나 클립보드로 복사할수있는 아이콘이 우측 아래에 생기게된다.위에서 예를 들었던 css 태그를 만들어보면 

div.another_category tr:nth-child(1) a:before {content: "1"; padding: 2px 6px; border-radius: 100%; border: 2px solid #ddd; margin-right: 5px; color: #e0557d;}
div.another_category tr:nth-child(2) a:before {content: "2"; padding: 2px 6px; border-radius: 100%; border: 2px solid #ddd; margin-right: 5px; color: #e0557d;}
div.another_category tr:nth-child(3) a:before {content: "3"; padding: 2px 6px; border-radius: 100%; border: 2px solid #ddd; margin-right: 5px; color: #e0557d;}
div.another_category tr:nth-child(4) a:before {content: "4"; padding: 2px 6px; border-radius: 100%; border: 2px solid #ddd; margin-right: 5px; color: #e0557d;}
div.another_category tr:nth-child(5) a:before {content: "5"; padding: 2px 6px; border-radius: 100%; border: 2px solid #ddd; margin-right: 5px; color: #e0557d;}
div.another_category tr:nth-child(6) a:before {content: "6"; padding: 2px 6px; border-radius: 100%; border: 2px solid #ddd; margin-right: 5px; color: #e0557d;}
div.another_category tr:nth-child(7) a:before {content: "7"; padding: 2px 6px; border-radius: 100%; border: 2px solid #ddd; margin-right: 5px; color: #e0557d;}
div.another_category tr:nth-child(8) a:before {content: "8"; padding: 2px 6px; border-radius: 100%; border: 2px solid #ddd; margin-right: 5px; color: #e0557d;}
div.another_category tr:nth-child(9) a:before {content: "9"; padding: 2px 6px; border-radius: 100%; border: 2px solid #ddd; margin-right: 5px; color: #e0557d;}
div.another_category tr:nth-child(10) a:before {content: "10"; padding: 0 6px; border-radius: 100%; border: 2px solid #ddd; margin-right: 5px; color: #e0557d;}

위와같이 쉽게 만들수있다^^ 

세부설정에서 다양한설정이 가능하다. 

즐겨찾기 고고싱