| [서해] 이원반도 | 2015.09.08 |
| 간월암 | 2015.04.29 |
| 겨울바다 | 2014.12.22 |
| 보면 빠져드는 영상 | 2014.10.31 |
| Hiren's bootCD를 USB메모리에 설치 하고 Hiren's bootCD에 Windows 7 PE 포함시키기 | 2014.10.25 |
| 전유나 - 너를 사랑하고도 (1990年) 1 | 2014.10.25 |
| 덕유산 | 2014.10.21 |
| 블로그(티스토리)에 소스 코드 삽입(하이라이트) Syntax Highlighter | 2014.10.17 |
| 음악으로 | 2014.10.08 |
| Suspiranno (빗속으로) - Carmelo Zappulla | 2014.10.07 |
조용한 곳으로 떠나고 싶은 순간 가장 고민되는 것은 "어디로 가지" 일꺼라고 생각됩니다.
어디로 갈지 고민 하시는 분께 추천해 드릴 여행지입니다.
태안의 땅끝마을 "이원반도"
수도권, 대전에서 대략 2시간 30분 정도 소요
이원반도를 중심으로 우측은 간조시 뻘이 조정되어 "조개잡이"가 가능합니다.
좌측으로는 낚시를 포인트 들이 있는데, 올해는 작년에 비해 많이 안잡힌다고 하네요.
반도를 중심으로 좌우측으로 많은 펜션들이 자리 잡고 있는데, 여기 펜션들 정말 좋습니다.
연인과 가족과 조용하게 분위기 있게 쉬다 가실분들이라면 강추 합니다.
펜션 정보
산토리니 http://www.0416750123.com/
블루라군 [저는 여기서 하루 지냈는데 석양이 정말 예술이였습니다.]
http://www.pensionbluelagoon.com/
메종드메르 http://www.psmaison.com/
별궁
아침바다 펜션
| 매듭법 (0) | 2018.12.25 |
|---|---|
| Topaz Impression (0) | 2017.09.20 |
| 봄에피는 꽃 (0) | 2017.01.15 |
| 보면 빠져드는 영상 (0) | 2014.10.31 |
| 전유나 - 너를 사랑하고도 (1990年) (1) | 2014.10.25 |
| 매듭법 (0) | 2018.12.25 |
|---|---|
| Topaz Impression (0) | 2017.09.20 |
| 봄에피는 꽃 (0) | 2017.01.15 |
| 겨울바다 (0) | 2014.12.22 |
| 전유나 - 너를 사랑하고도 (1990年) (1) | 2014.10.25 |
 |
| '파티션 관리'를 누르면 포맷상자가 나옵니다. |
 |
| 'MBR 작업'을 누릅니다. |
Hiren's bootCD에 Windows 7 PE 포함시키기( PHINOCOM SSD펌웨어 업그레이드 방법)
 |
| 부팅 된 후 모습 |
| 개인통관 고유부호 발급이 필수적 입니다. 해외직구 필독 ~ (0) | 2018.06.29 |
|---|---|
| 해외직구 관세 낼까? 말까? (0) | 2018.06.29 |
| Poweramp 2.0.5.apk 에 대해서 (0) | 2015.11.09 |
| 헬리코박터 치료약 (0) | 2015.10.29 |
| 블로그(티스토리)에 소스 코드 삽입(하이라이트) Syntax Highlighter (0) | 2014.10.17 |
| 매듭법 (0) | 2018.12.25 |
|---|---|
| Topaz Impression (0) | 2017.09.20 |
| 봄에피는 꽃 (0) | 2017.01.15 |
| 겨울바다 (0) | 2014.12.22 |
| 보면 빠져드는 영상 (0) | 2014.10.31 |
1. 개요
블로그의 포스팅할 내용들을 고민하던 중 아무래도 직업도 직업이고하니 IT관련 지식을 포스팅 해보자 마음 먹었습니다.
하지만 텍스트로 이루어진 소스코드를 포스팅 할 경우 너무나 무미건조해 보이기 때문에 여기저기 기웃거리던 중
딱 마음에 들어 사용하게 된 Syntax Highlighter 3.0
이 소스코드 하이라이터의 소개 및 설치 방법에 대해 설명하고자 합니다.
※ 티스토리를 사용하고 있는 분들 대상의 글입니다. 다른 설치형, 개방형 블로그들은 비슷한 방법으로 가능하겠지만
네이버, 다음 블로그 같은 폐쇠형 블로그는 불가능 할 수도 잇습니다.
2. 본론
2.1 설치
2012년 7월 18일 기준 최신버전을 첨부합니다.
syntaxhighlighter_3.0.83.zip 클릭!!!!
또는 제작자의 홈페이지 주소(http://alexgorbatchev.com/SyntaxHighlighter/) 에서 다운로드 합니다.
압축 파일을 압축해제 합니다.
빠른 설치를 위해 우리가 필요한 것은
"scripts 폴더 안의 .js 파일과 styles 폴더 안의 .css 파일"들입니다.
티스토리 관리자 기능에 로그인하여 다음 그림과 같이 파일을 업로드 합니다.
좌측 메뉴의 [HTML/CSS 편집] - [파일업로드] 탭 - 하단의 [+추가] 버튼을 클릭합니다.
파일다이얼로그 화면에서 위에 설명한 *.js 와 *.css들을 모두 선택하여 추가 하도록 합니다.
이제 스킨의 html을 편집할 차례입니다. [HTML/CSS] 탭을 클릭합니다.
skin.html 부분에 편집을 시작합니다.
<head> 태그와 </head> 태그 사이 아무곳에나 아래의 코드를 추가합니다.
눈치가 빠르신분들은 알겠지만
./images/shBrushCpp.js, ./images/shBrushJava.js 등 "shBrush" 뒤에 각각 프로그래밍 언어별로 하이라이트 양식이 따로 존재합니다. 내가 사용하지 않을 언어의 경우 삭제해도 상관 없습니다.
|
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 |
<script src="./images/shCore.js" type="text/javascript"></script><script src="./images/shLegacy.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><link href="./images/shCore.css" rel="stylesheet" type="text/css"><link href="./images/shThemeDefault.css" rel="stylesheet" type="text/css"> |
그 다음 javascript 를 실행하기 위해 skin.html의 맨 마지막 부분 </body></html> 앞부분에 아래의 코드를 추가합니다.
|
1
2
3
4 |
<script type="text/javascript"> SyntaxHighlighter.defaults['toolbar'] = false; SyntaxHighlighter.all();</script> |
꼭 <body></body> 태그 사이에 body의 마지막 부분에 추가하셔야 합니다.
화면이 모두 로드되고서 하이라이트 기능을 실행하는 소스코드입니다.
[저장] 버튼을 클릭하여 편집한 skin.html을 저장합니다.
2.2 글에 적용하기
자 이제 밑준비는 모두 끝났습니다. 실제로 사용할 일만 남았습니다.
<pre> 태그와 <script> 태그를 이용하는 방법이 있습니다. 저는 전자의 <pre> 태그를 사용하는 방법을 설명하겠습니다.
<script> 태그가 궁금하시다면 제작자의 홈페이지에서 확인 하십시오. ----> http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html
---------------------------------------------------------------------
String.prototype.replaceAll = function(str1, str2)
{
var temp_str = "";
if (this.trim() != "" && str1 != str2)
{
temp_str = this.trim();
while (temp_str.indexOf(str1) > -1)
{
temp_str = temp_str.replace(str1, str2);
}
}
return temp_str;
}
---------------------------------------------------------------------
위와 같은 소스 코드를 하이라이트 하고 싶다 했을때 티스토리 글쓰기 화면에서 우측 상단의 "HTML" 을 체크하여
아래의 코드를 추가합니다.
<pre class="brush: 원하는 프로그래밍언어"> 입니다.
brush 뒤에 java, html, css, cpp 등을 지정하시면 됩니다.
---------------------------------------------------------------------
<pre class="brush: javascript">
String.prototype.replaceAll = function(str1, str2)
{
var temp_str = "";
if (this.trim() != "" && str1 != str2)
{
temp_str = this.trim();
while (temp_str.indexOf(str1) > -1)
{
temp_str = temp_str.replace(str1, str2);
}
}
return temp_str;
}
</pre>
---------------------------------------------------------------------
2.3 결과
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 |
String.prototype.replaceAll = function(str1, str2){ var temp_str = ""; if (this.trim() != "" && str1 != str2) { temp_str = this.trim(); while (temp_str.indexOf(str1) > -1) { temp_str = temp_str.replace(str1, str2); } } return temp_str;} |
3. 결론
소스 하이라이터 기능을 찾기 위해 몇가지 기능들을 살펴보았으나 제 기준에서 가장 효율적이다라는 생각이 들어
이렇게 정리하게 되었습니다.
소스코드를 포스팅하는 대상들이 프로그래밍과 컴퓨터에 어느정도 지식이 있다 생각되었기에
간략하게 설명으로 글을 마칩니다.
읽어주셔서 감사합니다.
| 개인통관 고유부호 발급이 필수적 입니다. 해외직구 필독 ~ (0) | 2018.06.29 |
|---|---|
| 해외직구 관세 낼까? 말까? (0) | 2018.06.29 |
| Poweramp 2.0.5.apk 에 대해서 (0) | 2015.11.09 |
| 헬리코박터 치료약 (0) | 2015.10.29 |
| Hiren's bootCD를 USB메모리에 설치 하고 Hiren's bootCD에 Windows 7 PE 포함시키기 (0) | 2014.10.25 |
| [GoGoDokdo!]독도는우리땅 플래시몹(Dokdo is Korea Land) 20120225 서울역편(공식일정) (0) | 2018.11.25 |
|---|---|
| 일반인 20대가 소름돋게 부른 김광석 '잊어야 한다는 마음으로' Cover (유니커즈 직캠) (0) | 2018.11.25 |
| 최고의 댄서 60명이 펼치는 환상의 플래쉬몹 "토토즐 슈퍼콘서트" (0) | 2018.11.25 |
| Adamo - La Nuit (0) | 2015.11.30 |
| Suspiranno (빗속으로) - Carmelo Zappulla (0) | 2014.10.07 |
| [GoGoDokdo!]독도는우리땅 플래시몹(Dokdo is Korea Land) 20120225 서울역편(공식일정) (0) | 2018.11.25 |
|---|---|
| 일반인 20대가 소름돋게 부른 김광석 '잊어야 한다는 마음으로' Cover (유니커즈 직캠) (0) | 2018.11.25 |
| 최고의 댄서 60명이 펼치는 환상의 플래쉬몹 "토토즐 슈퍼콘서트" (0) | 2018.11.25 |
| Adamo - La Nuit (0) | 2015.11.30 |
| 음악으로 (0) | 2014.10.08 |
