Code Snippet Plugin을 설치 하면 블로그에 프로그램 소스 코드를 깔끔하게 보여 줄 수 있다. 플러그인설치 방법과 사용법을 알아 보자.
1. 워드프레스에 Code Snippet Plugin 중의 하나인 auto-syntaxhighlighter 플러그인을 설치 .
http://www.wkii.org/auto-syntaxhighlighter.html 에서 다운로드 받은 후
\\워드프레스설치된폴더\wp-content\plugins\auto-syntaxhighlighter
에 폴더를 통째로 복사 해서 붙여 넣은 후 플러그인을 활성화 시킨다.
2. 블로그에 글을 올린 다음 소스코드를 표시하는 부분에 HTML 코드 TAG 를 붙여준다
<pre class=”brush: js;”>
…..코드 부분….
</pre>
3. Windows Live Writer 로 소스코드를 표시하기 위해 Code Snippet Plugin 사용하기.
을 실행시켜 플러그인을 설치 한다.
설치가 정상적으로 되었으면
Program Files (x86)\Windows Live\Writer\Plugin에 “EscapeCode.dll”이 보일 것이다.
설치 완료 후 플러그인을 활성화 시킨다.
활성화 가 정상적으로 이루어 지면 바로 아래의 그림과 같이 플러그인 메뉴가 변경된 것을 확인 할 수 있을 것이다.
소스 코드를 보여주기 위해 Paste code 플러그인을 클릭하면 코드블럭을 입력하는 화면이 보이는데 <pre>라고 되어 있는 부분을 <pre class=”brush: js;”> 과 같이 변경하고
code Snippet이라고 되어 있는 부분에 소스코드를 타이핑 하거나 , 복사해서 붙여넣고 insert 버튼을 누른다.
그리고 게시 버튼을 눌러서
블로그에 글을 올리면 된다.
이외에도 좀더 많은 기능을 포함한 플러그인도 있는데
몇몇을 설치 해봤는데..
다들 조금씩 에러가 있어서
개인적으로 심플하고 안정적인 paste code 플러그인을 사용하도록 결정했다.
'IT & 과학 > 인터넷' 카테고리의 다른 글
블로그 노출/ 구글검색 반영 (0) | 2016.09.19 |
---|---|
워드프레스 화면스크롤 플러그인 Brozzme Scroll Top (0) | 2016.09.19 |
워드프레스 펌방지 플러그인 (0) | 2016.09.17 |
티스토리에 SyntaxHighlighter 적용 및 Window Live로 소스코드 설명 달기 (0) | 2016.09.16 |
무료 워드프레스 반응형태마 추천 (0) | 2016.09.16 |