블로그 스팟(구글 블로그) 코드 하이라이트 적용 - Code Highlight # DreaMerZ-Note

안녕하세요. 잊지 않기 위해 기록하는 블로그. DreaMerZ-Note 입니다.

이번 포스팅에서는 블로그 스팟(구글 블로그)의 게시글에 Code Block, Code Highlight를 적용하는 방법을 기록해보겠습니다. 다른 블로그 플랫폼과 다르게 구글 블로그의 편집기는 정말로 친절하지 않습니다. 왜냐하면 요즘 시대에 그 흔한 코드 블럭 기능이 구글 블로그의 편집기에는 제공하지 않기 때문이죠.. 하지만, 제공하지 않아도 적용이 불가능한 건 아니에요. 그래서 이번에는 HTML 코드에 code highlight javascript 를 적용해서 게시글에 코드 블럭을 적용하는 방법을 알아볼게요. 

| Quick View

# 구글 블로그 테마에 Code Highlight.js 추가하기

   ㄴ 구글 블로그 테마 > HTML 편집 > Head 태그 사이 아래 코드 추가 

# 게시글 작성 시 코드 하이라이트 적용하기.

   ㄴ 게시글 편집모드 변경 > HTML 편집.

   ㄴ 코드를 작성할 위치에 '<pre><code> write your code </code></pre>' 작성.

# 미리보기 후 적용된 코드 하이라이트 확인.

| 테마에 highlight.js 적용하기

우리가 자주 사용하는 코드 블럭(코드 하이라이트)는 highlightjs.org 에서 제공하는 걸 사용하고 있습니다. 이번에 구글 블로그의 게시글에 적용할 코드 블럭(코드 하이라이트)도 highlightjs.org에서 제공하는 cdnjs를 통해 적용할 수 있습니다.

- HIGHLIGHTJS.ORG

1. HIGHLIGHTJS.ORG 의 공홈에서 'As HTML Tags' 의 cdnjs를 확인합니다.

   ㄴ href 주소가 변경될 수 있으니 복사해주세요. 

#Code.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>

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

2. 구글 블로그 테마에 복사한 script 코드를 적용합니다.

   ㄴ 구글 블로그 설정 > 테마 > HTML 편집

   ㄴ Head 태그 사이에 복사한 script 코드 붙여넣기 후 저장하기.

| 게시글에 Code Highlight 적용하기

1. HIGHLIGHTJS.ORG 의 공홈에서 코드 블럭을 지정할 태그 확인합니다.

   ㄴ 코드를 아래 태그 사이에 작성하기.

   ㄴ <pre><code> your code </code></pre>

2. 게시글을 생성하고 아래 예시와 같이 필요한 코드를 작성합니다. 

   ㄴ 전 알아보기 편하게 Before, After 에 각각 script 태그를 작성하였습니다.

3. 작성된 상태에서 편집모드를 HTML로 전환 후 코드 블럭 태그를 작성합니다.

   ㄴ HTML 편집 모드 전환

   ㄴ 코드 블럭을 적용할 문자열 앞, 뒤로 <pre><code> your code </code></pre> 태그 추가

4. 작성 후 미리보기를 하면, 아래 이미지와 같이 코드 블럭(코드 하이라이트)가 추가된 것을 확인할 수 있습니다.