티스토리(Tistory)나 블로거(Blogger)에 블로그에 글을 쓸 때, 일반 글쓰기 모드 보다는 HTML 편집기 모드를 선호하는 편이다. 왜냐하면 수식이나 그래프 등을 포함하는 글이 많기 때문이다.
최근 들어 소스코드를 포함한 글을 쓰는 경우도 많아져, 이전에 올렸던 Open Live Writer로 블로그에 소스코드를 포함한 글쓰기 글을 다시 봤다. Syntax Highligher와 PreCode를 활용하는 방법이다.
이번 글에서는 좀더 간단한 방법 정리해 본다. 블로거에 기본적으로 있는 Syntax Highlight 기능을 활용하는 것이다.
포멧을 바꾸려면 default.min.css 있는 부분을 vs2015.min.css 등으로 변경하면 된다. 그 예제는 highlight.js demo 사이트를 참고하면 된다.
HTML편집기에서 하기와 같은 Tag를 넣고 소스코드를 넣으면 된다.
<pre><code>
...code here...
</code></pre>
한가지 문제점은 자바스크립트나 HTML로 작성된 Tag가 있는 소스코드는 바로 사용하면 안되고, 그 소스코드를 Escape 문자열로 변환해야한다.
쉽게 변환을 해주는 사이트 Quick Escape
document.getElementById("demo").innerHTML = "Hello JavaScript";
var x = 5; // Declare x, give it the value of 5
var y = x + 2; // Declare y, give it the value of x + 2
</code></pre>
최근 들어 소스코드를 포함한 글을 쓰는 경우도 많아져, 이전에 올렸던 Open Live Writer로 블로그에 소스코드를 포함한 글쓰기 글을 다시 봤다. Syntax Highligher와 PreCode를 활용하는 방법이다.
이번 글에서는 좀더 간단한 방법 정리해 본다. 블로거에 기본적으로 있는 Syntax Highlight 기능을 활용하는 것이다.
기본 세팅 및 사용법
블로그 관리 페이지의 테마를 선택하고 사용중인 디자인의 HTML 편집을 선택한 후 <head>와 </head>를 찾아 </head>바로 위에 다음을 추가하고 저장한다.<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
포멧을 바꾸려면 default.min.css 있는 부분을 vs2015.min.css 등으로 변경하면 된다. 그 예제는 highlight.js demo 사이트를 참고하면 된다.
HTML편집기에서 하기와 같은 Tag를 넣고 소스코드를 넣으면 된다.
<pre><code>
...code here...
</code></pre>
한가지 문제점은 자바스크립트나 HTML로 작성된 Tag가 있는 소스코드는 바로 사용하면 안되고, 그 소스코드를 Escape 문자열로 변환해야한다.
쉽게 변환을 해주는 사이트 Quick Escape
예제
<pre><code >document.getElementById("demo").innerHTML = "Hello JavaScript";
var x = 5; // Declare x, give it the value of 5
var y = x + 2; // Declare y, give it the value of x + 2
</code></pre>
document.getElementById("demo").innerHTML = "Hello JavaScript";
var x = 5; // Declare x, give it the value of 5
var y = x + 2; // Declare y, give it the value of x + 2
댓글
댓글 쓰기