kiyoja story

0. " Color Scripter을 이용하여 구글 블로그에 코드 올리기 " 포스팅을 통해 Color Scripter 을 이용해서 구글 블로그에 소스 코드를 업로드할 경우 화면이 일그러지는 문제점을 확인하고 대안을 찾았다. 1. hilite.me 구글 블로그에 소스 코드를 올리기 위해 hilite.me (http://hilite.me/)를 사용해 보았다. 먼저 hilite.me 에 접속한다. 아래와 같은 화면을 확인할 수 있다. 2. 좌측의 Source code 부분에 테스트할 코드를 작성하거나, 복사하여 붙여 넣는다. 코드를 작성하고 Language: Javascript, Style: monokai를 선택하고 Line numbers를 체크하면 아래와 같다. 3. 우측의 HTML의 코드를 복사하고, 구글 블로그를 "글쓰기" 모드에서 "HTML"모드로 바꾼 후 원하는 위치에 복사한 코드를 삽입한다. 코드 삽입 후 다시 "글쓰기" 모드로 돌아오면 아래와 같이 코드가 삽입된 것을 확인할 수 있다. 1 2 3 4 5 function init () { console . log ( "Hello World" ); } init (); 4. 실제 포스팅된 이미지도 일그러짐이 없는 것을 확인했다. 이상 없다. 끝.

컴퓨터 프로그래밍을 공부하다보면, 이런 저런 이유로 블로그를 운영하는 경우가 많다. 블로그에서 코드를 정리할 때 이왕이면 이쁘게 올리는 게 좋다. 여러 방법들이 많지만, 이번엔 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 의 다른 옵션들을 조절함으로써, 화면이 일그러지는 문제점을