코드 구문 강조(Syntax Highlighting)에 <>블럭 표시하기

티스토리에 프로그래밍 관련 블로깅을 할 때면 가장 자주 사용하는 것은 바로 "코드 구문 강조"(Syntax Highlighting) 입니다. 다양한 프로그래밍 언어에 대해서 문법 요소를 인식하여 키워드나 문자열, 상수, 변수등을 색으로 구분해서 표시하여 코드를 보다 보기 쉽도록 해주는 장치입니다.("티스토리 구문 강조(Syntax Highlighting) 적용" 참조)

티스토리 글쓰기에서 HTML 모드를 켜고 <pre class="brush:c#">....</pre>로 C# 코드를 복사해서 붙여 넣으면 어떤 코드들은 문제가 없지만 <> 처럼 HTML 태그처럼 보이는 요소는 문제가 발생합니다.

위의 그림은 별다른 조치를 취하지 않았을때 코드가 깨져서 보이는 현상을 나타낸 것입니다. 티스토리에 저장되는 과정에 C# 코드 부분을 HTML 태그로 인식하는 문제입니다. 이런 경우에는 코드를 복사해서 붙여넣을 때에 < > 블럭을 &gt;나 &lt;로 인코딩해서 입력해주면 해결됩니다. 문제는 이런 문자를 일일이 찾아서 고쳐주기에는 귀챦기도 하고 비효율일 뿐만아니라 오류의 가능성도 있다는 점입니다. 

인코딩 과정은 텍스트 편집기("노트패드++ 한글 사용 환경 준비하기" 참조)를 활용하면 간단하게 처리할 수 있습니다. 작업을 위해서는 노트패드++의 "XML Tools"플러그인을 먼저 설치해야 합니다. 처리 순서는 우선 편집할 코드를 새창에 붙여넣고 두번째는 변환할 범위를 선택한 다음 마지막으로 플러그인>XML Tools>Convert selection XML to text(<> => &lt;&gt;) 메뉴를 선택하면 됩니다.

변환 결과 코드입니다.  위와 같이 조정된 코드를 <pre class="brush:c#">....</pre>안에 넣으면 정상적인 코드 구문 강조를 적용할 수 있습니다.

저작자표시비영리변경금지

'웹 및 앱' 카테고리의 다른 글

듀오링고로 프랑스어 공부하기  (0)	2017.01.16
오프라인 내비게이션으로 아틀란 사용하기  (8)	2016.12.13
코드 구문 강조(Syntax Highlighting)에 <>블럭 표시하기  (0)	2016.10.07
모르는 한자 찾기  (2)	2016.05.09
듀오링고 활용팁  (0)	2016.03.28
오프라인 지도, 여행용 지도로는 MAPS.ME(MapsWithMe)  (1)	2016.03.07