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

안녕하세요 오늘은 티스토리 블로그에 소스 코드를 예쁘게 넣는 방법에 대해 포스팅하겠습니다.

 

사실 텍스트로 타이핑해도 그만이지만 예쁘게 하이라이팅 되어 들어가는 코드가 더욱 가독성 측면에서 이해하기 쉬운 건 모두가 느끼실 겁니다. 여러 코딩 블로그들을 돌아다니면 대부분 하이라이팅이 완료된 코드가 포스팅되어 있는 걸 확인하실 수 있습니다.

티스토리 글쓰기에서 제공하는 코드블럭 및 다양한 방법이 있겠지만 오늘은 Color Scripter라는 사이트를 소개하겠습니다.

 

Color Scripter는 https://colorscripter.com/ 를 통해 들어갈 수 있습니다.

(크롬 브라우저를 권장합니다. 익스플로러는 실시간 하이라이팅을 지원하지 않습니다.)

 

사이트를 들어가면 아래와 같은 모습입니다.

 

 

언어와 원하는 스타일 패키지를 작성하여 코드 블럭을 작성하면 아래와 같습니다.

 

 

이제 하단의 [HTML로 복사] 버튼을 클릭하여 HTML서식을 복사하면 코드블럭을 옮길 수 있습니다.

 

 

다시 본인의 티스토리 블로그로 돌아와 글쓰기 창에서 HTML이 익숙하신 분들은 기본모드에서 HTML모드로 전환하신 후 원하는 위치에 복사한 HTML 태그들을 붙여 넣으시면 됩니다.

HTML이 익숙하지 않으신 분들은 마크다운 모드에 들어가셔서 작성하신 텍스트들의 상단/하단/중간부 등 원하는 곳에 붙여 넣으시면 됩니다. 

 

                                                                                                                                                        

 

 

 

결과물을 확인하기 위해서는 다시 기본모드로 들어가시면 코드가 예쁘게 들어가 있는 것을 보실 수 있습니다.

 

 

이상 티스토리 블로그에 color scripter를 이용해 소스코드 포스팅하는 방법이었습니다.

질문은 댓글 남겨주세요~