Romantic Developer : )

Tstory블로그에 소스코드 입력하는 스킨 적용하기! 본문

Romantic Developer/이런저런 개발이야기

Tstory블로그에 소스코드 입력하는 스킨 적용하기!

Romantic_Developer 2018. 5. 10. 11:25

안녕하세요! 영감을 주는 개발자 '방민방민' 입니다.


오늘은 개발자가 되기위해 준비하는 과정에서 시작하게 된 TSTORY 블로그에 

소스코드를 입력할수 있도록 하는 방법에 대해서 알아보고자 합니다.


저도 TSTORY 블로그를 어제부터 시작하게 되었고 그 가장 큰 이유가 바로, '

TSTORY 블로그에는 코드를 입력할 수 있다!' 였습니다. 


물론 저도 개발을 시작한지 얼마 되지 않아 처음에는 이 스킨 적용하는 작은 부분도 굉장히 어려운 것들이 많았던 것 같습니다.

저와같은 분들이 최대한 쉽게 빠르게 따라할수 있도록 포스팅해 보겠습니다 :) 


그럼 이제 시작하겠습니다 ! 




1. Syntax highlighter 다운로드


무엇보다 먼저 신텍스 하이라이터를 다운로드 합니다!


공식 홈페이지http://alexgorbatchev.com/SyntaxHighlighter/ 입니다.


다운로드는 아래의 파일을 이용해주세요~~!


syntaxhighlighter_3.0.83.zip



2. 다운로드 된 파일을 업로드하기


아래에 보이는 사진과 같이 블로그 관리로 접속합니다.(갓 태어난 신생 아가아가 블로그가 보입니다.:)




꾸미기 탭에 보시면 스킨편집 메뉴를 확인할 수 있습니다.



이후 HTML 편집에 다시 진입합니다.




해당 메뉴에 진입하면 +추가 메뉴를 통해 다운로드 받은 폴더에서 

Style 폴더와 Scripts 폴더에 있는 모든 파일을 업로드해 줍니다.





3) 소스코드 입력하기


이후 HTML 메뉴에 진입하고 아래의 코드를 입력합니다.


복붙용 코드입니다 :)

<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> <link href="./images/shCore.css" rel="stylesheet" type="text/css"> <link href="./images/shThemeEclipse.css" rel="stylesheet" type="text/css"> <script type="text/javascript"> SyntaxHighlighter.all(); $(document).ready(function () { dp.SyntaxHighlighter.HighlightAll('code'); }); </script>


4) 포스팅시 활용하기 


모든 설정을 저장한 뒤에 글을 쓸때 HTML 모드로 들어가서 소스코드를 입력해 주시면 됩니다. 



소스코드는 실제 포스팅이 가지는 HTML 코드와 구별되어야 하기 때문에 특정 틀 안에 넣어주어야 합니다.

여기에는 2가지 방법이 있습니다.


 #1

<textarea> 아래의 형태로 작성합니다.(조그만 박스형태입니다)


<textarea name="code" class="brush:어떤언어?;">


    … 소스 코드  


</textarea>



#2

<pre>는 아래의 형태로 작성합니다. (큰 전체박스 형태입니다.)


그러나 <pre>는 html 코드와 중복되어 문제가 발생할 수 있다고 합니다.


<pre class="brush:어떤언어?">


    … 소스 코드  


</pre>


HTML 체크박스 체크 상태에서 아래와 같이 정해진 틀에 따라 그 안에 넣고자 하는 소스코드를 넣어줍니다.




Brush : 어떤언어?


에서 브러쉬 네임은 아래를 참고하시기 바랍니다 :)


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


HTML 체크박스를 해제하면 단순하게 아래와 같이 적용된 것을 확인할 수 있지만 실망하지 마세요!




미리보기를 누르면 아래와 같이 코드가 멋지게 들어간것을 확인할 수 있습니다.



코드에 대한 자세한 내용은 생략하겠습니다.

정확한 코드의 내용은 아직 공부하는 단계이기도 하지만 1차적으로 TSTORY 에서 이정도의 코드만 삽입해도

개발자블로그를 운영하는데에 전혀 문제가 되지 않기 때문입니다.


코드창에 대한 다양한 테마적용이 가능하다고도 합니다! 이는 기회가 되면 또다른 포스팅에서 다루어보도록 하겠습니다.


지금까지 영감을 주는 개발자 방민방민 이었습니다.


질문사항이나 잘못된 부분이 있다면 댓글로 말씀 부탁드립니다 :) 


감사합니다 :)