자바 스크립트로 구문 강조 코드 [닫힘]


109

HTML에서 <code> 블록을 구문 강조하기 위해 어떤 자바 스크립트 라이브러리를 추천 할 수 있습니까?

(답변 당 하나의 제안을 부탁드립니다).


답변:


103

StackOverflow는 Prettify 라이브러리를 사용합니다 .


두 번째입니다. Google 코드는 자체 저장소 강조 표시를 위해이를 사용하고 (작성한 이후) 자동으로 언어를 감지합니다.
Karan

"자동으로"언어를 감지하는 언어를 사용하는 것은 클라이언트의 컴퓨터 / 브라우저에 더 많은 가중치를 부여합니다.
James

2
알고 있다면 Prettify에 언어를 제공 할 수 있습니다. 그러면 성능이 향상됩니다. 이것은 언어 청중이 많기 때문에 StackOverflow에서 사용되지 않습니다.
Vincent Robert

이걸 제 웹 사이트에 추가했는데 아주 훌륭하고 사용하기 쉽습니다!
Lawrence Dol

@Vincent : 성능 이상을 향상시킵니다 ;-)
SamB

44

최근에 무지개라는 것을 개발했습니다.

주요 디자인 목표는 코어 라이브러리를 매우 작게 만들고 개발자가 쉽게 확장 할 수 있도록하는 것이 었습니다.

http://rainbowco.de를 참조하십시오 .


2
저는 오늘 Rainbow를 만났습니다. Prettify보다 더 세밀하게 구별 할 수있는 것 같습니다 (예를 들어, rdf:type요소로 사용되는시기와 속성 인시기를 알 수있는 것과 같이).
Roger_S

3
위로 올라 가야 해, 크레이그. 다른 모든 솔루션을 시도해 보았고 Rainbow 만 Python을 올바르게 처리하고 읽을 수있는 테마 스타일 시트를 가졌습니다 . 놀라운 플러그인!
Blender


15

jQuery Syntax Highlighter 는 정말 정말 인기있는 일반 자바 스크립트 구문 하이 라이터 인 Google의 Prettify를 기반으로 한 새로운 것 입니다.

codepre블록 과 같은 것을 지원하며 , language-javascript강조 표시 할 클래스 이름과 워드 랩을 사용할 수 있습니다. 다른 많은보기처럼 원시보기를 열지 않고 정상적으로 선택하여 코드를 복사하고 붙여 넣을 수 있습니다. HTML5 데이터 속성을 사용 data-sh하거나 초기화시 옵션을 지정 하여 추가로 사용자 정의 할 수 있습니다 . 정기적으로 업데이트되는 안정적인 선택입니다.


저자는 실제로 SyntaxHighlighter가 아니라 Google의 Prettify를 기반으로한다고 말합니다. SyntaxHighlighter 3과 비슷하지만 설정하는 데 훨씬 적은 작업이 필요한 것 같습니다. 링크 주셔서 감사합니다!
Tieson T. 2011

15

무엇에 대해 프리즘 레아 베루에 의해.

그녀는에서 포스트 블로그 유월 안에 (2012) 발표 :

  • 작습니다. 코어는 1.5KB 축소 및 gzip입니다.
  • 엄청나게 확장 가능합니다. 새로운 언어를 추가하는 것이 쉬울뿐만 아니라 (요즘 모든 구문 강조 표시기에서 제공됨) 기존 언어를 확장하는 것도 쉽습니다.
  • 특정 경우에 더 나은 성능을 위해 웹 작업자를 통한 병렬 처리를 지원합니다.
  • 그것은 당신이 Prism에 특화된 마크 업을 사용하도록 강요하지 않으며, Prism 특유의 클래스 이름조차도, 어쨌든 사용해야하는 표준 마크 업만을 사용하도록합니다. 따라서 잠시 동안 시도하고 마음에 들지 않으면 제거하고 흔적을 남기지 마십시오.

이것은 새로운 언어 정의를 추가하기가 쉽기 때문에 모든 답변 중 가장 좋은 옵션이되었습니다.
마이크 그레이스


5

jQuery를 사용하는 경우 Chilli가 있습니다.

http://code.google.com/p/jquery-chili-js/

당신이해야 할 일은 jquery-chili.js와 recipes.js를 포함하고

$("code").chili();

자체적으로 언어를 파악해야합니다.


해당 페이지의 예제에 대한 링크는 모두 광고로 가득 찬 만료 된 도메인으로 연결되므로이 하이 라이터가 어떻게 생겼는지 파악하기가 조금 어렵습니다.
Nathan Osman 2014 년

5

나는 SHJS에 매우 만족 합니다. 다양한 언어를 지원하며 매우 빠르고 정확합니다.

다음은 내 블로그 에서 사용하는 예 입니다. Coda의 구문 강조 를 시뮬레이트하는 내 사용자 지정 CSS 파일을 사용하고 있습니다 . 사용하려면 이메일을 보내주세요.


4

jQuery.Syntax 는 매우 빠르고 가벼운 구문 하이 라이터 입니다. 구문 소스 파일을 동적으로로드하고 CSS 또는 모델을 사용하여 깔끔하게 통합합니다.

이는 특히 빠르고 깔끔한 클라이언트 측 구문 파서라는 격차를 채우기 위해 개발되었습니다.


안타깝게도 표준 FpML 메시지가 스팸이라고 생각했습니다. :)
ehosca 2011 년

@ehosca, 현재 겪고있는 문제에 대해 설명해 주시겠습니까?
ioquatix 2011 년

내가의 XML 붙여 넣을 때 goo.gl/PPcDxgoo.gl/qSqm9 가 잘못된 내용을 말한다을 스팸으로 표시됩니다. 도움이 되었기를 바랍니다.
ehosca 2011 년

텍스트에 줄 바꿈을 포함해야합니다. 그렇지 않으면 스팸 링크처럼 보입니다. 내가 사용한 정확한 공식은 기억 나지 않지만 한 줄에 URL이 두 개 이상이면 텍스트가 스팸으로 간주됩니다. 봇이 시스템에 스팸을 보내기 때문 입니다 ( syntax-highlighing.com ).
ioquatix 2011 년


3

나는 논쟁의 여지가 없지만 CMS 또는 블로그 플랫폼을 사용하는 경우 백엔드 하이 라이터를 사용하는 것이 분명한 이유로 더 낫다는 것을 언급 할 가치가 있다고 생각했습니다. Geshi를 살펴보십시오 ( http://qbnz.com/highlighter/ ) 관심이 있다면. 실제로 백엔드 기술을 통해 HTML 콘텐츠를 구문 분석하도록 서버를 설정할 수 있으므로 JS 하이 라이터가 전혀 필요하지 않습니다. (추가되는 유일한 기능은 인쇄 / 복사 (swf 사용) 기능입니다.)


2
나에게는 분명하지 않습니다. 백엔드 형광펜을 사용하는 것이 더 좋은 이유는 무엇입니까?
Evan P.

1
그래, 나도 것입니다 정말 ... 클라이언트에 큰 응답을 보낼 선호에 대해 "명백한"무엇인지 알고 싶어요
선사

1
JS가 활성화되지 않은 장치에는 구문 강조 표시가 계속 표시되는 것이 좋습니다. 또한 클라이언트 측 형광펜에는 강조 할 코드가 많으면 런타임 비용이 상당히 많이들 수 있습니다. 즉, 특정 사용 사례에 따라 다릅니다. :)
James

JS가 활성화되지 않은 장치는 무엇입니까?
잭 Giffin


당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.