cryde's blog: [HTML/JS] Blogger에 Syntax Highlight 추가(highlight.js 추가)

Blogger에 Syntax Highlight를 위해 highlight.js를 추가하는 방법을 정리합니다.

1. 블로그 관리 페이지의 [테마 > 사용중인 디자인 > HTML 편집]을 선택

2. <head>...</head>의 제일 아래쪽(</head> 바로 위)에 아래 코드 삽입

<-- hightlight.js -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/default.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

3. 글쓰기 모드에서 코드 작성후 [HTML] 선택 작성한 코드를 <pre><code>...</code></pre>로 묶어 준다.

// 샘플코드
<pre><code>
<?php
    echo "Hello World!!";
?>
</code></pre>

* 참조
https://highlightjs.org/
https://highlightjs.org/download/
https://highlightjs.org/static/demo/
https://highlightjs.readthedocs.io/en/latest/css-classes-reference.html
https://github.com/isagalaev/highlight.js/tree/master/src/styles
https://goo.gl/rlTX55

http://t.grooboo.net/code/

페이지

[HTML/JS] Blogger에 Syntax Highlight 추가(highlight.js 추가)

댓글 1개: