syntaxhighlighter 사용법 본문

etc

syntaxhighlighter 사용법

미니모아 2016. 8. 26. 09:26
반응형
syntaxhighlighter는 코드를 예쁘게, 보기 좋게 정리해준다.
설치 방법은 간단하다.

1. 우선 아래 링크에서 설치 파일을 다운받는다.

 

2. 파일을 압축 해제 한다. 필요한 폴더는 아래 두 개뿐이다


3. 티스토리 admin에 꾸미기 HTML/CSS 편집에서 파일 업로드에 scripts 폴더의 파일들과 styles 폴더의 파일들을 전부 때려 넣는다 (필요한 파일만 골라서 업로드하는 경우도 있다.)




4. 스킨 HTML에서 <head></head> 사이에 아래 코드를 넣는다 
  


<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>


5. 글 입력시 HTML을 체크 하고 아래와 같이 작성하면 된다

<pre class="사용할 브러쉬""> 
코드 입력
</pre>




- 티스토리에서 글 작성시 5와같이 코드 입력 후 HTML체크를 풀었을 때 적용한 테마가 아닌 회색 박스배경이 나온다고 당황하지 말자 원래 그렇다 

- HTML입력시에는 <>태그를 &lt; &gt;로 치환해서 입력해야되는데 커니님이 만드신 변환툴을 사용하면 편리하다 (변환툴 주소)

- brush는 사용할 언어에 따라 달라진다 


<pre class="brush:html">

<pre class="brush:js">

<pre class="brush:css">


이런식 




- 사용할 테마는 맘대로 바꿀 수 있다. 


- 이밖에 설정 사항은 (http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/) 참고

반응형
저작자표시

'etc' 카테고리의 다른 글

[멋쟁이사자처럼] 중앙과제 3  (0) 2019.07.31
Heroku로 배포하기  (0) 2019.07.31
git hub  (0) 2019.07.30
[멋쟁이사자처럼] 중앙과제 1  (0) 2019.07.30
git 기초 이해하기  (0) 2019.05.16
'etc' Related Articles more
Comments