본문으로 바로가기

Word press Code Snippet Plugin

category IT & 과학/인터넷 2016. 9. 16. 13:18



Code Snippet Plugin을 설치 하면 블로그에 프로그램 소스 코드를 깔끔하게 보여 줄 수 있다. 플러그인설치 방법과 사용법을 알아 보자.

1. 워드프레스에 Code Snippet Plugin 중의 하나인 auto-syntaxhighlighter 플러그인을 설치 .

http://www.wkii.org/auto-syntaxhighlighter.html 에서 다운로드 받은 후
\\워드프레스설치된폴더\wp-content\plugins\auto-syntaxhighlighter
에 폴더를 통째로 복사 해서 붙여 넣은 후 플러그인을 활성화 시킨다.

image

auto-syntaxhighlighter.zip


 2. 블로그에 글을 올린 다음 소스코드를 표시하는 부분에    HTML 코드 TAG 를 붙여준다 

<pre class=”brush: js;”>
…..코드 부분….
</pre>

image

 

3. Windows Live Writer 로 소스코드를 표시하기 위해 Code Snippet Plugin 사용하기.

InstallPasteCode.zip

을 실행시켜 플러그인을 설치 한다.

image

    설치가 정상적으로 되었으면
Program Files (x86)\Windows Live\Writer\Plugin에 “EscapeCode.dll”이 보일 것이다.
   설치 완료 후 플러그인을 활성화 시킨다.
image

활성화 가 정상적으로 이루어 지면 바로 아래의 그림과 같이 플러그인 메뉴가 변경된 것을 확인 할 수 있을 것이다.
image

소스 코드를 보여주기 위해 Paste code 플러그인을 클릭하면 코드블럭을 입력하는 화면이 보이는데 <pre>라고 되어 있는 부분을 <pre class=”brush: js;”> 과 같이 변경하고

image
code Snippet이라고 되어 있는 부분에 소스코드를 타이핑 하거나 , 복사해서 붙여넣고 insert 버튼을 누른다.

그리고 게시 버튼을 눌러서
블로그에 글을 올리면 된다.

이외에도 좀더 많은 기능을 포함한 플러그인도 있는데
몇몇을 설치 해봤는데..
다들 조금씩 에러가 있어서
개인적으로 심플하고 안정적인 paste code 플러그인을 사용하도록 결정했다.