SW 개발

editor components / geshi / 소스하일라이팅

. . . 2011. 8. 1. 23:33
반응형
  • 마크다운변환 : 20190905

xe 홈페이지에 있는 소스하이라이팅 컴포넌트들을 보면...소스를 붙여넣었을때 제대로 보이는것이 별로 없습니다.

제대로 붙여넣기를 하려면 이지웍에디터가 아닌 html 로 해놓고 편집을 해야하는 번거로움이 있습니다.

그래서 나름대로 편하게 쓰려고 직접 만들어보기로 하였습니다.

geshi 사용

geshi 라는것을 이용하였습니다. 수정한 컴포넌트는 글상자 컴포넌트를 약간 편집해서 사용하였습니다.

/modules/editor/components 의 경로에 아래의파일을 풀어놓습니다.

  • https://xenostudy.tistory.com/attachment/cfile1.uf@1610CD4B4E36B5E115765B.zip

사용방법

위의 text field 쪽에 소스를 넣고 highlight 버튼을 누르면 소스가 하일라이팅 되어 나옵니다.

이때.. 나온소스를 그냥 ctrl+a 버튼을 눌러 모두선택 후 복사 하셔서 원하는 위치에 붙여넣어서 사용하심 됩니다.

참고로 geshi 는 기능이 막강하여 하일라이팅 하는코드의 색상을 모두 설정할수있습니다. 위의 화면에서 아랫쪽에보시면 커맨트 색깔부터 스트링색깔 숫자색깔까지 원하는데로 모두 설정가능합니다. 기본설정은 제가 보기 편하게 설정하였으며, 수정하시려면 직접 php 를 수정하심됩니다.

배경화면 색상이나 글씨 크기 글씨체 등은 geshi 폴더내에 php 파일들을 수정하면됩니다. 기본설정은 맑은고딕코딩에 글씨크기 12px 입니다.

원래는 바로 복사 => 붙여넣기 과정없이 만드려고 했는데 웹코딩은 쥐약이라 뭐 할수가없네요..

누가 좀 수정해주심 감사하겠습니다 ^^;;;

반응형