Science is common sense.: Blogger

2018년 8월 9일 목요일

블로거(Blogger)에서 소스코드 예쁘게 보이기 : highlightjs

이 글을 쓰기까지 저 나름대로 아주 오래 걸렸습니다.
블로거를 시작하고 제일 먼저 적용하려고 노력했던건데 뭔가 잘 되지 않아 오늘에서야 성공해 글을 남기네요. 한 달 좀 더 걸렸네요.

웹페이지를 다니다 보면 코드들이 예쁘게 보이는 곳이 많이 있어요. 요즘에는 네이버블로그도 코드를 입력할 수 있도록 해주던데.. 이제 블로거로 넘어올 예정이라 좀 많은 삽질을 했습니다. 이렇게 간단한 것을 가지고 고생했네요.

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>

요렇게

코드를 넣는 방법은 글을 쓸 때 html 뷰로 작성을 하면서
<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/

2018년 7월 1일 일요일

Blogger(blogspot)에 Latex 수식 입력하기

네이버 블로그를 사용하다가 Blogger로 넘어 온 첫번째 이유가 Latex 수식이다.
Blogger에서 Latex 수식을 쉽게 사용하기 위해서는 일단 html head 안에 다음 코드를 추가해줘야한다.

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js">
    MathJax.Hub.Config({extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
    inlineMath: [ ['$','$'], ["\\(","\\)"] ],
    displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
    processEscapes: true
    },
    "HTML-CSS": { availableFonts: ["TeX"] }
    });
</script>

테마에 들어가면 HTML 편집이라는 버튼이 보인다. 버튼을 눌러 들어간다.

그리고 <head>와 </head>사이에 위 코드를 붙여넣기 하면 되는데.. </head>앞에 붙여넣으면 된다.

이제부터는 Latex 수식을 사용할 수 있게 된다.

\$~\$로 감싸는 것과

\$\$~\$\$로 감싸는 것이 다르게 나타날 것이다.

수식을 \$ 하나로 감싸면 해당 줄에 그대로 나타나고, \$\$ 두 개로 감싸면 새 줄에 수식이 나타난다.

$f(x) = x^2 + 1$

하나를 사용하면 $f(x) = x^2 + 1$ 이 줄에 그대로 나오구요

$$f(x) = x^2 + 1$$

두 개를 사용하면 줄이 바뀌어서 나타납니다. $$f(x) = x^2 + 1$$

참고글 http://jaejunyoo.blogspot.com/2017/01/blogger-post-latex.html