구글 블로거에 highlight.js 적용방법
Highlight.js
하이라이트.js(Highlight.js)는 자바스크립트로 작성된 구문 하이라이터입니다. 브라우저뿐만 아니라 서버에서도 작동합니다. 거의 모든 마크업과 함께 작동할 수 있고 다른 프레임워크에 의존하지 않으며 자동 언어 감지 기능이 있습니다.
CDNjs를 이용하는 방법
1. 블로그 관리 페이지의 [테마 > 내 테마(맞춤설정의 우측에 있는 ▼클릭) > HTML 편집]을 선택
![1. 블로그 관리 페이지의 [테마 > 내 테마(맞춤설정의 우측에 있는 ▼클릭) > HTML 편집]을 선택](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGnqHanxHhTCuZ5Pv-nTIjxqq9BOwubnYONbr27TU-V9MxE08E9w6YDOK8t0InkA0px3CdGSueEOrKAYOOc9mAnO8lZTCyFFC8AQr6Qtn4pdrd4oVXle_pgRt4tqhkzUyHHUPmGvNKF3IpKupCF9XivlefRKjFv8IrjapXM9k4SXW8f-0HVcfGZ0SDEowJ/s1580/a1.png "1. 블로그 관리 페이지의 [테마 > 내 테마(맞춤설정의 우측에 있는 ▼클릭) > HTML 편집]을 선택")
<!-- cdoe highlight -->
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/androidstudio.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js'></script>
<script>hljs.highlightAll();</script>3. 글쓰기 모드에서 코드 작성후 [HTML] 선택 작성한 코드를 <pre><code>...</code></pre>로 묶어 준다.
<!-- 샘플코드 -->
<pre><code>
System.out.println("hello world");
</code></pre> <pre><code class="language-plaintext">...</code></pre><pre><code class="nohighlight">...</code></pre>참조 사이트
- highlight.js 웹사이트 : https://highlightjs.org
- highlight.js Docs : https://highlightjs.readthedocs.io/en/latest/readme.html#highlight-js
%20webUI%20%E1%84%92%E1%85%A1%E1%86%AB%E1%84%80%E1%85%B3%E1%86%AF%20%E1%84%8C%E1%85%A5%E1%86%A8%E1%84%8B%E1%85%AD%E1%86%BC%20%E1%84%87%E1%85%A1%E1%86%BC%E1%84%87%E1%85%A5%E1%86%B8.webp)
%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8E%E1%85%B5%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5.webp)
%20Webui%20Civitai-Helper%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8E%E1%85%B5%20%E1%84%87%E1%85%A1%E1%86%BC%E1%84%87%E1%85%A5%E1%86%B8.webp)
.webp)