코딩 관련 블로그 운영을 하는 사람이라면 누구나 소스 코드를 깔끔하게 포스팅 하고 싶을 듯합니다.
이번 포스팅에는 소스코드를 에디터처럼 보이게 포스팅하는 법을 알아보도록 하겠습니다.
<소스코드를 입력하는 방법은 2가지가 있습니다>
1. Color Scripter
-> 소스코드를 변환시켜주는 웹서비스를 이용하는 방법입니다.
2. SnytaxHighlighter
-> 자바스크립트에 오픈소스를 입력하여 포스팅시 필요에 따라 태그를 달아 사용하는 방법입니다.
● Color Scripter, 컬러 스크립트
1. https://colorscripter.com/ 에 접속(클릭시 새창으로 이동)
2. 소스 입력
3. 언어 선택
4. 클립보드에 복사 클릭
5. ctrl + v로 붙여넣기
● SyntaxHighlighter, 신택스 하이라이터
1. zip 파일 다운 후 압축풀기
http://alexgorbatchev.com/SyntaxHighlighter 에 접속하여 파일 다운
2. 압축푼 파일 중 scriptes 폴더와 styles 폴더의 내용 모두를 파일업로드
3. 아래의 소스를 HTML 문서중 <head></head> 사이에 추가
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!-- source highlighter start --> <script src="./images/shCore.js" type="text/javascript"></script> <script src="./images/shAutoloader.js" type="text/javascript"></script> <script src="./images/shBrushAppleScript.js" type="text/javascript"></script> <script src="./images/shBrushAS3.js" type="text/javascript"></script> <script src="./images/shBrushBash.js" type="text/javascript"></script> <script src="./images/shBrushColdFusion.js" type="text/javascript"></script> <script src="./images/shBrushCpp.js" type="text/javascript"></script> <script src="./images/shBrushCSharp.js" type="text/javascript"></script> <script src="./images/shBrushCss.js" type="text/javascript"></script> <script src="./images/shBrushDelphi.js" type="text/javascript"></script> <script src="./images/shBrushDiff.js" type="text/javascript"></script> <script src="./images/shBrushErlang.js" type="text/javascript"></script> <script src="./images/shBrushGroovy.js" type="text/javascript"></script> <script src="./images/shBrushJava.js" type="text/javascript"></script> <script src="./images/shBrushJavaFX.js" type="text/javascript"></script> <script src="./images/shBrushJScript.js" type="text/javascript"></script> <script src="./images/shBrushPerl.js" type="text/javascript"></script> <script src="./images/shBrushPhp.js" type="text/javascript"></script> <script src="./images/shBrushPlain.js" type="text/javascript"></script> <script src="./images/shBrushPowerShell.js" type="text/javascript"></script> <script src="./images/shBrushPython.js" type="text/javascript"></script> <script src="./images/shBrushRuby.js" type="text/javascript"></script> <script src="./images/shBrushSass.js" type="text/javascript"></script> <script src="./images/shBrushScala.js" type="text/javascript"></script> <script src="./images/shBrushSql.js" type="text/javascript"></script> <script src="./images/shBrushVb.js" type="text/javascript"></script> <script src="./images/shBrushXml.js" type="text/javascript"></script> <script src="./images/shLegacy.js" type="text/javascript"></script> <link href="./images/shCore.css" rel="stylesheet" type="text/css"> <link href="./images/shThemeMidnight.css" rel="stylesheet" type="text/css"> <script type="text/javascript"> SyntaxHighlighter.defaults['toolbar'] = false; SyntaxHighlighter.all() </script> <!-- source highlighter end --> | cs |
4. <body>부분을 아래의 소스로 변환
1 | <body Onload="dp.SyntaxHighlighter.HighlightAll('code');"> | cs |
만약 스킨을 적용해서 body 부분이 <body>가 아닌 다른 것들이 적혀있다면
Onload="dp.SyntaxHighlighter.HighlightAll('code');"
이부분만 추가해주시면 됩니다.
5. 사용법
소스 입력할 때 HTML 모드로 변환후 아래 코드 틀안에서 소스를 작성하시면 됩니다.
1 2 3 | <textarea name="code" class="brush: 사용하는 언어;"> 소스코드 </textarea> |
<예시>
1 2 3 4 5 6 7 | <textarea name="code" class="brush: cpp;"> #include <stdio.h> int main(){ printf("Hello World\n"); return 0; } </textarea> | cs |
syntaxhighlighter_3.0.83.zip제 올려둔 파일의 무결성은 무결성 검사 프로그램을 이용하여 무결성을 확인 할 수 있습니다.
플러그인 업로드
1. 압축파일의 압축을 풀면 scripts, styles 폴더가 있는지 확인합니다.
2. 티스토리 관리 화면에서 좌측에 [꾸미기]->[HTML/CSS 편집]를 클릭 합니다.
3. 우측 상단에 파일 업로드 항목을 클릭 합니다.
4. 우측 하단에 추가 버튼을 클릭합니다.
추가 버튼을 누르면 파일 선택창이 뜨는데요. 그 화면에서 scripts, styles 폴더에 있는 모든 파일을 선택해서 업로드하면 플러그인 업로드가 완료됩니다. 참고로 파일들을 다중으로 선택해서 추가 가능합니다.
플러그인 적용하기
1. 티스토리 관리 화면에서 좌측에 [꾸미기]->[HTML/CSS 편집]를 클릭 합니다.
2. 우측 상단에 HTML 항목을 클릭 합니다.
3. 아래 소스코드에서 아래와 같이 수정해 줍니다.
(HTML에대해서 잘 모르신다면 다른 소스가 수정되지 않도록 조심하세요.)
</head>바로 위에 아래 소스를 추가하세요.
</head>의 위치는 Ctrl + F 로 찾으시면 됩니다.
<body>를 아래와 같이 변경해 주세요. 저 같은 경우 </head>바로 아래 있었습니다.
<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">
4. 마지막으로 저장 버튼을 누르시면 됩니다.
플러그인 사용하기
플러그인은 글을 작성하실 때 사용하실 수 있는데요. 소스코드를 입력하시고 HTML모드로 변경하신 다음에 해당 소스코드 가장 처음에
<textarea name="code" class="brush:xml;">
를 추가하시고 마지막에는
</textarea>
를 추가하시면 적용됩니다. 그리고 brush: 옆에는 적용할 언어를 입력하시면됩니다.
언어 관련 참조 주소
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
|
Brush name |
Brush aliases |
File name |
|
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 |
'프로그래밍 > ETC...' 카테고리의 다른 글
| 조직, 프로젝트 구성원의 역할 (0) | 2018.01.07 |
|---|---|
| [ 개발자 업무 파악 ] SI와 SM의 차이와 하루일과 (0) | 2018.01.03 |
| [ 개발자 업무 파악 ] Front-end 개발자와 Back-end 개발자 (0) | 2018.01.03 |
| Eclipse 에서 Open with broswer 단축키 설정 (0) | 2017.12.17 |
| 책 살 것 (0) | 2017.12.17 |