2016. 9. 3. 06:08ㆍplming
항상 표에 대~~~충 구겨넣어서 보여주던 Code들...
정말 자세안나오는...^^;
그래서 준비했다.
Code Editor들에서 보여지던
Syntax에 따른 Highlight와
줄번호까지 친절히 보여주시는
SyntaxHighlighter를 적용시켜보자.
1. SyntaxHighlighter 모듈 다운로드
http://alexgorbatchev.com/SyntaxHighlighter/download/
2. 다운받은 파일(syntaxhighlighter_3.0.83.zip) (아무곳에나) 압축해제
3. Tistory HTML/CSS에 적용
3.1. 압축 해제한 파일 중 .js 와 .css 업로드
→ \scripts 폴더와 \styles 폴더에 있는 파일들
→ 관리 - HTML/CSS 편집 - 파일업로드 메뉴에서 추가 버튼 클릭 후 업로드
※ 기본으로 업로드 되어야 하는 .js 파일
shAutoloader.js
shCore.js
shLegacy.js
※ Highlight 시키고자 하는 언어와 관련된 .js 파일은 선택적으로 업로드
shBrushCpp.js
shBrushDelphi.js
shBrushJava.js
※ Code가 보여질 테마와 관련된 파일도 선택적으로 업로드
→ 테마 확인은 http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/
필자는 RDark를 선택했지만,
혹시나 다른 테마를 선택할 수도 있어서
1단은 테마는 전체 파일 모두 업로드
3.2. 글쓰기 HTML 수정
→ 관리 - HTML/CSS 편집 - HTML 메뉴에서 수정
3.2.1. </head> TAG 위에 <script>들 추가
※ 기본 .js 외에 선택적으로 업로드한 .js 에 해당하는 script들만 추가
3.2.2. <body> TAG에 Onload event 추가
4. 글쓰기에서 Code 넣어보기
HTML CheckBox에 Check 후
요롷게 TEXTAREA를 만들고
고 안에 원하는 Code를 적으면 된다.
여기에서 중요한 것이
해당 언어를 정확히 기술해 주는 것이다.
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 에서
"Brush aliases" 에 있는 해당 언어를 적으면 된다.
위의 코드는
요롷게 표시되었다.
'plming' 카테고리의 다른 글
| Apple 개발자 멤버쉽은 IE11로 결제해라? (7) | 2018.07.04 |
|---|---|
| Android Studio 3 - 자동저장 (auto save) 끄기 (0) | 2018.04.12 |
| 2010년도 적용 SW기술자 노임단가 공표 (0) | 2011.01.18 |
| 프로그래머 능력 매트릭스 (1) | 2010.12.23 |
| java.lang.ThreadDeath (0) | 2010.04.07 |