जावास्क्रिप्ट के साथ सिंटैक्स हाइलाइटिंग कोड [बंद]


109

आप HTML में सिंटैक्स हाइलाइटिंग <code> ब्लॉक के लिए जावास्क्रिप्ट लाइब्रेरी की क्या सिफारिश कर सकते हैं?

(एक सुझाव प्रति उत्तर कृपया)।


जवाबों:


103

StackOverflow Prettify लाइब्रेरी का उपयोग करता है ।


मैं इसे अपनी सहमति देता हूँ। Google कोड इसका उपयोग अपने स्वयं के रेपो हाइलाइटिंग के लिए करता है (क्योंकि उन्होंने इसे लिखा है) और स्वचालित रूप से भाषा का पता लगाता है।
करण

निश्चित रूप से एक का उपयोग करते हुए जो "स्वचालित रूप से" पता लगाता है कि भाषा ग्राहक के मशीन / ब्राउज़र पर अधिक भार डालती है ...
जेम्स

2
आप भाषा को पहले से बता सकते हैं यदि आप इसे जानते हैं, तो यह प्रदर्शन में सुधार करेगा। यह सिर्फ बड़ी भाषा के दर्शकों के कारण StackOverflow में उपयोग नहीं किया जाता है।
विन्सेन्ट रॉबर्ट

बस इसे मेरी वेब साइट पर जोड़ा गया है, और यह उपयोग करने के लिए बहुत अच्छा और बहुत सरल है!
लॉरेंस डॉल

@Vincent: यह सिर्फ प्रदर्शन से ज्यादा सुधार करता है ;-)
सैमबी

44

मैंने हाल ही में एक इंद्रधनुष विकसित किया है।

मुख्य डिज़ाइन लक्ष्य मुख्य पुस्तकालय को वास्तव में छोटा बनाना और डेवलपर्स के लिए विस्तार करना वास्तव में आसान बनाना था।

Http://rainbowco.de देखें ।


2
मैं आज पूरे रेनबो में भाग गया - यह मुझे ऐसा लग रहा है कि यह प्रीटीइज़ से अधिक सूक्ष्मता से भेदभाव कर सकता है (उदाहरण के लिए, यह बताने में सक्षम है कि rdf:typeतत्व के रूप में कब प्रयोग किया जाता है और कब यह एक विशेषता है)।
रोजर_एस

3
यह ऊपर, क्रेग तक जाने की जरूरत है। मैंने अन्य सभी समाधानों की कोशिश की और केवल रेनबो ने पायथन को सही ढंग से संभाला और पठनीय थीम स्टाइलशीट की थी। अद्भुत प्लगइन!
ब्लेंडर


15

jQuery सिंटैक्स हाइलाइटर , Google के प्रीटीफाइ पर आधारित एक नया है - वास्तव में वास्तव में बहुत लोकप्रिय सादे जावास्क्रिप्ट सिंटैक्स हाइलाइटर।

यह इस तरह की चीजों का समर्थन करता है codeऔर preब्लॉक करता है, जैसे language-javascriptकि हम इसे उजागर करना चाहते हैं, साथ ही वर्डवैप के रूप में यह इंगित करने के लिए कि क्लासनेम का उपयोग करने में सक्षम है । आप कई अन्य लोगों की तरह एक कच्चा दृश्य खोलने के लिए सामान्य रूप से इसे चुनकर कोड को कॉपी और पेस्ट कर सकते हैं। एचटीएमएल 5 डेटा विशेषता का उपयोग करके data-shया आरंभीकरण के विकल्पों को निर्दिष्ट करके इसे और अधिक अनुकूलित किया जा सकता है। एक बढ़िया स्थिर विकल्प जो नियमित रूप से अपडेट किया जाता है।


लेखक वास्तव में कहता है कि यह Google के Prettify पर आधारित है, SyntaxHighlighter पर नहीं। सिंटेक्सहाइलेटर 3 की तरह ही दिखता है, लेकिन इसे स्थापित करने के लिए बहुत कम काम की आवश्यकता होती है। लिंक के लिए धन्यवाद!
टिसन टी।

15

ली वेरो द्वारा प्रिज्म के बारे में क्या ।

जून (2012) में उनके ब्लॉग पोस्ट की घोषणा से:

  • यह छोटा है। कोर केवल 1.5KB की है और gzipped है।
  • यह अविश्वसनीय रूप से एक्स्टेंसिबल है। न केवल नई भाषाओं को जोड़ना आसान है (यह इन दिनों हर वाक्यविन्यास हाइलाइटर के साथ दिया गया है), बल्कि मौजूदा लोगों का विस्तार करने के लिए भी।
  • यह कुछ मामलों में बेहतर प्रदर्शन के लिए वेब वर्कर्स के माध्यम से समानता का समर्थन करता है।
  • यह आपको किसी भी प्रिज्म-विशिष्ट मार्कअप का उपयोग करने के लिए बाध्य नहीं करता है, यहां तक ​​कि प्रिज्म-विशिष्ट वर्ग का नाम भी नहीं, केवल मानक मार्कअप जो आपको वैसे भी उपयोग करना चाहिए। तो, आप इसे थोड़ी देर के लिए आज़मा सकते हैं, अगर आपको यह पसंद नहीं है तो इसे हटा दें और पीछे कोई निशान न छोड़ें।

नई भाषा परिभाषाओं को जोड़ने में आसानी के कारण यह मेरे लिए सभी उत्तरों का सबसे अच्छा विकल्प था।
माइक ग्रेस


5

यदि आप jQuery का उपयोग कर रहे हैं तो मिर्च है:

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

आपको बस इतना करना है कि इसमें jquery-chili.js और recipes.js शामिल हैं, और इसके साथ हाइलाइट करें

$("code").chili();

यह खुद से भाषा का पता लगाना चाहिए।


उस पृष्ठ के उदाहरणों के लिंक सभी विज्ञापन से भरे एक समाप्त हो चुके डोमेन तक ले जाते हैं, इसलिए यह अनुमान लगाना थोड़ा मुश्किल है कि यह हाइलाइटर कैसा दिखता है।
नाथन उस्मान

5

मैं SHJS से बहुत खुश हूं । यह भाषाओं की एक बीवी का समर्थन करता है और बहुत तेज़ और सटीक लगता है।

यहाँ एक उदाहरण है जहाँ मैं अपने ब्लॉग पर इसका उपयोग करता हूँ । मैं अपने स्वयं के कस्टम सीएसएस फ़ाइल का उपयोग कर रहा हूं जो कोडा के सिंटैक्स हाइलाइटिंग का अनुकरण करता है। यदि आप इसका उपयोग करना चाहते हैं तो मुझे ईमेल करें।


4

jQuery.Syntax एक बहुत तेज़ और हल्का वाक्यविन्यास हाइलाइटर है। इसमें सिंटैक्स स्रोत फ़ाइलों का डायनेमिक लोडिंग है और सीएसएस या मॉडलइन का उपयोग करके सफाई को एकीकृत करता है।

यह विशेष रूप से एक अंतर को भरने के लिए विकसित किया गया था - वह है: एक तेज, स्वच्छ, क्लाइंट-साइड सिंटैक्स पार्सर।


दुर्भाग्य से यह एक मानक FpML संदेश SPAM :) होने का विचार करता था
ehosca

@ ओहोसा, क्या आप मुझे होने वाली समस्या पर कुछ स्पष्टीकरण देने में सक्षम हैं?
ioquatix

जब मैं xml को goo.gl/PPcDx में goo.gl/qSqm9 पर पेस्ट करता हूं तो यह अवैध सामग्री कहती है, स्पैम प्रतीत होता है। उम्मीद है की यह मदद करेगा।
एहोस्का

आपको पाठ में कुछ पंक्ति विराम शामिल करने की आवश्यकता है, अन्यथा यह लिंक स्पैम की तरह दिखता है। मुझे आपके द्वारा उपयोग किए गए सटीक सूत्र याद नहीं हैं, लेकिन मुझे लगता है कि यदि आपके पास प्रति पंक्ति एक से अधिक URL हैं, तो पाठ स्पैम माना जाता है - इसका कारण यह है कि बॉट्स के ढेर सिस्टम ( सिंटैक्स- highlighing.com ) को स्पैम कर रहे थे ।
ioquatix

3

यदि आप इन-ब्राउज़र संपादक में सिंटैक्स हाइलाइटिंग की तलाश कर रहे हैं, तो CodeMirror आज़माएं ।


3

मैं तर्कशील नहीं हूँ, लेकिन यह ध्यान देने योग्य है कि यदि आप CMS या ब्लॉग प्लेटफ़ॉर्म का उपयोग कर रहे हैं तो बैकएंड हाइलाइटर का उपयोग करना स्पष्ट कारणों के लिए बेहतर है - Geshi पर एक नज़र डालें ( http://qbnz.com/highlighter/ ) अगर आप रुचि रखते है। वास्तव में आप अपने सर्वर को बैकएंड तकनीक के माध्यम से HTML सामग्री को पार्स करने के लिए सेट कर सकते हैं - इसलिए जेएस हाइलाइटर्स की बिल्कुल भी आवश्यकता नहीं है। (वे जो एकमात्र कार्यक्षमता जोड़ते हैं, वह प्रिंट / कॉपी करने की क्षमता है [swf का उपयोग करके]।)


2
यह मेरे लिए स्पष्ट नहीं है। बैकएंड हाइलाइटर का उपयोग बेहतर क्यों है?
इवान पी।

1
हाँ, मुझे भी, यह जानकर बहुत अच्छा लगेगा कि ग्राहक के लिए एक बड़ी प्रतिक्रिया भेजने को प्राथमिकता देने के बारे में "स्पष्ट" क्या है ...
ZenMaster

1
मुझे लगता है कि अभी भी जेएस सक्षम नहीं है कि उपकरणों पर मौजूद वाक्यविन्यास हाइलाइटिंग पसंद करते हैं। इसके अतिरिक्त, क्लाइंट-साइड हाइलाइटर्स की रनटाइम लागत होती है जो कि बहुत अधिक हो सकती है यदि आपको हाइलाइट करने के लिए बहुत सारे कोड मिले हैं। उस ने कहा, यह आपके विशिष्ट उपयोग के मामले पर निर्भर करता है :)
जेम्स

जेएस में कौन से उपकरण सक्षम नहीं हैं?
जैक गिफिन


2

वेब संसाधन डिपो का यह लेख हाइलाइटिंग कोड के विकल्पों के एक समूह को सूचीबद्ध करता है, जिनमें से कुछ जावास्क्रिप्ट का उपयोग करते हैं। यह 4 मई 2009 को प्रकाशित हुआ था।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.