Color Scripter을 이용하여 구글 블로그에 코드 올리기

컴퓨터 프로그래밍을 공부하다보면, 이런 저런 이유로 블로그를 운영하는 경우가 많다.
블로그에서 코드를 정리할 때 이왕이면 이쁘게 올리는 게 좋다.

여러 방법들이 많지만, 이번엔 Color Scripter을 이용해 코드를 블로그에 삽입하는 방법을 알아본다.

1. Color Scripter(https://colorscripter.com/)에 접속한다.
- 로그인을 하지 않아도 사용할 수 있다.

2. 코드를 직접 입력하거나, 붙여넣기를 한다.
- 언어, 스타일패키지를 설정할 수 있다.
- 아래 이미지는 "언어: Javascript", "스타일패키지: 서브라임 블랙"으로 설정한 화면이다.

3. 세부설정 항목을 클릭하고 기타 항목의 "HTML" 태그 자체 복사"를 체크한다.

4. 코드 작성을 마친 후, 좌측 하단의 "클립보드에 복사"를 클릭한다.
"코드가 클립보드에 복사되었습니다"라는 토스트 팝업이 나타났다가 사라진다.

5. 구글 블로그의 "HTML"을 클릭하고 코드를 삽입할 곳에 붙여넣기를 한다.
아래 이미지와 같이 HTML 코드로 복사 된다. 제일 밑에 붙여넣기한 예시이다.

6. 다시 "글쓰기" 모드로 돌아오면 붙여넣기한 코드 이미지를 확인할 수 있다.

1 2 3 4 5

function init() {     console.log("hello world"); } init();

cs

7. 글쓰기 모드에서는 잘 보이지만, 실제 포스팅된 화면은 일그러져 있는 문제점이 있다.
글쓰기 모드에서 확인한 이미지는 아래와 같다. 잘 보인다.

하지만 실제 포스팅된 이미지는 아래와 같이 일그러져 보인다.

8. Color Scripter의 다른 옵션들을 조절함으로써, 화면이 일그러지는 문제점을 해결할 수도 있겠지만, 귀찮은 관계로 다른 방법을 알아보는게 낫겠다.

끝.