티스토리 블로그에 소스코드 넣기 ColorScripter

< 내가 자주 애용하는 ColorScripter 사이트를 이용해서 만든 소스 코드 >

저번 포스팅에서는 SyntaxHighlighter 라이브러리를 사용한 티스토리 블로그에 소스코드 넣기를 소개했지만,

이번 포스팅에서는 SyntaxHighlighter 처럼 라이브러리를 다운로드 받을 필요 없을 뿐 아니라,

쉽고 간편하게 소스 코드를 넣을 수 있는 ColorScripter 사이트를 이용해서

티스토리 등 블로그에 소스 코드를 넣어보자!

1. ColorScripter 사이트에 접속

ColorScripter 사이트에 접속하면 된다.

주소 : http://colorscripter.com/

아래 화면이 우리를 반긴다~

2. 소스 코드 입력

먼저, 언어를 설정한다.

자동으로 설정되어 있지만, 인식을 못하는 경우도 있을 수 있으므로...

그 다음에, 소스 코드를 복사 붙여넣기 ( 또는 입력 ) 한다!

그럼 예쁘게 하이라이팅된 결과를 실시간으로 보여준다!

3. 소스 코드 복사

사이트 우측 하단에 두 개의 버튼이 있는데, 그 중에서도 오른쪽 버튼인 "클립보드에 복사" 버튼을 누른다!

화면 정 중앙에 이런 메시지가 뜨면서, 복사에 성공한다!

티스토리 에디터에서 붙여넣기 CTRL+V 하면 끝이다!

#include <stdio.h>
 
// 주석입니다.
 
int main(void) {
 
    printf("안녕하신가?");
    return 0;
 
}

4. 소스 코드 공유 ( 서버에 저장 )

이번에 공유하기 버튼을 누르면, 소스 코드를 서버에 저장하여 다른 사람들에게 보여줄 수 있다!

위 소스에 대한 링크가 나온다!

---

#include <stdio.h>
 
// 주석입니다.
 
int main(void) {
 
    printf("안녕하신가?");
    return 0;
 
}

소스 코드 원본 보기

---

5. 테마 입히기

엇, 그런데 맨 위의 소스 코드 사진과 바로 위의 예제 소스 코드 사진과 디자인이 다르다!

맨 위의 소스 코드는 바로 테마를 입힌 것이다.

기본적으로 ColorScripter 사이트에서 3가지 테마를 제공해준다.

테마를 선택하면, 그 테마대로 소스 하이라이팅 디자인이 바뀐다!

아래는 핑크 레몬에이드 테마와 서브라임 블랙 테마를 입힌 결과이다.

#include <stdio.h>
 
// 주석입니다.
 
int main(void) {
 
    printf("안녕하신가?");
    return 0;
 
}

그 다음에 다시 소스코드를 치는 화면으로 돌아와서 새로고침을 한다면!

아래 처럼 테마가 추가되어있다!

< 테마 추가 전 >

< 테마 추가 후 >

#include <stdio.h>
 
// 주석입니다.
 
int main(void) {
 
    printf("안녕하신가?");
    return 0;
 
}

< Urban Lights 테마 적용 >

그러나, 사이트를 다시 접속하다보면 적용한 테마가 사라져있다!

적용한 테마를 유지하기 위해선 회원가입을 해야한다.

---

( ColorScripter 기부 페이지 )

ColorScripter 개발자분께 정말 감사하고, 사이트 잘 이용하고 있습니다!

댓글과 트랙백 환영합니다.