SyntaxHighlighter 3.0.83 사용법 Notes_javascript 기술

1. 다운로드

SyntaxHighlighter 3.0.83: http://alexgorbatchev.com/SyntaxHighlighter

2. 구성

(1) SyntaxHighlighter가 구문 분석한 기본 태그, 기본값은 pre

코드 복사 코드는 다음과 같습니다.

SyntaxHighlighter.config.tagName="div";

(2) HTML 줄 바꿈 태그 제거
소프트웨어가 각 줄 끝에 < br /> 태그를 추가하는 경우 이 옵션을 사용하면 해당 태그를 무시할 수 있습니다.
shCore.js의 구현 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

If (sh.config.stripBrs == true)
              str = str.replace(br, '');
SyntaxHighlighter.config.stripBrs=true;

(3) 툴바를 표시하지 않음

코드 복사 코드는 다음과 같습니다.

SyntaxHighlighter.defaults['toolbar'] = false;

3. 코드에

을 사용하세요.

브러시 3.1개는 필수이고 나머지는 선택사항입니다.

코드 복사 코드는 다음과 같습니다.

일부 Java 코드

브러시 값: java/xml/sql/c/js/css 등. 자세한 내용은 http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

를 참조하세요.

3.2 셰이딩 호출:

코드 복사 코드는 다음과 같습니다.

구문Highlighter.highlight();

또는

코드 복사 코드는 다음과 같습니다.

SyntaxHighlighter.all();

all()과 하이라이트()의 차이점은 all()이 onload() 이벤트에 등록된다는 것입니다.

4. 블로그 정원에서 활용하기

블로그파크는 기본적으로 SyntaxHighlighter를 지원합니다. 기본값을 수정하는 코드(jQuery는 !important 스타일 설정을 지원하지 않으므로 cssText를 설정해야 함):

코드 복사 코드는 다음과 같습니다.

var sh = $(".syntaxhighlighter");
var code = sh.find("code");
var line = sh.find(".line");
var caption = sh.find("테이블 캡션");
sh.css("cssText", "너비: 자동 !중요");
코드.추가(줄)
            .add(캡션)
             .css("cssText", "글꼴 크기: 20px !important;white-space: nowrap !important;line-height: 1.5em !important;");

위 내용은 이 글의 전체 내용입니다. SyntaxHighlighter 사용 방법에 대해 새롭게 이해하셨나요? 이 글이 마음에 드셨으면 좋겠습니다.