tistory SyntaxHighlighter 적용하기 (프로그램 소스코드를 깔끔하게 보여주기)

관련 소스 다운로드 페이지

 

 

아래는 검색으로 찾은  관련 내용 참고 페이지들

• tistory 에서 SyntaxHighlighter 사용

  2013.09.11

  보내기

  프로그래밍/html5&css3 | 2013/09/11 09:31 Posted by bullseye 티스토리에서 SyntaxHighlighter 를 사용하는... 우선 SyntaxHighlighter 를 다운로드 받아야 겠죠?( http://alexgorbatchev.com/SyntaxHighlighter/ )에서...

  bullseye.tistory.com/93 푸른하늘과 밝은태양과 우리 블로그 내 검색

• SyntaxHighlighter 활용 하기

  2013.09.05

  보내기

  SyntaxHighlighter 는 오픈 소스 이며 클라이언트 자바 스크립트로 구성 되어 있다. 공식 사이트: http://alexgorbatchev.com/SyntaxHighlighter/ 참고 사이트: http...

  blog.whitelife.co.kr/151 White Life Story 블로그 내 검색

• SyntaxHighlighter에 Verilog Highlighting 추가하기

  어제

  보내기

  관심있다면 SyntaxHighlighter를 한번쯤 고려해보았을 것 같다. SyntaxHighlighter는 웹에 내 코드를 올릴 때, 문법을 강조해서 보통 일반적인 코딩용 에디터에서 보듯이...

  thinkpiece.tistory.com/255 THINK PIECE 블로그 내 검색

• [꾸미기] 티스토리의 소스코드 꾸미기 - syntaxhighlighter

  2013.01.09

  보내기

  syntaxhighlighter_3.0.83.zip syntaxhighlighter 사이트: http://alexgorbatchev.com/SyntaxHighlighter/ 2. 티스토리 관리자모드에서 [꾸미기] - [HTML/CSS 편집] - [파일 업로드] 로 이동합니다. 아까 압축 풀었던...

  ishyeok.tistory.com/107 Programming are endless. 블로그 내 검색

• SyntaxHighlighter 티스토리에 적용하기

  2012.12.06

  보내기

  버린 SyntaxHighlighter를 티스토리에 설치해봤습니다. 티스토리에 입성한지 이제 3일째인데, 하나씩 하나씩 가져다 붙여보려고 합니다.ㅎ SyntaxHighlighter는...

  idreaming.tistory.com/7 자유로운 영혼을 꿈꾸다 블로그 내 검색

 

많은 방법들이 있고..

 

정리하면 상단링크에서 관련 소스를 다운로드 받아서

 

티스토리 관리페이지에서 HTML/CSS 편집메뉴에 다운로드 받은 파일중

script, style 폴더에 있는 *.css, *.js 파일업로드

 

그 다음에는 html 편집 에서  업로드한 css 파일과 js 파일들을 링크추가 해줘야 겠죠..

 

 

 

<!--Start of SyntaxHighlighter--> <link rel="stylesheet" type="text/css" href="./images/shCore.css"> <link rel="stylesheet" type="text/css" href="./images/shThemeDefault.css"> <script type="text/javascript" src="./images/shCore.js"></script> <script type="text/javascript" src="./images/shBrushJScript.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/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/shBrushRuby.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> <script language="javascript"> SyntaxHighlighter.defaults['toolbar'] = false; // 툴바 설정 (기본값 True) SyntaxHighlighter.defaults['gutter'] = true; // 라인 번호 설정 (기본값 True) SyntaxHighlighter.defaults['tab-size'] = 2; // 탭 사이즈 설정 (기본값 4) SyntaxHighlighter.defaults['first-line'] = 1; // 라인 시작 숫자 (기본값 1) SyntaxHighlighter.defaults['auto-links'] = false; // 링크 설정 (기본값 true) SyntaxHighlighter.all(); </script> <!--End of SyntaxHighlighter-->

 

직접 파일 추가 하기 귀찮다면 아래와 같이 웹에 있는 파일을 직접 링크거는 방법도 있습니다.

 

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> <script language='javascript'> SyntaxHighlighter.config.tagName = 'textarea'; SyntaxHighlighter.defaults['auto-links'] = false; SyntaxHighlighter.all(); </script>

 

사용할때는  html 모드에서 보여줄 내용을 아래 태그로 감싸줍니다.

 

<TEXTAREA style="WIDTH: 100%; HEIGHT: 117px" class="brush: html;" rows=1 name=code> [소스코드] </textarea>