블로거를 시작하고 제일 먼저 적용하려고 노력했던건데 뭔가 잘 되지 않아 오늘에서야 성공해 글을 남기네요. 한 달 좀 더 걸렸네요.
웹페이지를 다니다 보면 코드들이 예쁘게 보이는 곳이 많이 있어요. 요즘에는 네이버블로그도 코드를 입력할 수 있도록 해주던데.. 이제 블로거로 넘어올 예정이라 좀 많은 삽질을 했습니다. 이렇게 간단한 것을 가지고 고생했네요.
highlightjs를 이용하면 코드를 예쁘게 보일 수 있습니다. js가 뭔지는 저도 잘 몰라요. html이나 웹스타일쪽은 거의 다뤄본 적이 없어서 ^^
그냥 따라만 하면 됩니다.
latex 코드를 사용할 수 있도록 했던 것처럼 <head> ... </head> 사이에 다음 코드를 붙여 넣어주세요. highlightjs 홈페이지에 가이드에는 왜 그런지 모르겠는데, "http:"를 빼뒀어요. 그래서 제가 한 달을 헤맸네요. 저거만 복사하면 된다고 했는데...
일단 블로거 페이지에서 테마 -> html 편집 으로 들어갑니다.
그런 다음 </head> 바로 위에 다음 코드를 붙여넣어주세요.
<link href='http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css' rel='stylesheet'/>
<script src='http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
요렇게
<pre><code> ... </code></pre> 사이에 코드를 입력하면 됩니다.
마지막으로 대괄호를 비롯해서 여러 기호들을 html 문법에 사용이 되기 때문에 그대로 보이지 않아요. 변환을 해서 입력을 해야하는데
http://accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php
여기에 코드를 입력하면 자동으로 html에서 표현할 수 있는 문자들로 바꿔줍니다.
<pre><code>
... code ...
</pre></code>
참고
https://highlightjs.org/download/
https://highlightjs.org/static/demo/
댓글 없음:
댓글 쓰기