웹사이트나 블로그에서 아래그림처럼 소스코드가 표시되는 화면을 볼 수 있습니다.
Code Snippet 기능인데 “코드하이라이터” 라고도 합니다.
인터넷에서 Code Snippet을 지원하는 플러그인을 검색하면 의외로 많은 플러그인을 찾을 수 있습니다.
사용방법이 편리한 SyntaxHighlighter을 티스토리에 적용하고
Window Live Write에서 Code Snippet 플러그인을 사용하는 방법을 알아 봅니다.
1.파일 다운로드 및 설치:
http://alexgorbatchev.com/SyntaxHighlighter/download/
링크를 클릭하여 사이트에서 최종버젼을 다운로드 하거나
첨부 파일을 다운로드 받은 후 압축을 해제 합니다.
그런 다음 티스토리에 파일을 업로드 합니다.
추가 버튼을 눌러서 압축해제 한 폴더에서 styles 폴더와 scripts 폴더에 있는 파일을 티스토리에 업로드 합니다.
2. HTML 파일을 편집:
stylesheet를 링크 합니다.
<head>
...
<link rel="stylesheet" type="text/css" href="./images/shCoreDefault.css" />
</head>style은 http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/default.html에서
확인 한 후 마음에 드는 것을 선택 합니다.
<body> 태그 안에 프로그래밍 언어를 지원하는 스크립트 코드를 링크 합니다.
</body> 태그 바로 윗단에
<script type="text/javascript" src="./images/shCore.js"></script> <script type="text/javascript" src="./images/shAutoloader.js"></script>
</body>
와 같이 추가하고 수정한 내용을 저장 합니다.
3.SyntaxHighlighter 사용방법:
글을 입력한 다음 HTML 모드에서
표시할 소스코드를 <Pre> …..</pre> Tag로 묶어 주는 방법인데
아래의 예와 같이 사용됩니다.
<pre class="brush: java">
class HellowJava
{
public static void main(String[] args)
{
System.out.println("Hello, Java ! ");
}
}
</pre>
brush 에 대한 설정은 http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/을 참조하십시오
옵션 부분은 http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/을 참조 하면 됩니다.
사용예)
- 툴바 숨기기
<pre class="brush: plain; toolbar: false;">
hide toolbar
</pre>
- 번호 라벨 숨기기
<pre class="brush: java; gutter: false;">
class HellowJava
{
public static void main(String[] args)
{
System.out.println("Hello, Java ! ");
}
}
</pre>
번호 라벨 순서지정하고 특정 Line 강조하기
<pre class="brush: java; first-line: 11; highlight: [13, 15];">
class HellowJava
{
public static void main(String[] args)
{
System.out.println("Hello, Java ! ");
}
}
</pre>
4. Windows Live Writer 로 소스코드를 표시하기 위해 Code Snippet Plugin 사용하기.
https://brett.batie.com/software-development/live-writer-plugin-to-paste-html-code 에서 다운로드 할수 있다.
만일 다운로드 할 수 없으면 
InstallPasteCode.zip첨부파일을 실행시켜 플러그인을 설치 한다.
설치가 정상적으로 되었으면
Program Files (x86)\Windows Live\Writer\Plugin에 “EscapeCode.dll”이 보일 것이다.
설치 완료 후 플러그인을 활성화 시킨다.
활성화 가 정상적으로 이루어 지면 바로 아래의 그림과 같이 플러그인 메뉴가 변경된 것을 확인 할 수 있을 것이다.
소스 코드를 보여주기 위해 Paste code 플러그인을 클릭하면 코드블럭을 입력하는 화면이 보이는데 <pre>라고 되어 있는 부분을 <pre class="brush: js;"> 과 같이 변경하고
code Snippet이라고 되어 있는 부분에 소스코드를 타이핑 하거나 , 복사해서 붙여 넣고 insert 버튼을 누른다.
그리고 게시 버튼을 눌러서
블로그에 글을 올리면 된다.
이외에도 좀더 많은 기능을 포함한 편리한 플러그인도 있어서 몇몇을 설치 해봤는데..
다들 조금씩 에러가 있어서
개인적으로 심플하고 안정적인 paste code 플러그인을 사용하도록 결정했다.
html_sample.txt 'IT & 과학 > 인터넷' 카테고리의 다른 글
| 블로그 노출/ 구글검색 반영 (0) | 2016.09.19 |
|---|---|
| 워드프레스 화면스크롤 플러그인 Brozzme Scroll Top (0) | 2016.09.19 |
| 워드프레스 펌방지 플러그인 (0) | 2016.09.17 |
| Word press Code Snippet Plugin (0) | 2016.09.16 |
| 무료 워드프레스 반응형태마 추천 (0) | 2016.09.16 |
