노트패드++ HTML Tag 플러그인 활용하기 - 티스토리에 HTML 소스 출력하기

티스토리 블로깅을 하다보면 소스코드를 예시로 제시하는 경우가 가끔있습니다. 소스코드를 예시로 적절하게 보여주기 위해서는 구문 강조(Syntax Highlighting)를 위한 솔루션을 적용할 필요가 있습니다. 물론 필자의 경우에도 SyntaxHighlighter라는 솔루션을("티스토리 구문 강조(Syntax Highlighting) 적용" 참조) 티스토리 블로그에 설치해서 사용하고 있습니다. 그런데 SyntaxHighlighter를 티스토리 편집기에 적용한 경우에는 통상 HTML 편집 상태에서 소스 코드를 붙여넣는데 ASP.NET이나 PHP코드에 HTML 태그라도 있을라치면 소스코드도 깨지고 글이 의도하지 않은 상태로 변하곤 합니다. 

원인은 소스 코드 내부의 HTML 태그가 미치는 영향 때문으로 티스토리 편집기가 태그를 자동으로 >나 < 등으로 인코딩하면 문제가 없겠지만, HTML 편집 모드 이므로 이 또한 애매한 요구 사항일 것입니다. 해결책은 사용자가 HTML 태그를 인코딩 상태로 붙여넣기 하면 되는데 본 글에서는 노트패드++의("노트패드++ 한글 사용 환경 준비하기" 참조) "HTML Tag" 플러그인을 활용하는 방법을 다룰까 합니다.

노트패드++의 플러그인 설치는 보통은 플러그인>플러그인 매니저를 통해서 간단하게 진행할 수 있지만, 플러그인의 저장소 주소(https://sourceforge.net/projects/npp-plugins/)가 잘못되었는지 설치 실패가 발생하더군요. 이런 경우에는 플러그인 배포 폴더에서 직접 다운로드 받아 플러그인을 설치할 수 도 있습니다. "HTML Tag" 플러그인의 최신 버전 폴더에서 배포 파일을 다운로드 받습니다.

https://sourceforge.net/projects/npp-plugins/files/HTMLTag/HTMLTag%20plugin%20v0.50/

HTMLTag_plugin_v0.50_unicode.zip 파일을 다운로드 받아 압축을 해제합니다.

압축 파일을 해제하면 위의 그림과 같은 파일 및 폴더를 확인 할 수 있는데 *.dll 파일은 노트패드++ 설치 폴더의 plugins 디렉토리에 저장하고 Config 및 Doc 폴더의 내용은 plugins 디렉토리 아래의 Config 및 doc 폴더에 저장합니다. 파일들을 노트패드++ 설치 폴더에 저장한 다음에 노트패드++를 재가동시켜 주면 새롭게 설치한 플러그인을 가동시킬 수 있습니다.

위의 그림처럼 인코딩하고자하는 HTML이 포함된 파일의 해당 부분을 선택하고 플러그인>HTML Tag>Encode entities를 선택하면 아래의 그림과 같이 태그가 인코딩 됩니다.

사실 티스토리 일반 편집기 상태에서 소스코드를 붙여넣기하면 위의 그림과 같이 HTML 태그는 자동으로 인코딩 형태로 변환됩니다. 그렇지만, 소스코드를 일반 글의 형태로 표시하면 줄 간격도 그렇고 문법 표시도 어렵고, 여러가지 한계가 있는 것이 사실입니다. SyntaxHighlighter와 같은 구문 강조 솔루션을 사용하면서 HTML 태그를 노트패드++와 같은 텍스트편집기에서 인코딩해서 적용하는 것이 현실적이지 않나 싶습니다.