Google 블로그에서 코드블럭 prettyprint 사용하는 방법
코드블럭으로 글을 작성하면 자동으로 코드 하이라이트 기능이 적용되는 티스토리와 달리 구글 블로그는 코드 블럭 기능을 별도로 제공하고 있지 않아 코드를 작성할 때 불편함이 있다.
오늘은 구글 블로그에서 코드블럭과 동일한 효과를 낼 수 있도록 글을 작성하는 방법을 알아보도록 하겠다.
결론부터 말하면, 이미 소스로 만들어진 prettifier, prettyprint class를 사용할 것이다.
1. Blogger 사이트의 테마로 들어간 뒤 HTML 수정
다음으로 맞춤설정 버튼 클릭 이후 "HTML 편집" 을 클릭해준다.
2. </head> 태그 위 script tag 추가
HTML 편집을 클릭하면 HTML로 구성되어 있는 것을 발견할 수 있다.
여기서 Control F (검색) 를 눌러 </head>를 검색해보자.
HTML을 몰라도 가능하며, 혹시 궁금하신 분들을 위해 설명하자면 HTML에는 head, body 등의 tag들이 있는데 head 태그의 마지막 부분이라는 것이다.
</head>를 검색하면 하나가 검색이 될 텐데, 그 검색된 위치 바로 윗줄에
<script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js'/>
위와 같이 작성을 해주었다면 우측 상단에 저장 버튼을 눌러준다.
위와 같이 설정을 끝냈다면 블로그 전체로 세팅하는 부분은 끝난 것이다.
이제 각 포스팅을 쓸 때마다 코드 블럭에만 prettyprint class를 적용시켜주면 된다.
3. 각 블로그 글마다 HTML로 변경하여 prettyprint class 추가해주기
예시를 위해 Java Code 중
public static void main(String[] args) throws Exception {
}
를 코드 블럭으로 넣고 싶다고 가정해보자.
그러면 쓰고 있는 글 제목 아래쪽에 연필 모양으로 보이는 것을 클릭해보자.
클릭
그런 다음 HTML 보기를 클릭해준다.
public static void main (String[] args) throws Exception{
}
이라는 코드를 찾아보자.
검색을 하면 쉽게 찾을 수 있는데
이제 해당 코드 앞 뒤에 간단한 태그만 붙여주면 끝이다.
코드의 앞쪽에는
<pre class="prettyprint">
코드가 끝난 뒤쪽에는 </pre>를 붙여주면 끝이다.
public static void main (String[] args) throws Exception{}
위처럼 코드블럭의 효과처럼 보이게 된다.
public static void main 과 같은 keyword가 별도의 색깔로 표시되어 가독성이 더 좋아지는 것을 알 수 있다.
글을 쓰다가 어떻게 보이는지 궁금하면 상단의 미리보기를 클릭하면 게시 후에 어떻게 보이는지 미리 볼 수 있다.
HTML로 작성을 해야 하다 보니 조금 불편한 점이 있을 수 있지만 그래도 어려운 방법이 아니니
특히나 개발 블로그를 하는 분들께 강추하는 코드블럭 사용 방법이다.