[팁] 구문강조 Syntax Highlighting 간단하게 HTML로 본문에 적용하기

check / 변환 할 구문 준비하기.


구문강조 Syntax Highlighting 간단하게 HTML로 본문에 적용하기


구문강조 Syntax Highlighting 사용 사진.

신택스 하이라이트. 구문 강조를 Syntax Highlighting을 통해 HTML 코드로 구현하기 위해

변환 기능을 제공중인 Online Syntax Highliting(https://tohtml.com/)에 접속한다.


구문강조 Syntax Highlighting 사용 사진.

접속 후 아래 Source code 창에 원하는 구문을 입력

바로 밑에 Highlight 버튼을 클릭하면 우측에 결과물, 상단에 HTML 코드가 출력된다.


구문강조 Syntax Highlighting 사용 사진.

우측의 Style 선택을 통해 다양한 색상으로 하이라이팅 할 수 있다.

또한 바로 아래의 Type 선택을 통해 원하는 형식의 언어로 구문 출력이 가능하다.

보통 Autodetect나 inet: html을 사용하면 된다.


구문강조 Syntax Highlighting 사용 사진.

Highlight 버튼을 눌러 출력이 완료됐다면,

상단의 HTML code를 그대로 복사한 다음 티스토리 에디터를 연다.

쉬운 적용을 위해 본문 코드가 들어갈 자리에 “코드”라고 미리 적어놓았다.


구문강조 Syntax Highlighting 사용 사진.

그 다음 에디터 우측 상단의 HTML을 클릭해서 HTML 편집 상태로 전환한다.


구문강조 Syntax Highlighting 사용 사진.

아까 “코드”라고 적었던 자리에 “코드”를 지우고

복사해주었던 HTML 코드를 붙여 넣는다.


구문강조 Syntax Highlighting 사용 사진.

붙여넣기가 완료 된 후,

다시 우측 상단의 HTML 체크 박스를 해제하면

이렇게 본문에 구문이 강조되어 출력된다.

<script type="HiWorld">

이런 식으로 HTML이나 CSS 수정 없이

간단하고 깔끔하게 본문에 적용이 가능하다.


tip / 변환 시 Source code에 한글이 포함되어있으면 오류가 발생해 출력이 안된다.

답글 남기기