블로그를 사용하다보면 html 소스를 추가해야할 경우가 생기기도 합니다.
저같은경우는 티스토리 꾸미기 강좌를 할때 주로 많이 사용합니다.
이럴때 위와같이 소스가 나오면 보는 사람이 아주 편하게 확인을 할수가 있겠죠?
그럼 어떻게 하면 위와 같이 소스를 출력할수있는지 알아보도록하겠습니다.
먼저 아래 파일을 다운로드 해서 압축을 풀어줍니다.
syntaxhighlighter_3.0.83.zip
압축을 풀면 위와같이 나올겁니다 여기서 필요한것은 여기서 필요한 건 "scripts"와 "styles" 이 두 파일입니다.
이것을 블로그 관리 페이지에서 스킨 편집 에서 html 편집 누르시면 파일업로드 텝이 나올겁니다 거기 들어가셔서 추가버튼을 누른후
"scripts"와 "styles" 폴더속에 있는 모든 파일들을 업로드해주시면 됩니다.
그러면 image 폴더 아래로 모든파일들이 들어간 모습을 확인하실수 있을겁니다.
여기 까지 잘 따라 오셨다고 믿고 또 설명을 이어가겠습니다.
이제 아래 소스를 복사를 합니다.
html 텝을 클릭하셔서 <head>와 </head> 사이에 위 코드를 입력해 주세요.
설정은 다 끝났네요. 적용만 하면 되는데요, 아래 코드처럼 <pre>와 </pre> 사이에 원하는 코드를 추가하시면 됩니다.
이런 식으로 추가하시면 됩니다
여기서 brush 는 임의로 html 로 설정했지만 상황에 따라서 변경하시면 됩니다.
아래 표를 참조하시면 될것 같습니다.
※ 보다 상세한 내용 확인은 http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 에서 확인하시면 됩니다.
| Brush name | Brush aliases | File name |
|---|---|---|
| ActionScript3 | as3, actionscript3 | shBrushAS3.js |
| Bash/shell | bash, shell | shBrushBash.js |
| ColdFusion | cf, coldfusion | shBrushColdFusion.js |
| C# | c-sharp, csharp | shBrushCSharp.js |
| C++ | cpp, c | shBrushCpp.js |
| CSS | css | shBrushCss.js |
| Delphi | delphi, pas, pascal | shBrushDelphi.js |
| Diff | diff, patch | shBrushDiff.js |
| Erlang | erl, erlang | shBrushErlang.js |
| Groovy | groovy | shBrushGroovy.js |
| JavaScript | js, jscript, javascript | shBrushJScript.js |
| Java | java | shBrushJava.js |
| JavaFX | jfx, javafx | shBrushJavaFX.js |
| Perl | perl, pl | shBrushPerl.js |
| PHP | php | shBrushPhp.js |
| Plain Text | plain, text | shBrushPlain.js |
| PowerShell | ps, powershell | shBrushPowerShell.js |
| Python | py, python | shBrushPython.js |
| Ruby | rails, ror, ruby | shBrushRuby.js |
| Scala | scala | shBrushScala.js |
| SQL | sql | shBrushSql.js |
| Visual Basic | vb, vbnet | shBrushVb.js |
| XML | xml, xhtml, xslt, html, xhtml | shBrushXml.js |
일반적으로 사용하는 방법은 <pre>태그를 이용하여 사용합니다.
태그는 선택해서 사용하면 되지만 SyntaxHighlighter를 사용하려면 해당 태그의 class 속성을 이용하여야 합니다.
예제는 javascript를 사용한다는 가정하여 보여드리도록 하겠습니다.
pre 태그를 이용한 SyntaxHighlighter 파라미터 사용하기 - 고급편
<pre title="PRE javascript 코드 하이라이트 테스트" class="brush:js; first-line:10; highlight:[12]">...javascript code ...</pre> |
위처럼 SyntaxHighlighter를 적용하면 아래와 같은 결과가 출력됩니다.
title - "PRE javascript 코드 하이라이트 테스트" 라는 제목 출력
brush:js - javascript brush 사용
first-line:10 - 10번째 줄 부터 줄 번호 표시
highlight:[12] - 12번 줄 하이라이트
제 글이 도움이 되셨다면 "공감 (♡)" 한번씩 클릭해주시고 응원의 댓글들도 남겨주세요.
'IT 이야기 > 블로그팁' 카테고리의 다른 글
| 이 포스트 공유하기 SNS 공유 아이콘 넣기 (1) | 2018.04.17 |
|---|---|
| 상단메뉴 커스터마이징 하기 2탄 (메뉴색상변경) (0) | 2018.04.17 |
| FastBoot 스킨 상단메뉴 커스터마이징 하기 (0) | 2018.04.17 |
| 국가별 접속자수 사이드바에 추가하기 [Fast Boot 스킨 꾸미기] (0) | 2018.04.16 |
| Fastboot 첫화면에 사이드바 보이게 설정하기 (0) | 2018.04.16 |
| Fastboot 스킨에서 상단메뉴바와 하단설명부분 색상 변경하는 방법 (0) | 2018.04.03 |
| 무료배포중인 반응형 스킨 2종 강력추천 (2) | 2018.03.30 |
댓글