구글 블로그에 예쁜 코드 박스 만들기! highlight.js 적용 및 사용법

블로그스팟에서 코드 하이라이트 highlight.js 효과 적용하는 방법을 알아보자. 코드 하이라이팅은 블로그에 예시로 올린 코드를 알아보기 편하게 해주는 기능으로 태그 <pre><code class="language-html">...</code></pre> 내부의 코드를 찾아 강조 표시해 준다.


코드 하이라이트 적용하기

1) highlight.js를 이용해서 블로그스팟에 적용하는 방법.

테마 HTML 편집에서 아래의 코드를 </body> 위에 붙여 넣으면, 코드 하이라이트 효과가 적용된다.

</head> 안에 넣으면 오류가 생길 수도 있음에 유의.

- 코드 출처: highlightjs.org

HTML 

<!-- Highlight.js 스타일 로드 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css">

<!-- Highlight.js 라이브러리 로드 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>

<!-- 필요하다면 개별 언어 지원 추가 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/go.min.js"></script>

<!-- 초기화 -->
<script>hljs.highlightAll();</script>

2) 하이라이팅 적용 전후 비교 사진

하이라이트 자바스크립트 적용 전과 적용 후 사진을 보면, 자동으로 코드가 강조 표시되어 있음을 확인할 수 있다.

코드 하이라이트 강조 효과 적용 예시 화면
highlight.js 적용 효과 전후 비교 사진


오늘의 한마디

어제 복사 버튼 있는 코드 박스 생성에 이어, 오늘은 코드 하이라이트 적용하는 방법까지 알았다.
갑자기 내가 피곤한 이유도 알았다.

티스토리 글쓰기 코드블럭
티스토리 글쓰기 코드블럭

티스토리에선 클릭 한 번으로 될 것을...

하지만 블로그스팟은 내맘대로 커스텀하는 재미가 있지. 티스토리엔 없다는 의미는 아님.


Related Posts

댓글

댓글 쓰기