RainStar Story

티스토리」Syntaxhighlighter 소스코드 사용방법 본문

Developer/Develop

티스토리」Syntaxhighlighter 소스코드 사용방법

레인스타 2017. 10. 26. 22:47


포스팅 작성시 태그 또는 프로그램소스를 표현할 수 있는 소스코드 사용법으로 대다수가 사용하는 Syntaxhighlighter 3.0.83 입니다.

파일 업로드 방식이 아닌 CDN링크를 통한 URL LINK 방식으로 소스만 삽입하면 바로 사용가능하여 세팅이 어렵지 않습니다.




1. 세팅방법

티스토리 관리자모드로 접속 : 티스토리 로그인 > 블로그관리 > HTML/CSS 편집을 클릭하여 편집모드로 들어가면 우측에 소스입력창이 보입니다.



위 이미지에서 보이는 것처럼 Syntaxhighlighter CDN 링크를 위해 <head> ~ </head> 사이에 소스를 삽입해야 합니다.

하나하나 타이핑하는 수고를 하지 마시고 아래 소스를 복사해서 해당 위치에 붙여넣기를 합니다.


<!-- SyntaxHighlighter -->
<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/shBrushJScript.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/shBrushBash.js"    type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.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">-->
<!--<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css" rel="stylesheet" type="text/css">-->
<!--<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.css" rel="stylesheet" type="text/css">-->
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
SyntaxHighlighter.all();
</script>
<!-- /.SyntaxHighlighter -->

주석처리된 css 3가지와 마지막 css 까지 총 4개의 테마가 있는데, 사용할 테마의 주석을 풀고 사용 나머지는 주석처리 하던가 삭제하면 됩니다.

제 기억으로는 총 12가지의 테마가 있던걸로 기억하는데..  나머지 테마는 직접 찾아보세요~

소스를 삽입 후 우측상단의 "저장" 버튼 꼭 눌러주세요.


여기까지가 세팅방법입니다. 정말 간단하죠?

이제 세팅은 끝났으니 제대로 구현이 되는지 테스트를 해보겠습니다.



2. 사용방법

사용법은 번거롭긴 하지만 어렵진 않습니다.

글쓰기 모드에서 우측상단에 있는 HTML모드로 들어가서 원하는 위치에 아래 소스를 입력해야 합니다.

<pre class="brush:html"></pre> 또는 <pre class="brush:java"></pre>

제가 주로 사용하는 모드인데.. 다른게 더 있을지는 알아보지 못했습니다.


<pre class="brush:html">

이 위치에 입력 할 소스코드를 삽입하면 됩니다.

</pre>



HTML모드에서 <pre>태그 안에다 내용을 입력해도 되지만 HTML모드에서는 워낙 눈이 아파서 저는 소스코드는 에디터모드에서 작성합니다.

원하는 위치에 <pre class="brush:html"></pre> 만 입력하고 HTML 체크를 해제하고 에디터 모드로 돌아가면 해당 위치에 아래 이미지처럼 박스가 생성됩니다.



이 박스안에 소스코드를 바로 입력해도 됩니다. 수정하기 편하고 해서 전 이렇게 사용합니다.



소스코드를 삽입한 모습니다. 글쓰기모드에서는 텍스트박스에 아무런 스타일이 들어가지 않습니다.



소스코드 삽입후 HTML모드로 본 이미지입니다. 특수기호가 유니코드로 변환되어 보여집니다.

글쓰기 모드에서는 스타일이 입혀지지 않아서 텍스트로만 보이지만 저장 후 웹에서 확인 할때는 지정하신 테마의 CSS 스타일이 입혀져서 보이게 됩니다.


제가 설정했던 테마의 웹에서 표현된 모습입니다.

모드에 따라서 다르게 보여지네요 위쪽이 html 아래쪽이 java 입니다. 물론 다른 테마에서는 스타일이 또 다르니. 이것 저것 설정해 보시고 맘에 드는 테마를 사용하시면 됩니다.


이상 Syntaxhighlighter CDN을 이용한 티스토리에 소스코드를 표현하는 방법이었습니다.


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

'Developer > Develop' 카테고리의 다른 글

sql yog」mysql DB 관리툴 sql yog 다운로드/설치  (0) 2017.11.08
EditPlus」에디트플러스 FTP 설정 - 원격접속  (0) 2017.11.07
Develop」파일질라 FileZilla FTP 프로그램 설치  (0) 2017.11.06
다음API」우편번호 서비스( 도로명,지번,영문 ) : 홈페이지에 주소검색서비스 구현  (0) 2017.11.05
Develop」에디트플러스 4.20 설치 / 키젠 EditPlus 4.20  (7) 2017.11.02
공유하기 링크
'Developer/Develop' Related Articles more
Comments