Tistory 코드 블럭 syntaxhighlighter 3.0.83
지금 Tistory에 적용하고있는 스킨때문인지 code-prettify는 적용이 잘안된다.
그래서 다른 코드 블럭인 SyntaxHighlighter 을 사용 해볼려고했다.
http://alexgorbatchev.com/SyntaxHighlighter/
오른쪽 메뉴에 보면 download가 나와있다.
릴리즈로 들어가서 Source code를 클릭하고 압축을 풀면 다음과같이 압축이 풀어진다.
여기서 script폴더에있는 js 파일과 styles 폴더에있는 css파일을 모두다 업로드한다.
업로드는 Tistory 스킨편집 메뉴로 들어간 이후에 파일업로드를 클릭힌다
추가파일을 클릭하여 아까 압축을 해제시킨 script파일과 style폴더에있는 파일을 드래그
해서 모두다 추가시킨이후에 적용을 누르면 된다.
<!-- SyntaxHighlighter 설정 시작--> <script type="text/javascript" src="./images/shCore.js"></script> <script type="text/javascript" src="./images/shLegacy.js"></script> <script type="text/javascript" src="./images/shBrushBash.js"></script> <script type="text/javascript" src="./images/shBrushCpp.js"></script> <script type="text/javascript" src="./images/shBrushCSharp.js"></script> <script type="text/javascript" src="./images/shBrushCss.js"></script> <script type="text/javascript" src="./images/shBrushDelphi.js"></script> <script type="text/javascript" src="./images/shBrushDiff.js"></script> <script type="text/javascript" src="./images/shBrushGroovy.js"></script> <script type="text/javascript" src="./images/shBrushJava.js"></script> <script type="text/javascript" src="./images/shBrushJScript.js"></script> <script type="text/javascript" src="./images/shBrushPhp.js"></script> <script type="text/javascript" src="./images/shBrushPlain.js"></script> <script type="text/javascript" src="./images/shBrushPython.js"></script> <script type="text/javascript" src="./images/shBrushRuby.js"></script> <script type="text/javascript" src="./images/shBrushScala.js"></script> <script type="text/javascript" src="./images/shBrushSql.js"></script> <script type="text/javascript" src="./images/shBrushVb.js"></script> <script type="text/javascript" src="./images/shBrushXml.js"></script> <link type="text/css" rel="stylesheet" href="./images/shCore.css"> <link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css"> <script type="text/javascript"> SyntaxHighlighter.all(); </script> <!-- SyntaxHighlighter 설정 끝-->
다음을 <head></head>사이에 넣어주면된다.
이제 tistory에 글쓰기를 메뉴로 들어간이후에 html을 클릭한다.
<pre class="brush:html> </pre>을 넣어주면된다
brush:사용언어로 코드에 맞게 바꿔주면된다
예) <pre class="brush:js> </pre> <pre class="brush:javascript> </pre>
위의 21번과 22번은 syntaxhighter의 themes을 바꾸는 코드이다.
<link type="text/css" rel="stylesheet" href="./images/shCore.css"> <link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css">
위에 shCore는 바꾸지않고 shThemeDefault.css만 변경해주면된다.
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/
테마는 위사이트에서 확인가능하다.
html을 빠져나왔다면 위의 첫번째 그림처럼 되어있을 것이다.
발행이나 미리보기를 하면 아래와 같이 변한모습을 볼수있을 것이다.
<script type="text/javascript"> SyntaxHighlighter.all(); </script>
위의 23에서 25번줄은 syntaxhighlighter을 설정하기위한 곳이다.
전체적으로 설정할려면 script사이에 넣어주고 SyntaxHightlighter.all()로 마무리 해주면된다.
<pre class="brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]">
Tistory글쓰기에 변경할려면 pre class에 설정해주면된다.
SyntaxHighlightr의 메뉴얼이다.
http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/
'일상 > tistory' 카테고리의 다른 글
| Tistory 코드블록 code-prettify 적용방법 (0) | 2019.01.15 |
|---|---|
| 광고 적용할 위치 찾는 방법 (0) | 2018.05.12 |
| 플러그인을 이용하지 않고 광고삽입하기 (0) | 2018.05.12 |
| 애드센스 수동 적용하기 (0) | 2018.05.12 |
| 에드센스 자동광고기능 (0) | 2018.05.11 |
