Hubeen's Home

0x01 Etc./0x04 Information 3건이 검색되었습니다.

티스토리에 코드 하이라이트(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)를 적용하기  (1) 2018.03.01
Chrome Font Rendering: Google removes DirectWrite flag  (0) 2016.07.03
Korean Keyboard add in English Windows  (0) 2016.07.03

Comment 1

확인

Chrome Font Rendering: Google removes DirectWrite flag

0x01 Etc./0x04 Information2016. 7. 3. 08:33

0. Open the Google Chrome browser, type the following and press Enter


chrome://flags/#disable-direct-write


1. To enable or disable, just click on the link (Enable || Disable)


2. Click on Disable.


3. End

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

'0x01 Etc. > 0x04 Information' 카테고리의 다른 글

티스토리에 코드 하이라이트(Syntax Highlighter)를 적용하기  (1) 2018.03.01
Chrome Font Rendering: Google removes DirectWrite flag  (0) 2016.07.03
Korean Keyboard add in English Windows  (0) 2016.07.03

Comment 0

확인

Korean Keyboard add in English Windows

0x01 Etc./0x04 Information2016. 7. 3. 08:18

0. Start - Control Panel



1. Change keyboards or other input methods



2. Keyboards and Languages - Change keyboards



3. Add 


4. Korean - keyboard - Microsoft IME check - OK



5. Default input language - Korean (korea) - Microsoft IME - OK


6. END

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

'0x01 Etc. > 0x04 Information' 카테고리의 다른 글

티스토리에 코드 하이라이트(Syntax Highlighter)를 적용하기  (1) 2018.03.01
Chrome Font Rendering: Google removes DirectWrite flag  (0) 2016.07.03
Korean Keyboard add in English Windows  (0) 2016.07.03

Comment 0

확인