티스토리 뷰

자기계발&팁

티스토리 소스코드 플러그인

개발자와코더사이가 PM일까? 2016. 2. 21. 20:33
반응형

올해 목표 중에는 개발 블로그 하나 만들어서 

애드센스 광고 수입 일상 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>



[데모화면]


[참고자료]

  [지원언어]



[지원테마]




저작자표시
공유하기 링크
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함