[Blogger highlight code] 구글 블로거 코드 하이라이트 적용하는 방법

Code highlight란 아래 이미지에서 네모 박스 영역을 뜻한다. 많은 블로그들에서 볼 수 있으며 보통 개발자들이 프로그래밍 코드를 쉽게 알아볼 수 있도록 쓰는데 꼭 프로그래밍에 국한된 것은 아니다.

code-prettify 적용 후

티스토리나 네이버 블로그에서 많이 쓰는 highlight.js 대신 구글에서 만든 code-prettify를 적용해보자. 구글이 짱이니까.

code-prettify 살펴보기: https://github.com/google/code-prettify

1. 왼쪽 사이드 바 메뉴에 Theme 클릭  후 아래 이미지의 오른쪽 상단에 점 세개를 클릭한다.

2. Edit HTML 클릭한다.

3.  Ctrl + F  를 눌러서  /head  를 타입하고 엔터를 누른다.

4.  </head>  바로 위에 아래의 스크립트를 복붙하고 저장한다.

스크립트

<script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js'/>

5. 사용 방법

포스트를 쓸 때 Compose 옆에 HTML을 클릭한다.

하이라이트 하고 싶은 부분 맨 앞에  <pre class="prettyprint"><code class="language-java"> 를 쓰고 맨 마지막에  </code></pre> 로 닫아 준다.

예제

<pre class="prettyprint"><code class="language-java">
public class HelloWorld {
    public void static main(String[] args) {
        System.out.println("하이라이트!");
    }
}
</code></pre>

다음은 language-java 대신 사용 가능한 다른 포맷들이다.

"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl"