티스토리 소스코드 플러그인
올해 목표 중에는 개발 블로그 하나 만들어서
애드센스 광고 수입 일상 vs 개발 블로그중에 어느 것이 더 좋을까?라는 것을 확인 해보고 싶어서
블로그를 하나 더 만들었습니다.
그런데.. 개발 블로그에는 소스 코드를 보여 줘야 하는데
남들은 잘만 보여주는데 ㅋㅋㅋ 그래서 찾아보았습니다.
"티스토리 소스코드 플러그인 Syntaxhighlighter"
설치 방법은 우선 구글에서 Syntaxhighlighter를 찾아 봅니다.
다운로드 페이지에서 소스를 다운을 받습니다.
압축 syntaxhighlighter_3.0.83.zip 파일을 풀고 아래의 2개의 폴더 세부 파일을
티스토리 관리페이지->꾸미기->HTML/CSS 편집 메뉴에 파일업로드에 올립니다.
</head> 태그 바로 위에 아래의 소스코드를 붙혀 넣어 줍니다.
<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/shBrushDelphi.js"></script>
<script type="text/javascript" src="./images/shBrushDiff.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/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushScala.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushVb.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css">
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
그 다음에 <body>를 찾아서 아래의 코드로 덮어 씌워줍니다.
<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">
이제 기본 작업은 완료 되었습니다.
실제로 쓸때는 소스 코드에는 아래와 같이 html를 마크를 하고 아래와 같이 적어 놓으면 이쁜 코드가 보입니다.
<textarea name="code" class="brush:cpp;"> TEST;</textarea>
[데모화면]
[참고자료]
[지원언어]
[지원테마]
