티스토리 SyntaxHighlighter 테마 적용 하기 (소스 코드 색넣기)

블로그 관리 2018. 4. 25. 21:51

티스토리에 SyntaxHighlighter 적용하는 방법 : http://hijuworld.tistory.com/25


SyntaxHighlighter 에 다양한 테마를 적용 시켜보자.


우선 블로그 관리에가서 스킨 편집을 누르자.




그리고 html 편집을 누르자.



아래 그림에 보면 지난번 SyntaxHighlighter 를 업로드 할때 추가한 html 코드가 보인다.


빨간줄이 가있는 shThemeDefault.css가 티폴트 테마이다.


이것을 변경하면 테마를 편경 할 수 있다.


 테마 이름

 CSS 이름

 Default 

 shThemeDefault.css

 Django

 shThemeDjango.css

 Eclipse 

 shThemeEclipse.css

 Emacs 

 shThemeEmacs.css

 Fade To Grey

 shThemeFadeToGrey.css 

 Midnight

 shThemeMidnight.css 

 RDark

 shThemeRDark.css


위에 테마에 맞춰서 shThemeDefault.css를 다른 것 으로 바꿔주면 된다.

나는 shThemeDefault.css를 shThemeRDark.css 로 변경 하였다.


아래 적용하기전에 코드


아래 적용 후에 코드 이다.



각 테마별로 어떻게 변하는지 공식 사이트에서 캡쳐해왔다.




1. 테마 이름 : Default 

shThemeDefault.css 





2. 테마 이름 : Django 

shThemeDjango.css





3. 테마이름 : Eclipse 

shThemeEclipse.css





4. 테마 이름 : Emacs 

shThemeEmacs.css





5. 테마 이름 : Fade To Grey 

shThemeFadeToGrey.css 





6. 테마 이름 : Midnight 

shThemeMidnight.css 





7. 테마 이름 : RDark 

shThemeRDark.css






Brush nameBrush aliasesFile name
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js



저작자표시 비영리

'블로그 관리' 카테고리의 다른 글

티스토리(tistory)에 SyntaxHighlighter를 적용하여 소스코드 글자색 변경하기  (0) 2018.04.25
Posted by 꿈만은공돌
,

티스토리(tistory)에 SyntaxHighlighter를 적용하여 소스코드 글자색 변경하기

블로그 관리 2018. 4. 25. 21:24

 네이버 블로그와 다르게 티스토리(tistory)의 경우에 프로그래밍 한 소스코드를 올리는데에 불편한 점이 있다.

그래서 이번 포스팅에서는 소스코드를 깔끔하게 올리는 많이 사용되는 SyntaxHighlighter 를 이용하여 블로그에 적용시키는 방법에 대해서 알아보자. 오픈소스 기반이고 블로그에 한번 적용시켜 놓으면 계속해서 사용할 수 있다. 


자세한 내용은 아래 SyntaxHighlighter 공식 사이트와 git을 참고하도록 하자.


http://alexgorbatchev.com/SyntaxHighlighter/


https://github.com/syntaxhighlighter/syntaxhighlighter


SyntaxHighlighter 에 경우 처음 파일을 블로그에 업로드 하고 셋팅을 하는데 조금 귀찮을 수도 있지만 최초에 한번만 해두면 다음 부터 편하게 쓸 수 있다.




우선 아래 첨부파일을 다운받아 압축을 풀어야 한다. 


syntaxhighlighter_3.0.83.zip




압축을 풀면 아래와 같이 폴더와 파일들이 있다. scripts 파일과 styles 파일이 핵심이다. 나머지 파일은 삭제해도 무관하다. script 파일은 스크립트 파일이고 styles 파일은 스타일 시스라고해서 css파일이다. 여러 타입이 존재하고 마음에 드는 것을 선택하면 된다. 스타일을 선택하는 것은 다음 포스팅에 소개하도록 하겠다.



이제 다운받은 소스코드를 블로그에 업로드 해야 한다. 티스토리 블로그의 블로그 관리 페이지에서 아래 그림과 같이 스킨 편집 버튼을 누르자. 




그러면 스킨 편집 페이지가 뜨는데 아래 그림과 같이 html 편집 버튼을 누르자. 블로그에 틀등을 html을  편집할 수 있게 티스토리에서 제공해주는 기능이다.



그리고 위에 3가지 탭중에 파일 업로드 탭을 누른 후 처음 다운받았던 파일들을 업로드 하자. 아래에 있는 추가버튼을 누르면 업로드 할 수 있는 창이 뜬다. 




아까 다운받았던 파일에 scripts 폴더에 파일들을 모두 업데이트 하자.



다음으로 styles 폴더에 css 파일들을 모두 업데이트 시키자.




그리고 아래 그림과 같이 HTML 버튼을 누른 후 아래 소스코드를 복사하여 </head> 앞쪽에 붙여넣기를 하고 저장 해주자. <head>와 </head> 사이에 업데이트해주면 된다. 





파일업로드를 다하고 heml 코드도 입력했다면 이제 모든 준비가 끝났다.

이제 블로그에 소스코드를 올릴때 HTML 을 체크한후 아래와 같이 입력하면 된다.


<pre class='brush:html'>

소스코드 입력

</pre>


아래 그림을 참고하자.



미리보기를 해보면 아래와 같이 잘 동작하는 것을 볼 수 있다.





하지만 먼가 색상이 마음에 안들거나 할 수 있다. 이를위해 여러 스타일을 제공해준다. 아래 링크를 참고해서 다양하게 적용시켜보며 가장마음에 드는 스타일을 적용시키고록 하자.

다양한 테마 적용 시키기 : http://hijuworld.tistory.com/26


개인적으로는 color scripter라는 tool을 많이사용 한다. 두가지 중에 마음에드는 것을 사용하도록 하자. 편의성 면에서는 color scripter가 더 좋다. 해당 툴은 구글에 검색해보면 쉽게 사용할 수 있다. 데스크탑 버전도 존재하기 때문에 컴퓨터에 설치해놓으면 언제든 쉽게 사용이 가능하다.



저작자표시 비영리

'블로그 관리' 카테고리의 다른 글

티스토리 SyntaxHighlighter 테마 적용 하기 (소스 코드 색넣기)  (0) 2018.04.25
Posted by 꿈만은공돌
,

티스토리툴바