게시물에 소스 코드 code 이쁘게 넣기게시물에 소스 코드 code 이쁘게 넣기
Posted at 2015. 7. 2. 22:23 | Posted in etc
블로그나 개발관련 검색을 통하여 사이트들 돌아다니다 보면
IDE환경과 같이 소스코드들이 예쁘게 보기좋게 게시물에 포함되어 올라와있는것을 볼 수 있습니다.
저도 그래서 검색을 통하여 알게 되었는데 생각보다 사용법이 쉽습니다.
가장 많이 사용하는것 같은(?) Alex Gorbatchev SyntaxHighlighter 를 소개하겠습니다.
http://alexgorbatchev.com/SyntaxHighlighter/
Download를 눌러 파일을 받습니다.
지금 현재 최신버전 3.0.83 첨부합니다.
syntaxhighlighter_3.0.83.zip
압축을 풀고
/scripts 폴더와 /styles 폴더안에 있는
.js 파일과 .css 파일을 전부 업로드 해줍니다.
그리고 티스토리 skins.html 파일을 수정해줍니다.
<html>
<head>
<!-- ... 중략 -->
<!-- Syntaxhighlighter Start -->
<!-- 필요한 파일들을 html에서 적당히 불러줍니다. -->
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<link rel=stylesheet type=text/css href="./images/shCore.css">
<!-- 테마는 적당히 골라서 css를 입혀줍니다. 전 shThemeRDark.css 이므로 shCoreDefault.css는 주석처리 -->
<!-- <link rel="stylesheet" type="text/css" href="./images/shCoreDefault.css" /> -->
<link rel=stylesheet type=text/css href="./images/shThemeRDark.css">
<!-- 저는 툴바를 제거할 것이므로 false 설정을 해줍니다. -->
<script type="text/javascript">
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();
</script>
<!-- Syntaxhighlighter End -->
</head>
<!-- body 시작태그 안에 onload속성을 추가해줍니다. -->
<body onload="dp.SyntaxHighlighter.HighlightAll('code');">
</body>
</html>
게시물에서 사용할 때는 HTML 모드에서 다음과 같이 사용합니다.
<pre class="brush: java" >
∼ 소스코드 내용
</pre>
혹은
<script class="brush: html" type=syntaxhighlighter><![CDATA[
∼ 소스코드 내용
]]></script>
<pre>태그 혹은 <script>태그안에 class="brush: " 에 어떤 언어를 강조하여 보여줄지 적어주면 됩니다.
브러쉬 종류는 다음과 같습니다.
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
자세한 사용법과 설정 그리고 테마선택은 해당 홈페이지에서 메뉴를 통해 확인하시면 됩니다.
하지만 이상하게 <html><head><body>와 같은 주요 태그들을 사용할때는
오류를 내뿜는데 이유는 정확히 모르겠습니다. 열고닫힘이 헷갈리나 봅니다.
본 게시물 작성할때에는 <html> 태그를 <html> 와 같은 형태로 html 특수문자 코드표를 보고 작성하였습니다.
