티스토리 블로그에 Syntaxhighlighter 사용하기 본문
티스토리 블로그에 Syntaxhighlighter 사용하기
- 2017. 11. 14. 22:53
지난 포스트에서는 Syntaxhighlighter 적용법을 다뤘다면 이번 포스트에서는 사용하는 방법에 대해 다루겠습니다.
Syntaxhighlighter 적용을 아직 하지 않았다면 지난 포스트인
2017/11/14 - 티스토리 블로그에 Syntaxhighlighter 적용하기 를 참고하여 먼저 적용하시기 바랍니다.
SyntaxHighlighter 가 지원하는 Syntax Brush 목록
※ 보다 상세한 내용 확인은 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 |
SyntaxHighlighter Brush 추가/삭제 하는 방법
지난 포스트에서 알려드린 적용방법의 소스를 보시면 브러쉬 파일을 아래와 같이 추가했었습니다.
위의 목록에서 C++이 없기 때문에 C++ brush를 추가하려면 아래와 같이 추가합니다.
위 처럼 <head>와 </head>사이에 brush 스크립트를 추가합니다. (파일도 당연히 미리 업로드 시킵니다.)
그러면 C++ 코드 하이라이트를 사용할 수 있습니다.
사용하지 않는 언어의 brush는 코드를 삭제하시고, 미리 업로드 된 파일을 삭제하시면 끝!!
참 쉽죠?
SyntaxHighlighter 파라미터
자주 사용하는 파라미터만 정리하겠습니다.
상세 사용법이 궁금하시면 http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/ 에서 확인하시면 됩니다.
- brush:js
- 이 brush 뒤에 나오는 js가 사용할 언어를 지정하는 별명입니다.
- 위의 brush 목록을 보시면 javascript의 aliases는 js / jscript / javascript 세개라는걸 확인하실 수 있습니다.
- javacript 코드 하이라트를 사용하려면 brush: js 또는 brush: jscript 또는 brush: javascript 이렇게 선택해서 사용할 수 있습니다.
- ex) html을 적용하려면 : brush: html, css를 적용하려면 brush: css
- highlight: [5, 10, 11]
- 소스 줄 번호 5, 10, 11 줄은 하이라이트가 들어갑니다.
- 한줄만 넣을꺼면 5 이렇게 하나의 줄 번호만 넣으면 됩니다.
- 여러줄을 넣기 위해선 배열[] 괄호 안에 해당 줄 번호를 넣습니다.(괄호가 빠지면 안됩니다.)
- first-line: 10
- 소스 줄 번호를 10부터 시작한다는 파라미터입니다.
- first-line 파라미터를 입력하지 않으면 자동적으로 1부터 시작합니다.
- gutter: false
- 소스 줄 번호를 출력하지 않는 파라미터입니다. (반대로 출력시 true)
- gutter 파라미터를 입력하지 않으면 기본 설정인 true가 적용되어 줄 번호가 노출됩니다.
하려면 <head>와 </head>사이에 넣은 스크립트로 설정하면됩니다.
모든 SyntaxHighlighter 에 기본 설정
※ 기존 script소스 안에 아래와 같이 2,3,4 줄 처럼 넣으면 모든 SyntaxHighlighter에 기본적으로 적용됩니다.
※ textarea 태그에서 사용하려면 37번 줄의 코드를 넣으셔야 합니다.
※ 저는 툴바없애기만 사용합니다. ㅡ/,.ㅡ;;
SyntaxHighlighter Title 옵션
class 파라미터와 다르게 title 속성값을 이용하여 SyntaxHighlighter에 캡션과 같이 제목을 표현할 수 있습니다.
title test code
SyntaxHighlighter 사용법
일반적으로 사용하는 방법은 <pre>태그와 <textarea>태그를 이용하여 사용합니다.
태그는 선택해서 사용하면 되지만 SyntaxHighlighter를 사용하려면 해당 태그의 class 속성을 이용하여야 합니다.
예제는 javascript를 사용한다는 가정하여 보여드리도록 하겠습니다.
1. pre 태그를 이용한 SyntaxHighlighter 파라미터 사용하기
...javascript code ...
위처럼 SyntaxHighlighter를 적용하면 아래와 같은 결과가 출력됩니다.
- title - "PRE javascript 코드 하이라이트 테스트" 라는 제목 출력
- brush:js - javascript brush 사용
- first-line:10 - 10번째 줄 부터 줄 번호 표시
- highlight:[12] - 12번 줄 하이라이트
var a = 2;
for ( i = 0; i < 9; i ++ ) {
document.print(a + " x " + i + " = " + (a x i) + "
");
}
2. textarea 태그를 이용한 SyntaxHighlighter 파라미터 사용하기
<pre>태그를 이용한것과 동작은 똑같이 합니다.
- title 과 class 파라미터는 pre 태그와 똑같이 사용합니다.
- title - "TEXTAREA javascript 코드 라이트 테스트" 라는 제목 출력
- brush:js - javascript brush 사용
- first-line 파라미터가 없으므로 기본값인 1번부터 줄 번호 시작
- hightlight:[3] - 3번 줄 하이라이트
- <textarea> 태그에서는 <textarea name="code"> code라는 이름을 꼭 지정해야지 사용가능합니다!!
없으면 동작안합니다!! - HTML 문서 호출 완료 후 dp.SyntaxHighlighter.HighlightAll('code'); 로드(body onload)를 안하면 textarea에서 동작 안합니다.
티스토리 글쓰기 에디터에서 사용하는 법
※ 경고 : 티스토리 글쓰기 에디터에서 사용시 매우 귀찮음
1. 외부컨텐츠로 삽입
2. HTML 모드에서 직접 삽입
이제 소스를 예쁘게 넣을 수 있게되었습니다.
많은 소스 기록과 공유가 되길바랍니다~ 이제부터 고생하세요~
RECENT COMMENT