Javascript ile sözdizimi vurgulama kodu [kapalı]


109

HTML'deki <code> bloklarını vurgulayan sözdizimi için hangi Javascript kitaplıklarını önerebilirsiniz?

(Her yanıt için bir öneri lütfen).


Yanıtlar:


103

StackOverflow, Prettify kitaplığını kullanır .


Ben buna katılıyorum. Google Code, bunu kendi repo vurgulamaları için kullanır (yazdıklarından beri) ve dili otomatik olarak algılar.
Karan

Şüphesiz, dili "otomatik olarak" algılayan birini kullanmak, istemcinin makinesine / tarayıcısına daha fazla ağırlık verir ...
James

2
Dilini biliyorsan Prettify'a verebilirsin, performansı artıracaktır. Bu, geniş dil kitlesi nedeniyle StackOverflow'da kullanılmaz.
Vincent Robert

Bunu web siteme ekledim ve harika ve kullanımı çok kolay!
Lawrence Dol

@Vincent: Performanstan daha fazlasını geliştiriyor ;-)
SamB

44

Yakın zamanda gökkuşağı adında bir tane geliştirdim.

Ana tasarım hedefi, çekirdek kitaplığı gerçekten küçük yapmak ve geliştiricilerin genişletmesini gerçekten kolaylaştırmaktı.

Http://rainbowco.de adresine bakın .


2
Bugün Rainbow'la karşılaştım - bana Prettify'dan daha hassas bir şekilde ayırt edebiliyor gibi görünüyor (örneğin, ne zaman rdf:typebir öğe olarak kullanıldığını ve ne zaman bir öznitelik olduğunu anlayabilmek gibi).
Roger_S

3
Bunun zirveye çıkması gerekiyor, Craig. Diğer tüm çözümleri denedim ve sadece Rainbow, Python'u doğru bir şekilde kullandı ve okunabilir tema stil sayfalarına sahipti . İnanılmaz eklenti!
Blender


15

jQuery Syntax Highlighter , Google'ın Prettify'a dayanan yeni bir tanesidir - gerçekten gerçekten gerçekten popüler bir düz javascript sözdizimi vurgulayıcı.

Bu gibi özellikleri destekleyen codeve prebenzeri classnames kullanabilmek için, bloklar language-javascriptbiz de wordWrap olarak vurgulamak için istediğiniz belirtmek için. Diğerleri gibi ham bir görünümü açmak zorunda kalmadan, kodu normal olarak seçerek kopyalayıp yapıştırabilirsiniz. HTML5 veri özniteliği kullanılarak data-shveya başlatma sırasında seçenekler belirtilerek daha da özelleştirilebilir . Düzenli olarak güncellenen harika ve kararlı bir seçim.


Yazar, aslında SyntaxHighlighter'a değil Google'ın Prettify'a dayandığını söylüyor. SyntaxHighlighter 3'e benziyor, ancak kurulumu çok daha az iş gerektiriyor gibi görünüyor. Bağlantı için teşekkürler!
Tieson T.

15

Hakkında ne Prism Lea Verou tarafından.

Onu itibaren yazılan blog Haziran ayında (2012) duyuru:

  • Küçük. Çekirdek yalnızca 1,5 KB küçültülmüş ve gzip ile sıkıştırılmıştır.
  • İnanılmaz derecede genişletilebilir. Yalnızca yeni diller eklemek kolay değil (bu, bugünlerde her sözdizimi vurgulayıcıyla verilir), aynı zamanda mevcut olanları genişletmek için de geçerlidir.
  • Belirli durumlarda daha iyi performans için Web Çalışanları aracılığıyla paralelliği destekler.
  • Sizi herhangi bir Prism'e özgü işaretlemeyi kullanmaya zorlamaz, hatta Prism'e özgü bir sınıf adı bile kullanmaz, yalnızca yine de kullanmanız gereken standart işaretleme. Yani, bir süre deneyebilir, beğenmezseniz kaldırabilir ve geride hiçbir iz bırakmayabilirsiniz.

Bu, yeni dil tanımları ekleme kolaylığı nedeniyle benim için tüm cevaplar arasında en iyi seçenek haline geldi.
Mike Grace


5

JQuery kullanıyorsanız Chilli var:

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

Tek yapmanız gereken jquery-chili.js ve tarifler.js'yi eklemek ve vurgulamayı

$("code").chili();

Dili kendi kendine çözmelidir.


Bu sayfadaki örneklerin bağlantılarının tümü, süresi dolmuş reklamlarla dolu bir alana yönlendiriyor, bu nedenle bu vurgulayıcının neye benzediğine dair bir fikir edinmek biraz zor.
Nathan Osman

5

SHJS'den çok memnunum . Çok sayıda dili destekler ve oldukça hızlı ve doğru görünüyor.

İşte ben bunu kullanmak bir örnek bloguma . Coda'nın sözdizimi vurgulamasını simüle eden kendi özel CSS dosyamı kullanıyorum . Kullanmak isterseniz bana e-posta gönderin.


4

jQuery.Syntax , son derece hızlı ve hafif bir sözdizimi vurgulayıcıdır. Sözdizimi kaynak dosyalarının dinamik olarak yüklenmesine sahiptir ve CSS veya modeller kullanarak temiz bir şekilde bütünleşir.

Özel olarak bir boşluğu doldurmak için geliştirilmiştir - yani hızlı, temiz, istemci tarafı sözdizimi ayrıştırıcısı.


maalesef standart bir FpML mesajının SPAM olduğunu düşündü :)
ehosca

@ehosca, yaşadığınız problem hakkında bana biraz açıklama yapabilir misiniz?
ioquatix

i xml yapıştırdığınızda goo.gl/PPcDx için goo.gl/qSqm9 o Geçersiz içerik diyor spam olarak görünmektedir. Bu yardımcı olur umarım.
ehosca

Metne bazı satır sonları eklemeniz gerekir, aksi takdirde bağlantı spam'i gibi görünür. Kullandığım tam formülleri hatırlayamıyorum, ancak her satırda birden fazla URL'niz varsa, metnin spam olarak kabul edildiğini düşünüyorum - bunun nedeni, bot yığınlarının sisteme spam göndermesidir ( sözdizimi-highlighing.com ).
ioquatix


3

Tartışmacı davranmıyorum, ancak bir CMS veya blog platformu kullanıyorsanız, arka uç vurgulayıcı kullanmanın bariz nedenlerden dolayı daha iyi olduğunu belirtmeye değer olduğunu düşündüm - Geshi'ye bir göz atın ( http://qbnz.com/highlighter/ ) ilgileniyorsanız. Aslında sunucunuzu bir arka uç teknolojisi aracılığıyla HTML içeriğini ayrıştıracak şekilde ayarlayabilirsiniz - bu nedenle JS vurgulayıcılarına hiç gerek kalmaz. (Ekledikleri tek işlev, [swf kullanarak] yazdırma / kopyalama yeteneğidir.)


2
Benim için açık değil. Arka uç vurgulayıcı neden daha iyi?
Evan P.

1
Evet, ben de müşteriye daha geniş bir yanıt göndermeyi tercih
etmenin

1
Sözdizimi vurgulamanın JS'nin etkin olmadığı cihazlarda hala mevcut olmasını tercih ederim. Ek olarak, istemci tarafı vurgulayıcıların, vurgulanacak çok sayıda kodunuz varsa oldukça ağır olabilecek çalışma zamanı maliyetleri vardır. Bununla birlikte, özel kullanım durumunuza bağlıdır :)
James

Hangi cihazlarda JS etkin değil?
Jack Giffin


Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.