에디터플러스를 이용해서 블로그에 코드 구문강조하기

이전에 제가 온라인 구문강조 하는 방법과 자바스크립트를 이용한 구문강조 기능에 관한 글을 쓴적이 있습니다.
이 방법은 위의 방법과는 다른 방법입니다.
특히 에디트플러스를 이용하는 방법입니다. 그리고 이 방법은 티스토리에서만 해당이 되는것이 아니라 네이버, 다음, 파란....등등 어디에서나 활용할 수 있는 방법입니다.


에디트플러스를 이용해서 블로그에 코드를 쓸때 구문강조하는 간단한 방법입니다.
에디트플러스를 이용하는 방법이니 에디트 플러스가 있어야겠지요.
있다치고 에디트플러스에서 복사할 코드를 전부 선택을 합니다. 그다음 마우스 우측버튼을 눌러서 HTML으로 복사를 선택합니다.


그런다음 티스토리 글쓰기 창에서 html 에 체크를 하고 붙여넣기를 합니다. 아래는 붙여넣기한 모습입니다.


html 을 체크해제하면 바로 확인도 가능합니다.


이제 저장만 클릭하면 구문강조가 된 코드를 볼 수 있습니다. 이 방법은 티스토리, 네이버... 등 어디에서나 사용할 수 있는 방법입니다.
하지만 여기에도 주의해야 할 점이 있습니다.

주의점.

코드를 그냥 붙여넣기 할 경우 긴 코드의 경우 본문을 벗어나는 경우가 있습니다.
예제 이미지를 보세요.

 
위코드는 제가 일부러 코드를 줄바꿈하지 않고 그냥 붙여넣기 한 경우 입니다.
그림처럼 코드가 본문을 벗어나 사이드바까지 넘어가는 현상이 발생합니다.
그래서 붙여넣을때 아래처럼 pre 에 style="white-space:pre-wrap" 속성을 추가해주면 간단이 해결이 됩니다.
 


참고로 white-space 속성이 어떤것인지 알아보려면 여기를 클릭하시면 알 수 있습니다.
그럼 어떻게 보여지는지 한번 볼까요???


참고로 에디터에 설정에서 글꼴을 저처럼 나눔고딕코딩으로 설정한 경우 그대로 글꼴까지 설정이 되서 복사, 붙여넣기가 됩니다.



이런식으로 간단이 에디트플러스에서 복사해서 글쓰기 창에 붙여넣기 하는 방법을 알려드렸습니다.
이러한 방법은 비단 에디트플러스에만 있지는 않습니다. 좋은 에디터에는 있는 기능이니 확인해보세요.

참고

온라인 구문강조 도구 7곳
티스토리 치환자 본문에 표시하는 방법
티스토리 구문강조(코드하이라이팅)하는 4가지 방법
설치없이 구문강조하고 티스토리 치환자 표시하는 방법

개    개