STUDY/블로그

티스토리 소스코드 삽입 방법 - Colorscripter 및 SyntaxHighlighter 삽입 방법 및 테마 설정

NightOwl 2018. 8. 17. 19:00
728x90


 구글 최고! 아직 기본서의 반 쯤 공부한 왕초보이기 때문에 가능한걸 수도 있습니다만, 코딩 공부 중에 구글링을 해보면 원하는 자료는 거의 100% 찾을 수 있었습니다. 아무리 자기가 잘 알고 쉬운것 이라도 글로 표현하기에는 힘든법인데 여러 블로거들의 기막힌 설명과 정리로 도움을 많이 받았습니다. 크게 쓸모없을지도 모르지만 저도 나중에 처음 공부를 시작 할 누군가를 위해 소스를 웹에 공유해보려 합니다. 이왕 공유하는 김에 가독성 좋게 하이라이터를 이용해서 업로드 하려고 두가지 방법에 대하여 알아보았습니다. 






소스코드 포스팅 방법 1. Colorscipter




 소스코드를 업로드 하는 가장 쉬운 방법은 컬러 스크립터를 이용하는 것 입니다. 컬러스크립터는 Java, JavaScript, JSP, Python, Ruby, SQL, Swift, Visual Basic, Action Script, ASP, C, C#, CSS, HaXe, HTML, Objective C, Perl, PHP 등의 언어를 지원해주고 있습니다. 다양한 언어를 하이라이트하여 소스코드를 더 보기좋게 블로그등에 업로드 할 수 있습니다.

 사용방법은 https://colorscripter.com/  위 url으로 컬러스크립터에 접속합니다. 원하는 언어를 선택한 뒤 코드를 붙여넣고 우측아래에 있는 클립보드로 복사를 클릭해서 원하는 곳에 붙여넣으면 됩니다. Colorscripter의 최장점은 script을 지원하지 않는 네이버 블로그에도 사용이 가능합니다. 



1. Colorscipter : 업로드 결과


1
2
3
4
5
6
7
8
public class Colorscripter {
 
    public static void main(String[] args) {
        System.out.println("Hello HappyTB");
    }
 
}
 
cs



스타일패키지 항목을 통해 간단하게 색상스타일 변경이 가능합니다. 위 코드는 서브라임 블랙 으로 선택한 후 공유한 모습입니다.  가장 깔끔하고 쉬운 방법 같습니다. 





소스코드 포스팅 방법2. SyntaxHighligher

 검색 결과 제일 많이 사용하는 방법으로 보였으나, 당장 붙이기엔 몇가지 작업이 필요해서 조금 귀찮을 수 있습니다. 신택스하이라이트는 오픈소스 라이센스로 사용 가능하므로 먼저 웹사이트 http://alexgorbatchev.com/SyntaxHighlighter/ 에서 최신 zip파일을 다운 받을 수 있습니다.  


syntaxhighlighter_3.0.83.zip


 1) 위 파일을 다운 받고 압축을 풉니다. 




2) 압축을 푼 뒤, scripts, src, styles 폴더의 파일을 모두 [티스토리 관리자 페이지 → HTML/CSS → 파일업로드] 위치에서 추가버튼을 눌러 업로드 한 뒤 저장버튼을 누릅니다.



3) 아래 코드를 복사합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<scripttype="text/javascript"src="./images/shLegacy.js"></script>
<scripttype="text/javascript"src="./images/shBrushBash.js"></script>
<scripttype="text/javascript"src="./images/shBrushCpp.js"></script>
<scripttype="text/javascript"src="./images/shBrushCSharp.js"></script>
<scripttype="text/javascript"src="./images/shBrushCss.js"></script>
<scripttype="text/javascript"src="./images/shBrushDelphi.js"></script>
<scripttype="text/javascript"src="./images/shBrushDiff.js"></script>
<scripttype="text/javascript"src="./images/shBrushGroovy.js"></script>
<scripttype="text/javascript"src="./images/shBrushJava.js"></script>
<scripttype="text/javascript"src="./images/shBrushJScript.js"></script>
<scripttype="text/javascript"src="./images/shBrushPhp.js"></script>
<scripttype="text/javascript"src="./images/shBrushPlain.js"></script>
<scripttype="text/javascript"src="./images/shBrushPython.js"></script>
<scripttype="text/javascript"src="./images/shBrushRuby.js"></script>
<scripttype="text/javascript"src="./images/shBrushScala.js"></script>
<scripttype="text/javascript"src="./images/shBrushSql.js"></script>
<scripttype="text/javascript"src="./images/shBrushVb.js"></script>
<scripttype="text/javascript"src="./images/shBrushXml.js"></script>
<linktype="text/css"rel="stylesheet"href="./images/shCore.css">
<linktype="text/css"rel="stylesheet"href="./images/shThemeDefault.css">
<scripttype="text/javascript">
SyntaxHighlighter.all();
</script>
 
cs



4) 티스토리 관리자 페이지의 HTML 편집 창에서 <head> </head> 사이에 위의 코드를 붙여넣기 합니다.


 SynthaxHighlighter 사용을 위한 준비는 끝났습니다.


2. SyntaxHighlighter : 사용방법

 

 <PRE class="brush:언어;"> 업로드 용 소스 위치 </PRE>

 티스토리 html 글쓰기 화면에서 위의 PRE 태그 사이에 소스코드를 입력합니다. 언어 위치에는 html, javascript, cpp, php, java등 언어를 넣어주시면 됩니다. 



3. SyntaxHighligher : 업로드 결과 

public class Syntax {

    public static void main(String[] args) {
        System.out.println("Hello HappyTB");
    }
 
}



2.Syntaxhighlighter : 지원하는 언어


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

brush:언어 부분에 두번째 열인 Brush aliases 부분을 입력하면 됩니다.




테마 변경 하기

http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/ 홈페이지의 테마 카테고리에 테마종류 및 사용방법들이 자세히 나와있습니다. 원하는 테마를 선택 후 티스토리 관리자페이지의 html 편집모드에 들어가서 <link href="./images/shThemeDefault.css" rel="stylesheet" type="text/css"/> 부분을 수정하면 됩니다. 예를들어 이클립스 테마로 변경을 원한다면 shThemeDefault.css 부분을 shThemeEclipse.css로 변경합니다. 



728x90
저작자표시 비영리 변경금지

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

2019 블로그 활동 리뷰 & 애드센스 현실 수익  (8) 2020.01.07
애드센스 승인 및 현실 수익 & 블로그 활동 리뷰  (15) 2018.10.07

'STUDY/블로그'의 다른글

  • 현재글티스토리 소스코드 삽입 방법 - Colorscripter 및 SyntaxHighlighter 삽입 방법 및 테마 설정

관련글

티스토리툴바