티스토리 뷰
개발 블로그를 운영을 하게 되면 포스팅에 소스코드를 같이 첨부해야 할 일이 많습니다.
매번 소스코드 부분을 캡쳐하고 저장하고 에디터에 다시 사진을 올리는 반복작업을 많이 하게 되면서 글을 쓰는데 제법 많은 시간을 소비하는 것 같습니다.
소스코드를 쉽고 빠르게 내가 작성하는 글에 삽입할 수 있도록 도움을 주는 사이트를 하나 소개하고자 합니다.
https://colorscripter.com/
위 사이트를 접속하게 되면 에디터 페이지가 뜨게 될 것입니다.
따로 설정 할 필요없이 게시하고자 하는 소스코드를 바로 에디터에 복사 붙여넣기를 해줍니다.
언어종류에 상관없이 소스코드를 넣게 되면 실시간 하이라이팅 기능으로 본인이 넣은 소스코드의 언어를 자동으로 감지하여 그에 맞게끔 소스코드가 이쁘게(?) 나오게 됩니다.
아래는 html 코드를 삽입 한 형태입니다.
혹시 소스코드가 하이라이팅이 되지 않는다면
아래 사이트 화면 우측 상단에 실시간 하이라이팅이 Check 되어 있는지 확인해주세요
그래도 만약 안된다면 왼쪽 상단에서 언어를 직접 선택하는 수 밖에 없습니다.
소스코드를 넣으셨다면 이번엔 페이지 좌측 아래에 '클립보드 복사'를 클릭해줍니다.
그다음 티스토리 블로그 에디터로 돌아와서 소스코드를 넣고자 하는 부분에 커서를 두고 붙여넣기를 하게 되면 아래와 같이 소스코드가 이쁘게(?) 나오게 됩니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div> <ul> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> <li>Menu4</li> <li>Menu5</li> </ul> </div> </body> </html> | cs |
사실 캡쳐를 해서 사진으로 올리는 것과 별 차이가 없어보이긴 하지만
익숙해지면 시간 절약이 되는 것 같아요. 게다가 ColorScripter로 넣은 소스코드는 편집이 가능합니다.
그리고 제가 넣은 것 처럼 전체적인 테마(?) 변경도 가능합니다.
메뉴에서 스타일패키지 부분을 클릭하면 코드 하이라트에 사용할 스타일패키지를 선택 할 수 있습니다. (3개 뿐이지만 ...)
세부설정으로 들어가시면 여러가지 설정 값을 바꿀 수 있습니다.
소스코드 줄 사이의 간격, 복사를 할 때 줄번호까지 같이 복사를 할 것인지, 줄번호 시작순서도 변경 할 수 있습니다.
HTML 태그 자체 복사를 Check 하게 되면 클립보드를 복사 하였을 때 HTML 태그 자체가 복사가 됩니다. 이런식으로 복사를 하였을 경우 에디터에서 HTML 모드로 변경 한 후 소스코드를 넣고자 하는 부분을 찾아서 직접 넣어줘야 합니다.
(글에 소스코드를 넣는게 목적이라면 Check를 안하시는 걸 추천합니다)
비슷한 기능을 제공하는 것으로 Syntax Highlighter 이라는 것도 있는 것 같던데
초기 설정이 복잡해 보일길래 접었습니다..
나중에 기회가 되면 한번 써보긴 할테지만 당분간은 ColorScripter를 쓰는걸로..