구글블로그에 code block 이쁘게 삽입하기 (highlight.js)

구글블로그(blogspot)에 highlight.js을 사용해서

아래와 같은 style이 적용된 code block을 삽입할 수 있습니다.

  resize() {
    this.stageWidth = document.body.clientWidth;
    this.stageHeight = document.body.clientHeight;

    this.canvas.width = this.stageWidth * 2; 
    this.canvas.height = this.stageHeight * 2;
  }
  

style이 적용된 code block

구글블로그(blogspot)에 적용하기

1. 관리자 화면에서 테마 클릭
2. "▼" 아이콘 클릭

3. HTML 편집 클릭

<script async='async' src='https://www.gstatic.com/external_hosted/clipboardjs/clipboard.min.js'/>
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/styles/default.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>

4. 내용을 복사합니다.

5. 본문에 "✔" 한번 클릭한 후 CTRL + F를 누르면 Search 가 활성화 됩니다.
6. "</head>"를 입력해서 라인을 찾습니다.
7. "</head>" 라인 위에 4번에서 복사한 내용을 붙여넣기 합니다.

Theme를 변경하려면 첫 줄의 css를 바꾸면 됩니다.

예를 들어 Darcula 스타일을 적용하려면

default.min.css

대신

darcula.min.css

로 변경해 주세요.

Theme 확인하기

Theme 명칭 확인하기

code block 삽입 방법

<pre><code>
내용입력
</code></pre>
  

코드를 <pre><code> 태그로 감싸주면 됩니다.

언어를 지정하려면 class를 부여합니다. 예를 들어 javascript라면

<pre><code class="javascript">
내용입력
</code></pre>
  

code block 모서리 둥글게 하기

1. 관리자 화면에서 테마 클릭

2. 맞출설정 클릭

3. 고급 클릭

4. 페이지 텍스트 클릭

5. CSS 추가 클릭

pre {
 border-radius: 5px;
}

6. css 입력

7. 저장 아이콘 클릭