블로깅을 할때 코드도 이쁘게 올리고 싶다.
이전에 LaTex를 적용했던것 처럼 Code Highlight도 있을 것 같아서 찾아보니 역시 있다.
적용방법은 티스토리 블로그에 LaTex 적용하기를 참고하면 쉽게 할 수 있다.
적용방법
https://cdnjs.com/libraries/SyntaxHighlighter 여기에 들어가서 CDN 주소를 복사해온다.
원하는 언어를 http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 여기서 확인후에 필요한 파일만 넣으면 된다.
원하는 테마는 http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/ 여기서 확인후 적용하면 된다.
나는 C++ / RDark 테마를 이용하기로 했다.
필요해 보이는 몇몇개도 넣어놓자.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreRDark.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCpp.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPlain.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.min.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();</script>
위의 내용을 <head></head> 사이에 넣어주자.
간단한 사용 방법
html 옵션을 열고
<pre class="brush:cpp"> 원하는 코드 </pre>
#include <iostream>
int main()
{
return 0;
}
<iostream>을 넣으면 </iostream>과 같이 HTML 태그를 직접 넣어주는 경우에 있을 수도 있는데
일단은 그럴때는 <iostream> 와 같은 느낌으로 일단 해주자. ㅠㅠ
'유틸리티' 카테고리의 다른 글
| Window 8에서 무선 네트워크 제거하기 (0) | 2017.12.28 |
|---|---|
| 크롬 확장 프로그램 추천 (0) | 2017.12.12 |
| 티스토리 블로그에 LaTex 적용하기 (1) | 2017.12.03 |
| 32bit 윈도우에서 2GB 이상 메모리 사용하기 (0) | 2017.10.27 |
| iTerm2 (0) | 2015.09.17 |
