[Blogger] Blogger에서 소스코드 삽입 방법

[Blogger] Blogger에서 소스코드 삽입 방법

여러가지 툴 중에서 Highlight.js라는 툴을 사용
Highlight.js  다양한 언어와 설정파일을 제공하지만.. 줄 번호는 제공하지 않음

1. 테마 -> HTML 편집 

2. </head>바로 위에 아래의 소스 코드 삽입

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

3. 저장 후 소스코드가 제대로 삽입 되었는지 다시 확인

4. 글을 작성 할 때 알맞은 pre 와 code태그를 쓰기

highlight.js는 자동으로 언어를 잘 인식하지만 가끔 인식을 못 하므로 class를 사용하는걸 추천

<pre><code class="Java">
public static void printOne() {
System.out.println("Hello World");
}
sdsdsd
</code></pre>

• <pre> : 입력한 문장 형태 그대로 브라우저에 표현(엔터, 탭, 스페이스바도 인식)
• <code> : 컴퓨터나 프로그래밍 코드 일부를 그대로 표시하고자 할때 사용(이쁘게 색입히기)

5. 결과 확인하기

public static void printOne() {
System.out.println("Hello World");
}

+ color script를 이용하는 방법도 있음

참고

• http://koonhous.blogspot.com/2017/07/highlight-source.html