본문 바로가기
정보공유/알면 좋은 것들

아주 간단하게 소스코드 넣기/ 소스코드 하이라이트하기 / 소스코드 가독성 높이기

by 크라크라 2018. 3. 23.

티스토리, 네이버 블로그, 구글 블로그스팟, 각종 웹페이지 등에서 자신의 소스코드를 공유하는 쉬운 방법 두 가지를 소개하겠습니다. 


사실 저도 소스코드 공유하는 방법을 알아봤다가 (1) 귀찮기도 하고 (2) 간혹 각종 반응형으로 웹페이지 디자인이 복잡하게 얽혀 있는 경우 제대로 반영이 안되는 문제 (특히 제 티스토리 블로그에서..) 가 있어서 소스코드를 홈페이지에 거의 올리지 않았습니다. 그런데 이것들을 이용하면, 훨씬 간단하고 손쉽게 올릴 수가 있네요.


 이번 포스팅에서 알려드릴 것은 칼라 스크립터(Color Scripter) 혹은 하이라이트미(hiliteme) 입니다. 하나는 좀 더 웹페이지가 예쁘고, 하나는 웹페이지가 굉장히 투박하지만 둘 모두 매우 간단하게 사용할 수 있습니다. 


왼쪽에 있는 것이 Color Scripter , 오른쪽에 있는 것이 hiliteme 입니다. 칼라 스크립터 같은 경우에는 PC 버전, 웹버전을 모두 지원하지만 아무래도 상대적으로 쓰기 편한 것은 웹버전이겠죠. 


 




<칼라 스크립터 사용 방법>


 1. 소스코드를 강조하고 싶은 스타일을 각 박스에서 선택합니다. 


(1) 언어 (2) 스타일 패키지 (3) 배경 (4) 세부 설정


- 언어 : Text, C#, Ruby, Python 등 기본적인 언어의 문법 유형을 모두 지원합니다.

- 스타일 패키지 : 기본 배경 색상, 문법 강조의 색상 등을 변경할 수 있습니다.

- 배경 : 큰 의미가 없습니다. 신경 끄셔도 되겠습니다

- 세부 설정 : 보여지는 폰트, 폰트 크기, 줄간격, 줄 번호 시작 숫자, 크기 제한 등을 다양하게 설정할 수 있습니다.

- 확장 스토어 : 만약에 원하는 스타일이 없다면, 확장 스토어로 들어가보시면 추가적으로 사용자들이 올려놓은 플러그인,                      새로운 스타일 등을 받아서 사용할 수 있습니다. 확장 스토어에서 추가하고 나서 원래 화면으로 돌아오면

                    스타일 패키지, 언어 등의 선택지가 추가된 것을 확인할 수 있습니다.


 2. 소스코드를 작성합니다.


 3. <HTML 코드>를 복사합니다.


- 화면 우측 하단에 공유하기클립보드에 복사 두 가지 기능을 제공하는데요. 기본적으로는 클립보드에 복사라는 기능을 사용하시면 블로그에 옮겨넣을 수 있는 <HTML 코드>가 만들어집니다. 


- 공유하기 기능은 칼라 스크립터 서버에 코드를 올린다음, 공유할 수 있는 url을 (http://colorscripter.com/s/*******)을 제공합니다.



 4. <HTML 코드>를 붙여 넣습니다.


- 3.에서 복사한 HTML 코드를 가지고 작성하던 글로 돌아옵니다. 최근의 블로그 텍스트 에디터에는 HTML 로 작성하는 기능을 모두 제공합니다. HTML로 글을 작성하는 모드로 들어가신 다음에 복사한 <HTML 코드>를 붙여넣으시면 되겠습니다.

 보통 HTML 코드로 쓰기로 전환하는 버튼은 텍스트 에디터 우측 상단에 있습니다.






<하이라이트미 사용 방법>


 1. 소스 코드를 왼쪽의 텍스트 박스(Source Code:)에서 작성합니다.


 2. 화면 중간의 Language, Style, Line numbers, CSS 을 원하는대로 설정합니다.


- Language 는 칼라 스크립터와 마찬가지로 일반적인 주력 프로그래밍 언어는 모두 지원합니다. 

- Style 을 선택하고, Line numbers를 통해서 줄 번호를 표시할 것인지를 선택합니다.

- 만약에 CSS를 다룰 줄 아신다면, 기본값으로 설정된 것 이외의 스타일도 적용할 수 있습니다. 

- 마지막으로 Highlight! 버튼을 클릭합니다.


 3. <HTML 코드>를 복사합니다.


Highlight! 버튼을 클릭하면 화면 오른쪽에 텍스트박스(HTML:)에 해당 코드를 HTML로 변환한 HTML 코드가 생성됩니다. 이것을 복사합니다.


 4. <HTML 코드>를 붙여 넣습니다.


- 3.에서 복사한 HTML 코드를 가지고 작성하던 글로 돌아옵니다. 최근의 블로그 텍스트 에디터에는 HTML 로 작성하는 기능을 모두 제공합니다. HTML로 글을 작성하는 모드로 들어가신 다음에 복사한 <HTML 코드>를 붙여넣으시면 되겠습니다.

 보통 HTML 코드로 쓰기로 전환하는 버튼은 텍스트 에디터 우측 상단에 있습니다.







댓글