'etc'에 해당되는 글 1건
게시물에 소스 코드 code 이쁘게 넣기게시물에 소스 코드 code 이쁘게 넣기
Posted at 2015. 7. 2. 22:23 | Posted in etc
블로그나 개발관련 검색을 통하여 사이트들 돌아다니다 보면
IDE환경과 같이 소스코드들이 예쁘게 보기좋게 게시물에 포함되어 올라와있는것을 볼 수 있습니다.
저도 그래서 검색을 통하여 알게 되었는데 생각보다 사용법이 쉽습니다.
가장 많이 사용하는것 같은(?) Alex Gorbatchev SyntaxHighlighter 를 소개하겠습니다.
http://alexgorbatchev.com/SyntaxHighlighter/
Download를 눌러 파일을 받습니다.
지금 현재 최신버전 3.0.83 첨부합니다.
압축을 풀고
/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 특수문자 코드표를 보고 작성하였습니다.