-
티스토리 블로그에 Syntax Highlighter 적용하기gossip 2018. 1. 31. 02:23
안녕하세요, Einere입니다.
오늘은 티스토리 블로그에 Syntax Highlighter를 적용하는 방법을 소개해 드리겠습니다.
1. 아래의 syntaxhighlighter_3.0.83.zip를 다운로드 받은 후, 압축을 풀어줍니다.
2. 압축을 푼 후, scripts폴더와 styles폴더의 파일들을 티스토리 스킨 편집기의 파일업로드탭에 업로드합니다.
블로그관리 - HTML/CSS 편집 - 파일 업로드 탭 - 추가 버튼을 눌러서 업로드하시면 됩니다.
3. HTML 탭을 누른 뒤, </head>를 찾으신 후, 바로 윗줄에다가 아래의 코드를 삽입합니다.
참고로, shThemeDefault.css 부분을 다른 파일명으로 바꿀 경우, 테마를 변경할 수 있습니다.
4. <body 를 검색하신 후, <body와 >사이에 다음의 코드를 삽입합니다.
Onload="dp.SyntaxHighlighter.HighlightAll('code');"
즉, <body ~~ Onload="dp.SyntaxHighlighter.HighlightAll('code');">와 같은 형태가 되면 됩니다.
5. 포스팅시, 에디터에서 HTML을 체크한 뒤, 다음과 같이 코드를 작성합니다.
<textarea name="code" class="brush:원하는 언어;">
HTML모드에서 이곳에 코드를 작성하면 됩니다.
</textarea>
원하는 언어는 c, cpp, html, java, js등등 많습니다.
Syntax Highlighter 홈페이지에서 확인 가능합니다.
6. 따라했는데도 적용이 안되는 경우, 블로그 스킨별로 적용이 안 될 수 있습니다.
이러한 경우, 블로그 관리 - HTML/CSS 편집 - CSS 탭에서 pre를 찾으신 뒤, 해당 코드를 먼저 백업을 하신 후, 삭제한 후 저장합니다.
(아래의 코드는 스킨별로 다를 수 있습니다.)
blockquote { position: relative; color: #555; font-style: italic; margin: 0; padding: 10px 15px; border-left: 5px solid #f1f1f1; }
pre { padding: 10px 10px 7px; margin: 5px 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; border: 1px solid #ddd; font: 12px/180% 'Lucida Console'; background-color: #fafafa; border-radius: 3px; } //pre와 관련된 부분을 삭제 후 저장
hr { margin: 0; padding: 0; border: none; border-top: 1px solid #ccc; height: 0; overflow: hidden; }
그리고 다시 원상복구 시키신 후 저장합니다.
저는 엄청나게 뻘짓을 많이 하다가, 이와 같은 방법으로 Syntax Highlighter를 적용시켰습니다...
참고 : 티스토리 토마토님의 블로그
※ 세로 스크롤바를 삭제하는 방법
Syntax Highlighter의 단점중의 하나는, 쓸데없이 세로 스크롤바가 생긴다는 것입니다.
세로 스크롤바를 제거하기 위해서는, HTML 탭에서 </html> 바로 윗줄에 다음 코드를 삽입합니다.
<style>
.syntaxhighlighter {
overflow-y: hidden !important;
}
</style>
'gossip' 카테고리의 다른 글
[삼성SDS] TechTonic 2018 (0) 2018.11.21 해외 취업 사이트 (0) 2018.10.24 윤디자인 연구소에서 2개월 무료 체험 행사중 (0) 2014.09.11 Melty Blood Actress Again - Net play (0) 2011.10.09 확장자 변경 응용 프로그램 (0) 2010.06.20 댓글
syntaxhighlighter_3.0.83.zip
