구글 블로그에 "highlight.js"로 코드 이쁘게 넣는 방법

• R과 Python을 공부하면서 구글 블로그에 글을 쓰려고 계획하는 중, 포스트 안에 코드를 알아보기 쉬우면서 이쁘게 넣는 방법에 대해서 열심히 구글링을 했다.
• 대부분 티스토리에 대한 내용들이 보였고, 여러 가지 방법 중 R 코드에 적용이 가능한 "highlight.js"를 통한 방법을 연구하기 시작했다. 
• 자바스크립드, html, css를 수박 겉핥기 수준으로 배운 나로써는 참 힘든 여정이었지만, 결과적으로는 어떻게든 적용하게 되었다.

1. 먼저 "highlight.js" 홈페이지를 방문한다.

• 홈페이지 주소 : https://highlightjs.org/
• 적용하고 싶은 스타일 확인 : https://highlightjs.org/static/demo/

• 그리고 오른쪽에 "Get version" 버튼을 클릭한다.

2. 아래와 같은 화면에서 위쪽 코드를 복사해준다.

3. 자신의 블로그로 돌아와서 "테마" 메뉴 내 "html 편집"으로 들어간다.

4. html 편집기에서 Ctrl+F 누른 후, </head> 태그를 검색한다.

• 그 태그 바로 위에 아래 그림과 같이 앞서 복사한 코드를 붙여 넣어준다. 
• 그리고 파란색 줄로 강조된 코드를 적어준다.
• 스타일 변경은 "dracula.min.css" 코드에 "dracula"를 다른 스타일의 이름으로 변경해 주면 적용이 된다. 
• 이것 저것 변경해 보면서 자신의 블로그 테마에 어울리는 스타일로 결정하면 된다. 

5. 포스트에 적용할 때에는 아래와 같은 방식으로 넣어주면 된다.

• "사용할 언어" 부분에는 따옴표를 쓰고 그 안에 html, python, r 등과 같은 언어 이름을 쓰면 된다. 
• pre 및 code 태그 다음부터 바로 인식을 하기 때문에 만약 엔터를 친 후 코드를 작성하면 실제 화면에서는 첫 줄을 빈 줄로 표시한다. 그럼 이쁘지 않다.

<pre><code="사용할 언어">
코드들
</code></pre>