드디어 코드 하이라이팅과 LaTeX 보여주기 기능을 티스토리에 추가하였습니다.
원래 텀블러에만 적용을 했었는데 앞으로 제 편의(?)를 위해서 추가했습니다.
1. 적용된 화면
일반.
<pre><code class=“lang“> code..</code></pre>를 사용.
$$ \LaTeX \\ is\, a\, document\, preparation\, system \\ $$ $$ \begin{align} E &= mc^2 \\ m &= \frac{m_0}{\sqrt{1-\frac{v^2}{c^2}}} \end{align} $$
인라인.
글..inline code!!글..
글..$\LaTeX \; E=mc^2$글..
2. 적용법
둘 HTML의 헤더부분(과 사이)에 아래의 코드를 넣어주시면 됩니다!!
2.1 Highlight JS
코드 하이라이팅을 해줍니다.
<!--Highlight js -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/darcula.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
인라인 표시를 해주기 위해 아래 코드를 추가한다.
그냥 <p></p>안에서 <code></code>를 사용하면 된다.
<script>
$(document).ready(function() {
$('code').each(function(i, block) {
hljs.highlightBlock(block);
});
});</script>
바로 위 기능은 <p>에서 <code>를 사용하게 해주는 거고,
CSS에
p > code.hljs, li > code.hljs { display: inline; padding: .2em }를 덧붙이면 일반 글들과도 자연스럽게 스며들어간다.
2.2 MathJax
LaTeX 문법을 사용하여 이쁜 수학 식을 출력할 수 있습니다. $표시 두 개를 쌍으로 사용하면 됩니다.
<!--MathJax(LaTeX) -->
<script type="text/javascript" async="" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
인라인은 $ 표시를 쌍으로 사용하며, 위의 스크립트가 로딩 되기 전에
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS": {
messageStyle: "normal",
linebreaks: {
automatic: false
}
},
tex2jax: {
inlineMath: [["$","$"],["\\(","\\)"]],
displayMath: [["$$","$$"],["\\[","\\]"]],
processEscapes: true
},
TeX: {
Macros: {
tr: "{\\scriptscriptstyle\\mathrm{T}}",
}
}
});
</script>를 넣었다.
컬러박스 기능을 사용하기 위해 인라인 코드 표시 중 TeX:에
Macros: {
tr: "{\\scriptscriptstyle\\mathrm{T}}",
},
extensions: ["color.js"]extension으로 추가하였다.
2.3 코딩용 폰드(Hack과 D2coding 적용)
<pre>와 <code>영역에서 영문은 Hack, 한글은 D2coding을 적용하여 로딩하도록 하였습니다.
아래 코드도 헤더부분에 넣어주고,
<!--Hack Font-->
<link href="//cdn.jsdelivr.net/npm/hack-font@3/build/web/hack.css" rel="stylesheet" type="text/css">
<!--D2coding Font-->
<link href="//cdn.jsdelivr.net/gh/joungkyun/font-d2coding/d2coding.css" rel="stylesheet" type="text/css">
pre와 code에만 적용하기 위해 css파일에
pre, code { font-family: Hack, D2Coding, 'D2 coding', monospace; }를 추가했습니다.
3. 사용법.
아래의 텀블러 글들을 참고.
제 텀블러 사이트에도 HTML을 수정하여 적용이 되어 있지만, 원래 텀블러에서 제공하는 기능이 아니기 때문에 깨져 보입니다.