안녕하세요. 다른분들 블로그를 살펴보면 소스가 다른 블로그들 하곤 다르게 반짝반짝 빛나
는 곳들이 있죠.
티스토리에서 소스들을 예쁘게 보려고 하면 대략 3가지 방법이 있더군요.
1. 이쁘게 소스를 변경해주는 사이트를 이용해서 변경처리
2. 소스를 하나하나 수정해준다.
3. 플러그인을 사용해서 이쁘게 처리
오늘은 블로그를 꾸미는 SyntaxHighlighter 에 대해서 알아보겠습니다.
이녀석은 스크립트로 되어있는 녀석이라 skin.html 파일을 수정하고 js파일을 업로드를 해주어야 동작을 합니다.
다운로드 : http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current
파일다운로드
파일을 다운로드 하시고 압축을 풀면 아래와 같은 파일이 생기는데 필요한건 scripts 폴더와 styles 폴더입니다.
티스토리 관리자의 HTML/CSS 편집- 파일업로드 탭에서 해당 폴더의 파일들을 올려줍니다.
추가버튼를 클릭하시면 파일을 올리실 수 있습니다.
파일을 추가하시고 난뒤 HTML/CSS 탭을 클리하셔서 skin.html 을 수정해줍니다.
skin.html 수정
헤더부분에 다음 코드를 추가해주세요. <head> </head> 사이에 넣어주시면 됩니다. </head> 앞이 편하실겁니다.
그리고 마지막으로 <body></body> 사이에 코드를 넣어주시면 됩니다. 여기도 </body> 앞이 편하실꺼에요.
적용법
사용방법은 소스코드를 html모드에서 <pre class="brush:브러쉬이름"></pre>로 감싸주면됩니다.
브러쉬이름
| ActionScript3 | as3, actionscript3 | shBrushAS3.js |
| Bash/shell | bash, shell | shBrushBash.js |
| ColdFusion | cf, coldfusion | shBrushColdFusion.js |
| C# | c-sharp, csharp | shBrushCSharp.js |
| C++ | cpp, c | shBrushCpp.js |
| CSS | css | shBrushCss.js |
| Delphi | delphi, pas, pascal | shBrushDelphi.js |
| Diff | diff, patch | shBrushDiff.js |
| Erlang | erl, erlang | shBrushErlang.js |
| Groovy | groovy | shBrushGroovy.js |
| JavaScript | js, jscript, javascript | shBrushJScript.js |
| Java | java | shBrushJava.js |
| JavaFX | jfx, javafx | shBrushJavaFX.js |
| Perl | perl, pl | shBrushPerl.js |
| PHP | php | shBrushPhp.js |
| Plain Text | plain, text | shBrushPlain.js |
| PowerShell | ps, powershell | shBrushPowerShell.js |
| Python | py, python | shBrushPython.js |
| Ruby | rails, ror, ruby | shBrushRuby.js |
| Scala | scala | shBrushScala.js |
| SQL | sql | shBrushSql.js |
| Visual Basic | vb, vbnet | shBrushVb.js |
| XML | xml, xhtml, xslt, html, xhtml | shBrushXml.js |
사용예제
<pre class="brush:js">
<script>
alert("테스트입니다.");
</script>
</pre>
주의사항
소스를 첨부하실때는 꼭!! HTML모드에서 첨부하셔야하며, HTML모드를 다시 체크해제하시면 소스가 한줄로 나오는 버그가 있습니다. 유의 하시기 바랍니다. HTML모드에서 소스치환한뒤 바로 저장하셔야 버그가 안생기네요..
쉽게 처리하는 방법은 저의 경우 치환자로 aaaaaaaaaaaaaaaaaaaaaaa,bbbbbbbbbbbbbbbbbb 이렇식으로 넣고 HTML모드에서 그부분을 하이라이트적용된 소스로 바꿉니다. 참고하세요^^
'IT정보센터 > 환경설정' 카테고리의 다른 글
| iptime 공유기 설정 및 팁 안내 (0) | 2017.09.12 |
|---|---|
| 아이피주소 확인, 내부아이피 확인방법 (0) | 2017.09.09 |
| iptime 공유기 2대 연결 꿀팁 (38) | 2017.07.18 |
| 유튜브 반응형 크기조절 방법 (0) | 2017.05.23 |
| 시놀로지 root 계정 초기화하는 방법(결론은 할필요가 없음) (0) | 2016.04.19 |
| 안드로이드 개발 환경 구축하는 방법(안드로이드 스튜디오 다운로드 및 설치) (0) | 2015.11.29 |
| PHP 환경설정 - 처음 시작을 위한 APM 설정 with 윈도우8 (0) | 2015.07.07 |
| [환경설정] 아파치 톰캣 설치 - 웹서버시작 (0) | 2015.06.29 |
| 하이차트(highchart) Credits 링크제거 방법 (0) | 2015.06.22 |
| [환경설정] 자바 JDk 설치 와 환경변수 설정 (0) | 2015.06.22 |