고정 헤더 영역
상세 컨텐츠
본문
티스토리를 쓰다보니 내용 안에 코드들이 꽤 적힐 것 같고
여러 티스토리들을 보다보니 프로그램코드를 이쁘게 적용시킨 곳들이 많아서
'나도 한번 해보자!'
싶어서 설치하고 적용해봤는데 나름 쉽댜 'ㅅ'
(참고로 내 티스토리 스킨은 "Yzngal" 이고, 그러면서 생기는 이슈인지 아님 원래 이슈인지 모르겠지만 이에 따른 script의 순서도 정리해보았다.)
syntaxhighlighter_3.0.83.zip1. 위의 폴더를 내려받고, 압축을 풀고
2. 풀어보면 아래와 같은 폴더들이 보이는데 그 중에 'scripts' 와 'styles'안에 있는 파일들을 내게 맞게 사용하면 된다.
3. 'scripts' 폴더에서 기본적으로 티스토리에 적용시켜야 하는 파일은
참고로 순서는
이 순서대로 넣는 게 좋겠다.
처음에 이 순서대로 넣으니까 아래처럼 오류가 뚜둥!
바꾸고 나서는 오류 샤라랄 사라짐~
4. 'styles'폴더에서는 기본적으로
를 추가해주고
그리고서 본인이 어떤 스타일을 원하느냐에 따라 shCoreDefault.css를 넣든 shCoreEmacs.css를 넣든 상관없다.
나는 기본적인 스타일이 좋아서 shCoreDefault.css와 shThemeDefault.css스타일 2개를 넣어주었다.
5. 그리고 이제 아래코드 딱 하나만 넣어주면 (syntaxhighlighter 실행)
<head></head>에 넣는건 끝!!
그리고 위에 이미지를 보면
코드가 들어가있는게 보인다.
이건 아래 테이블과 같이, 본인이 코드를 사용하는 목적에 맞게 스타일을 셋팅해 주는 js라고 생각하면 되겠다.
Brush name | Brush aliases | File name |
as3, actionscript3 | shBrushAS3.js | |
bash, shell | shBrushBash.js | |
cf, coldfusion | shBrushColdFusion.js | |
c-sharp, csharp | shBrushCSharp.js | |
cpp, c | shBrushCpp.js | |
css | shBrushCss.js | |
delphi, pas, pascal | shBrushDelphi.js | |
diff, patch | shBrushDiff.js | |
erl, erlang | shBrushErlang.js | |
groovy | shBrushGroovy.js | |
js, jscript, javascript | shBrushJScript.js | |
java | shBrushJava.js | |
jfx, javafx | shBrushJavaFX.js | |
perl, pl | shBrushPerl.js | |
php | shBrushPhp.js | |
plain, text | shBrushPlain.js | |
ps, powershell | shBrushPowerShell.js | |
py, python | shBrushPython.js | |
rails, ror, ruby | shBrushRuby.js | |
scala | shBrushScala.js | |
sql | shBrushSql.js | |
vb, vbnet | shBrushVb.js | |
xml, xhtml, xslt, html, xhtml | shBrushXml.js |
테이블 출처: http://wjheo.tistory.com/entry/Syntax-Highlighter-설치-및-적용-프로그램-코드-예쁘게-보이기#recentComments [IT world]
이제 글쓸때에 어떻게 활용을 하는건지! 보자면
'글쓰기' 화면에서 위에 HTML을 체크할 수 있는 곳이 있다.
저기 체크하고 html창에서 작성을 하면 되겠다~
그리고 매칭되는
// 코드 작성
를 넣어주면 되겠다.
예시 )
//내가 작성할 코드 (xml, xhtml, xslt, html, xhtml)
혹은
//내가 작성할 코드 (cpp, c)
'etc' 카테고리의 다른 글
| 제발 다시 공부하자 나자신 ㅜㅜ (0) | 2021.01.20 |
|---|---|
| TweenMax (0) | 2018.01.19 |
댓글 영역