2014년 10월 3일 금요일

워드프레스 소스 코드 하이라이트 플러그인 Crayon Syntax Highlighter 설치 및 활용법



 

개요

   
 
본 글에서는 워드프레스의 플러그인 Crayon Syntax Highlighter 설치 및 활용법을 정리한다.
 
관련글 : 비 설치형 코드 하이라이트 비교 및 선택. 워드프레스에서는 비설치형에서 생성된 코드 하이라이트 된 것을 붙여넣기 하면 좋은 품질의 코드표현이 이뤄지지 않는것 같다.
 
 

 



 

1. 설치 Crayon Syntax Highlighter. 

   
 
설치방법 :  워드프레스 관리자 사이트의 좌측메뉴 -> 플러그인 추가 -> Syntax Highlighter 로 검색. 하면 아래 그림의 플러그인을 볼 수 있다. 지금설치하기 버튼 클릭 하여 설치하고 활성화 한다. 
igotit
 
설치하고 나면, 워드프레스 관리자 좌측메뉴의 설정에 Craton 이라는 메뉴가 추가된다.
 
 
 
끝.-설치.


 

2. 활용법.

   
 
워드프레스  글쓰기로 가면 아래 그림처럼 코드 하이라이트 삽입가능한 아이콘이 추가되어있다.
igotit

위 아이콘을 클릭하면 아래 화면처럼 창이 보인다. 이 창에서 code 텍스트박스 영역에  웹에 표현할 코드를 복사하여 붙여넣기 하고,  언어 콤보박스에서 해당 언어를 선택하고, 저장 클릭하면 문서 내에 포함된다. 편집기 내에서는 코드 하이라이팅 적용 되어 보이진 않는다. 문서를 저장하고 웹에서 봐야만 코드 하이라이팅 적용된 모습을 볼 수 있다.
igotit
최종적으로 워드프레스 사이트 에서 보이는  모습이다. 방문자가 제어 가능한 툴바가 있고, 여기서 코드번호 보이기/ 안보이기 선택, 복사하기 새창열기, wrapping 처리 선택 등 이 가능하다. 아래는 스크롤이 있어서 전체코드를 편하게 보게 할 수 있다.
igotit


 
 
 끝-활용법
 

평가. 워드프레스에서는 만족스러운 품질의 코드 하이라이팅 기능이 무료 플러그인 으로 달성되었다.





///53

댓글 없음:

댓글 쓰기