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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

붙여넣기가 완료 된 후,

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

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

<script type="HiWorld">

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

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

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