JimmyJack IT
블로그에 소스 코드 넣는 방법 본문
티스토리 블로그에 소스코드와 개인 지식을 정리하던 중(비공개 글로 정리 중), 소스 코드를 좀 더 깔끔하게 나타내고 싶은 욕구가 생김.
그럴 때 가능한 방법.
1. Color Scripter 이용하기 (https://colorscripter.com/)
Color Scripter를 활용하여 코드를 입력하고, 우측 하단의 '클립보드에 복사' 를 입력하면 다음과 같은 결과물을 얻을 수 있다.
1 2 3 4 5 6 7 8 9 | public class MainClass { public static void main(String[] args) { // TODO Auto-generated method stub System.out.println("Hello world/"); } } |
편집 가능하고 칼라풀해서 이쁘지만 역시 우측 하단의 출처가 남는 것이 거슬린다.
1 2 3 4 5 6 7 8 9 | public class MainClass { public static void main(String[] args) { // TODO Auto-generated method stub System.out.println("Hello world/"); } } |
아무리 편집해도, 사진 format에 내장된 아이콘까지 지워지지는 않는다.
간편하고 적은 고정비로 가능한 서비스이지만 아주 만족스럽지는 않다.
다른 방법을 한 번 물색해본다.
2. SyntaxHighlighter 라이브러리 이용하기.
현재 3.0.83 버전이 나온 상태. (http://alexgorbatchev.com/SyntaxHighlighter/)
대다수의 블로거들이 활용하는 라이브러리인듯 하다.
여러 블로그들이, js 파일과 CSS 파일을 다운받아, 활용하고 있는데 굳이 그렇게 하지 않아도 된다.
우리의 블로그는 항상 온라인에 연결되어 있으므로, 그냥 SyntaxHighlighter가 hosting하는 CSS 및 js 파일을 이용해도 아무 문제가 없다.
간단한 파일을 읽어오는 것이므로, 성능의 열화는 그리 심하지 않으리라...
http://alexgorbatchev.com/SyntaxHighlighter/hosting.html 의 호스팅을 활용한다.
1. 티스토리 스킨편집 관리페이지에 접속. ( https://티스토리주소/manage/design/skin/edit#/ )
예를 들면 https://jimmyjackit.tistory.com/manage/design/skin/edit#/
2. 우측상단에 'html 편집' 클릭
3. HTML 란에서, CTRL+F 를 통해 </head> 찾기.
4. </head> 태그 바로 위에, 아래의 스크립트 복사 및 붙여넣기 시전.
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js" type="text/javascript"></script> <link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"> <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css">
5. '저장' 클릭
이제 소스코드를 입력할 준비가 모두 되었다.
6. 소스코드 입력하기
이후 글쓰기에서, 사진, 슬라이드쇼, 동영상 등등이 있는 삽입 메뉴에서 외부컨텐츠를 누르면, 아래와 같은 창이 뜬다.
위와 같이 티스토리에 개제하고 싶은 소스코드를 입력하되,
<PRE class="brush:언어"> 입력하고 싶은 소스 코드 </PRE>
와 같이 입력하여 확인을 누른다.
입력하고 싶은 언어는 http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 를 방문하여, Brush aliases에 해당하는 구문을 입력해주면 된다.
아래의 예시는 java 언어로, 소스 코드를 입력하는 경우이다.
<PRE class="brush:java">
public static void main(String[] args) {
// TODO Auto-generated method stub
System.out.println("Hello world");
}
</PRE>입력을 하고나면, 왠지 회색 화면속에 코드가 뜨는데... 미리보기를 눌려 확인해보면 정상적으로 아래와 같이 나올 것이다.
public class MainClass {
public static void main(String[] args) {
// TODO Auto-generated method stub
System.out.println("Hello world");
}
}
아주 예쁘다. 만족!
'기타 > 블로그 운영 팁' 카테고리의 다른 글
| Tistory 블로그 포스팅에서 구글에서 이미지 복사후 크기 편집하기. (0) | 2018.10.27 |
|---|
Comments