[Blogger] 소스코드 삽입하기(Highlight.js)

적용 결과

Blogger에 소스코드를 그냥 글 적듯 적으면 뭔가 코드 같지도 않고 깔끔해보이지 않는다.

방법이 여러가지인 것 같은데 그 중 하나를 소개한다.

결과는 아래 처럼 보인다.

<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atom-one-dark-reasonable.min.css" rel="stylesheet"></link>

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/languages/r.min.js"></script>

<script>hljs.initHighlightingOnLoad();</script>

기능 요약

사용한 언어가 뭔지 알아서 인식해서 highlight를 해준다.

제대로 인식안되는거 같으면 내용을 쓸때 직접 명시해줄수 있다.

plaintext형태로 highlight를 하지 않는 방법도 있다.

어떻게 하면 될까?

1. 블로그 Theme 수정하기

Blogger 메뉴 Theme에서 현재 적용 중인 Theme를 Customize 할수 있다.

Costomize 버튼 오른쪽 아래 방향 화살표를 클릭, 그리고 Edit HTML 메뉴를 클릭한다.

2. html 수정하기

아래 코드를 복사한다.

<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atom-one-dark-reasonable.min.css" rel="stylesheet"></link>

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/languages/r.min.js"></script>

<script>hljs.initHighlightingOnLoad();</script>

그림처럼 title 아랫줄에 붙여넣고 우측 상단 디스크 모양 버튼을 클릭하여 저장한다.

3. 글하나 써보기

html View 모드에서 써야한다.

<pre><code>소스코드내용</code></pre>

위와 같이 쓰면 아래 처럼 나온다.

소스코드내용

4. 내가 원하는 언어 명시하기

간혹 내가 원하는 언어로 인식이 안되는 경우가 있을 수 있다.

아래처럼 쓰면 된다.

<pre><code class="html"> 소스코드</code></pre>

인용가능한 코드 리스트 링크 : https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md

5. html코드 쓰기

html 코드의 경우 html View모드에서 쓰면 인용이 아니라 blogger가 코드 내용을 실행하려고 해서 코드 내용을 그대로 출력하지 않는다

이럴땐 Compose view에서 코드 내용을 쓰고 다시 HTML view로 돌아와서 코드내용 앞뒤에 <pre><code class="html"> 와 </code></pre> 를 붙여주면 된다.

참고 : https://therealweblog.blogspot.com/2019/05/how-to-format-code-snippets-in-blogger.html