본문 바로가기

It인터넷

네이버 ,티스토리 블로그에 소스코드 멋지게 표시하기(Feat. Color Scripter)

티스토리나 네이버 블로그에 코드를 넣고 싶은데 

방법을 모르시겠다구요?

 

혹은

블로그에 소스코드를 복사 붙어넣기로 넣고 계신가요?

 

 

<example 소스코드>

 

public class Test { 

public static void main(String[] args) { 

System.out.print("안녕하세요 스타트제로에 오신 걸 환영합니다.");

 }

}

 

 

먼가 소스코드가 깔끔하지 않으시죠.

그래서 준비했습니다.

블로그에 소스코드 멋지게 표시하기를 알아보도록 하겠습니다.

 

<사용법>

1. Color Scripter 웹사이트에 접속합니다.

https://colorscripter.com/

 

Color Scripter

Simple & Flexible Syntax HighLighter

colorscripter.com

 

2. 자신이 작성한 코드나 예제를 입력합니다.

 

 

3. 언어를 자동으로 두시거나 원하시는 언어로 바꿉니다.

(저는 소스코드를 입력하니까 자동으로 언어를 잡더라구요)

 

(지원언어:Text, ActionScript, ASP, Bash, C, C#, CSS, HaXe, HTML, Java, JavaScript, JSP, MarkDown, Objective-C, Perl, PHP, Python, Ruby, SQL, Swift, VisualBasic, XML)

 

사실 지원언어에 나와 있지않은 언어여도

블로그에 표시할 수 있습니다.

지원언어의 의미는

각 언어의 기능별로 색깔을 구분해서 

표시할수 있냐 없느냐 인것 같습니다.

 

4.스타일 패키지배경을 원하시는 것으로 바꿉니다.

(저는 스타일 패키지는 서브라임 블랙, 배경은 단일 색상으로 하였습니다.)

 

 

5.오른쪽 하단에 "HTML로 복사" 클릭 하시면 됩니다.

(클립보드에 복사도 가능하지만 2020년 부터 크롬 브라우저에서 Adobe Flash Player가 지원이 안되기도 하고,클립보드에 복사를 누르고 Adobe flash 실행 허용 누르니까 새로고침 되서 코드가 날라갑니다ㅠㅠ 주의해주세요.)

6. 마지막으로 글쓰기 에디터에 오셔서 html 창에 붙어넣기하시면 

 

짜잔!!!

1
2
3
4
5
6
7
8
9
public class Test { 
 
public static void main(String[] args) { 
 
System.out.print("안녕하세요 스타트제로에 오신 걸 환영합니다.");
 
 }
 
}
cs

 

멋지게 표시 되는 걸 보실 수가 있습니다.

 

개발자인 저는 주로 코드에디터 "Visual Studio"나 "Atom" 쓸때

위에 소스코드처럼 검은 색 배경화면에 많이 쓰거든요.

왜냐하면

일단 눈이 편하고 가독성이 좋고

먼가 멋진 느낌이 납니다. 

완전 추천합니다.

 

코딩 관련 블로그,

개발자분들 기록,강좌하실 때

유용하게 쓰이실 것 같습니다.

 

또한 

각각언어별 기능대로 코딩 색깔이 나누어져 있어 

코드 분석이 용이할것 같습니다.

저도 앞으로 자주 쓸 것 같네요.

 

 

오늘도 행복한 하루되세요.^^

감사합니다.