티스토리에 코드 하이라이트(Syntax Highlighter)를 적용하기
0x01 Etc./0x04 Information2018. 3. 1. 12:25
글을 작성하게 된 계기
이번에 블록체인 글을 작성하면서 처음으로 게시글 공유가 5개가 넘어가는 멋진 일이 일어나며 좋은 피드백을 받게 되어 작성하게 되었습니다.
적용하는데는 큰 어려움이 없으므로 많으신 분들이 이 게시글을 보고 도움이 되었으면 좋겠습니다.
게시글을 보시며 어려움이 생기신다면 언제든지 댓글을 남겨주시면 글을 더 쉬운 방향으로 수정하도록 하겠습니다.
코드 하이라이트(Syntax Highlighter) 다운로드
먼저 사용을 하시려면 코드 하이라이트(Syntax Highlighter)를 다운받아야겠죠?
다운은 아래의 링크에서 받으시면 됩니다!
다운로드 링크 : https://github.com/syntaxhighlighter/syntaxhighlighter
여기까지 따라오셨나요?
그렇다면 다음 차례로 넘어오시면 될 것 같습니다!!!
티스토리에 다운받은 코드 하이라이트(Syntax Highlighter) 업로드
다운받으시면 압축을 풀은 나오는 폴더들에 scripts 폴더와 styles 폴더의 파일만 업로드 하면 됩니다.
[업로드 해야 될 파일]
코어 필수 파일 : scripts/shCore.js
언어 신텍스 스크립트 파일 : scripts/shBrush*.js
스타일 선택 파일 : styles/shCore*.css
신텍스 테마 파일 : styles/shTheme*.css
그렇다면 업로드 해주세요!
2018년도 기준으로 블로그 관리 -> 스킨 편집 -> html 편집 -> 파일 업로드로 이동해주세요!
위와 같이 업로드되셨다면 2단계까지 잘 따라오신 겁니다!
어? images로 업로드되셨다구요?
괜찮습니다!
파일을 불러올 때에 경로만 잘 잡아주게 되면 상관이 없습니다!
코드 하이라이트(Syntax Highlighter) 적용
이제 파일들도 다운로드하고 티스토리에 업로드를 하였다면 이것을 사용해야겠죠?
이 파일들은 css, js 파일이므로 <head></head> 사이에 태그를 입력해주셔야 됩니다.
저는 모든 코드들을 일단 적용하였습니다.
<script type='text/javascript' src='./images/shCore.js'></script>
<script type='text/javascript' src='./images/shAutoloader.js'></script>
<script type='text/javascript' src='./images/shBrushAppleScript.js'></script>
<script type='text/javascript' src='./images/shBrushBash.js'></script>
<script type='text/javascript' src='./images/shBrushColdFusion.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/shBrushErlang.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/shBrushJavaFX.js'></script>
<script type='text/javascript' src='./images/shBrushJScript.js'></script>
<script type='text/javascript' src='./images/shBrushPerl.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/shBrushPowerShell.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/shBrushSass.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>
<script type='text/javascript' src='./images/shLegacy.js'></script>
<link href="./images/shCoreDefault.css" rel="stylesheet" type="text/css">
<link href="./images/shThemeDefault.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
//<![CDATA[
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
//]]>
</script>
여기까지 따라오셨다면 잘 따라오신겁니다!
크롬 브라우저를 위하여!
크롬 브라우저로 접속하는 사람들을 위해 아래의 코드를 css에 입력해주세요
div .syntaxhighlighter {
overflow-y: hidden!important; overflow-x: auto!important;
font-size:0.9em !important;
}
어디에든 입력만 하시면 상관이 없습니다.
코드 하이라이트(Syntax Highlighter) 사용하기
코드 하이라이트를 사용하기 위해서는 pre 태그를 이용해야되기 때문에 html 편집을 이용하셔야 됩니다.
그리고 아래의 코드를 입력하시면 됩니다.
<pre class= "brush:브러쉬">
코드
</pre>
브러쉬 명
잘 사용하시길 바랍니다!
'0x01 Etc. > 0x04 Information' 카테고리의 다른 글
| 티스토리에 코드 하이라이트(Syntax Highlighter)를 적용하기 (0) | 2018.03.01 |
|---|---|
| Chrome Font Rendering: Google removes DirectWrite flag (0) | 2016.07.03 |
| Korean Keyboard add in English Windows (0) | 2016.07.03 |
