Blogger에서 highlight.js를 활용하여 코드블록 삽입하는 방법

Blogger는 여러 가지 유용한 기능을 제공하며, 특히 글꼴 변경이 용이하다. 티스토리에 비해 다양한 글꼴을 선택할 수 있어 개성 있는 블로그 디자인이 가능하다. 또한, Blogger는 다양한 특수 문자를 지원하여 글 작성 시 더욱 풍부한 표현이 가능하다. 티스토리에서 경험했던 자동 임시 저장 기능이 잘 작동하지 않는 문제도 Blogger에서는 해결된 느낌을 준다. 작성 중인 글이 사라지는 경우가 적어 안정적인 블로깅 환경을 제공한다.

Tistory의 장점

반면, Tistory는 코드 삽입 기능이 기본적으로 제공된다. 개발 관련 글을 작성하는 데 필수적인 기능인데, Blogger에서는 이러한 기능이 부족하다. Tistory는 기능을 지원하여 README 파일 작성 시 유용하다. 외부 링크를 쉽게 요약해 주는 기능도 있어 블로그의 디자인을 더욱 돋보이게 해준다. 테이블 생성 기능 또한 직관적이어서 데이터를 정리하는 데 유리하다. 이러한 점에서 Tistory는 여전히 많은 사용자들에게 매력적인 플랫폼으로 여겨진다.

👉 ✅ 상세 정보 바로 확인 👈

highlight.js 사용법

highlight.js는 다양한 언어와 테마를 지원하는 라이브러리로, 코드 하이라이팅 기능을 제공한다. 이 라이브러리를 Blogger에서 사용하려면 몇 가지 단계를 따라야 한다.

highlight.js 설치하기

Blogger의 왼쪽 메뉴에서 ‘테마(Theme)’를 선택한 후, ‘Edit ‘에 들어간다.
highlight.js 공식 사이트에서 제공하는 CDN 링크를 복사하여 <head> 태그 안에 붙여넣는다. 아래 코드를 추가하면 된다.

“`

저장을 클릭하여 변경사항을 저장한다.

코드블록 추가하기

새로운 게시글을 작성하거나 기존 게시글을 열고, ‘로 보기(View)’ 모드로 전환한다.
코드 삽입 위치를 찾아 <pre><code>코드 내용</code></pre> 형식으로 코드를 추가한다.
예를 들어, Python 코드를 삽입하면 사용 언어를 자동으로 감지하여 하이라이팅을 적용한다.

이러한 방식으로 Blogger에서 highlight.js를 활용하면 코드가 더욱 깔끔하게 표시된다. 블로깅 과정이 한층 더 수월해질 것이다.

Blogger에서 highlight.js 활용의 장점

다양한 언어 지원

highlight.js는 192개 언어와 498개 테마를 지원하며, 코드의 언어를 자동으로 감지하여 하이라이팅한다. 이러한 기능은 개발 관련 내용을 다룰 때 특히 유용하다.

간편한 설치 절차

Blogger에서 highlight.js를 설치하는 과정은 비교적 간단하다. 코드 몇 줄을 추가하는 것만으로도 바로 사용할 수 있어 시간과 노력을 절약한다.

시각적 향상

코드가 하이라이팅됨으로써 가독성이 크게 향상된다. 독자는 내용을 이해하는 데 필요한 심미적 요소가 더해져 편리하게 정보를 소비할 수 있다.

Blogger에 highlight.js 적용 절차

1. 테마 수정하기

Blogger의 ‘테마’ 섹션으로 가서 편집 화면으로 들어가고, 필요한 스크립트와 스타일 시트를 추가한다. 이를 통해 highlight.js를 웹사이트에 통합할 준비를 한다.

2. 코드 삽입하기

게시물 작성 시 뷰로 전환한 다음, 원하는 코드 블록을 적절한 형식으로 삽입한다. 이때 코드가 어떤 언어인지 명시할 필요는 없다. highlight.js가 자동으로 처리해 준다.

3. 변환 확인하기

게시물을 미리보기 하여 코드가 원하는 대로 하이라이팅이 잘 적용되었는지 확인한다. 필요한 경우 수정하여 최종 게시를 한다.

결론

Blogger에서 highlight.js를 활용하면 코드블록을 손쉽게 삽입할 수 있다. 이로 인해 블로그의 가독성이 향상되고, 독자에게 더 나은 경험을 제공할 수 있다. 따라서, 개발 관련 글을 작성하는 이들에게 매우 유용한 방법이 될 것이다. 지금 바로 적용해 보기를 권장한다.