본문 바로가기

🌎 웹

[팁] Color Scripter 사용법 (코드 꾸미기)

안녕하세요 오늘은 Color Scripter에 대해 적어보겠습니다.

 

먼저 Color Scripter이란!

 

https://colorscripter.com/

 

Color Scripter

Simple & Flexible Syntax HighLighter

colorscripter.com

위에 이미지는 C언어나 javascript등등

코딩에대해 검색해보신 분들은 한번쯤은 보셨던 화면일거에요ㅎ

 

코드를 좀 더 보기좋게 만들어주는 사이트입니다!

저도 티스토리에 글쓸때 자주 애용하는 사이트이기도합니다.

 

위에 링크를 타고가면 위에 이미지처럼 볼 수 있습니다!

 

사용법은 간단합니다!

 

"언어"를 선택하고,

"스타일패키지"를 선택한 후,

"배경"도 선택해줍니다.

 

그리고 클립보드에 복사를 누르고

글쓰기 에디터에 코드를 붙여넣어 주면 끝인데요!!

 

여기서 잠깐 제가 사용하는 설정은 이렇습니다.

저는 "HTML태그 자체 복사"를 체크 한 후 클립보드에 복사를 합니다.

그럼 붙여넣은 화면은?

 

2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function Unix_timestamp(t){
  var dt = new Date(t*1000);
  var ye = dt.getFullYear();
  var mo = "0" + (dt.getMonth()+1);
  var da = "0" + dt.getDate();
  var ho = "0" + dt.getHours();
  var mi = "0" + dt.getMinutes();
  var se = "0" + dt.getSeconds();
  return ye + "-" + mo.substr(-2+ "-" + da.substr(-2+ " " + ho.substr(-2+ ":" + mi.substr(-2+ ":" + se.substr(-2) ;
}
 
// replaceAll함수 구현
function replaceAll(str, searchStr, replaceStr) {
  return str.split(searchStr).join(replaceStr);6
}
 
function Enter_Check(){
  // 엔터키의 코드는 13입니다.
  if(event.keyCode == 13){
    document.getElementById("addr-search").click();
  }
}
cs

위에 코드는 제가 자주사용하는 자바스크립트(javascript) 함수들입니다.

아무튼 위에 처럼 스타일이 씌워진 상태로 붙여넣어집니다.

 

저는 이 방법으로 코드를 붙여넣고 있고

계속 이 방법으로 코드를 보기좋고 깔끔하게 사용할 예정입니다!

 

여러분들도 Color Scripter를 사용해보세요!