2012-04-21 11 views
10

के साथ HTML फ़ाइलों के लिए हाइलाइटिंग वर्तमान में मैं हैंडलबार्स (जेएस टेम्पलेट इंजन) के साथ एक परियोजना पर काम कर रहा हूं और मैं विकास के लिए ग्रहण का उपयोग कर रहा हूं। समस्या यह है कि ग्रहण मेरे हैंडलबार-टेम्पलेट्स के लिए सिंटैक्स हाइलाइटिंग प्रदान नहीं करता है। मेरे टेम्पलेट टैग में संलग्न हैं। अपेक्षित कार्यों में सिंटैक्स हाइलाइटिंग।ग्रहण सिंटैक्स <script type = "tmpl_handlebars">

स्क्रीनशॉट:

http://i.stack.imgur.com/1tPyz.png

क्या यह संभव है, कि ग्रहण भी इस कोड (सबसे अच्छे रूप में HTML सिंटेक्स रंग के साथ) पर प्रकाश डाला गया?

उत्तर

5

आप PHP का उपयोग कर रहे हैं, तो आप खाली php टैग जोड़कर ग्रहण मूर्ख कर सकते हैं:

<scrip<?php ?>t type="tmpl_handlebars" id="tmpl_places"> 
    <article> 
     <h1> 
      ... 
     </h1> 
    </article> 
</script> 
+0

यह केवल अस्थायी रूप से स्क्रिप्ट टैग का नाम बदलने के लिए भी काम करेगा। – nitind

2

आप एक प्लग-इन है जो कि टेम्पलेट इंजन का समर्थन करता है खोजने के लिए होगा। ग्रहण द्वारा प्रदान किया गया HTML संपादक सिंटैक्स रंग, सामग्री सहायता इत्यादि प्रदान करने वाले वर्गों को खोजने के लिए प्रकार/भाषा विशेषताओं के मान का उपयोग करता है। संभावना है, लेकिन बॉक्स से बाहर, यह केवल जावास्क्रिप्ट के लिए प्रदान करता है।

2

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

पहले, अपने सभी टैग है कि "tmpl_handlebars" के साथ divs में टेम्पलेट के रूप में सेवा लिखने स्क्रिप्ट के बजाय सीएसएस वर्ग:

<div class="tmpl_handlebars" id="tmpl_places"> 
    <article> 
     <h1>Hello, World!</h1> 
     <p>This is a template...</p> 
    </article> 
</div> 

तब, जब अपने पृष्ठ के लोड होते, गतिशील div टैग स्क्रिप्ट के साथ बदलें टैग, और आईडी टैग और div टैग की सामग्री को स्क्रिप्ट में स्थानांतरित करें। jQuery के साथ आपको बस अपने एचटीएमएल हेड में इस छोटी स्क्रिप्ट को जोड़ना होगा।

$(function() { 
    $(".tmpl_handlebars").each(function() { 
     var $this = $(this); 
     var children = $this.children().detach(); 
     var id = $this.attr("id"); 
     $this.replaceWith(
      $('<script type="tmpl_handlebars"/>') 
       .attr("id", id) 
       .append(children); 
     ); 
    }); 
}); 

इस बॉक्स से बाहर काम कर सकते हैं, लेकिन जैसा कि मैंने मूंछ और हैंडल के एक विशेषज्ञ नहीं हूँ, मैं वास्तव में नहीं जानता कि जब वे डोम टेम्पलेट्स खोजने के लिए संसाधित करते हैं, इसलिए यदि आप होना चाहते हैं पूरी तरह से सुरक्षित, आपको यह तीसरा चरण करना चाहिए: स्क्रिप्ट टैग को निकालें जिसमें इन पुस्तकालयों को आपके सिर के स्थैतिक एचटीएमएल से शामिल किया गया है, और इसके बजाय, उन्हें divs के प्रसंस्करण के बाद जावास्क्रिप्ट के साथ गतिशील रूप से जोड़ें, इसलिए स्क्रिप्ट आने पर आपका डोम तैयार हो जाता है । @ Neparkiraj के जवाब देने के लिए

$("head").append('<script type="text/javascript"' 
      + 'src="**LOCATION_OF_DYNAMICALLY_LOADED_FILE**"></script>'"); 
//etc... 
+1

अन्य संपादकों में एक ही समस्या नहीं हो सकती है, इसलिए कोड को घुमाएं अनुचित लगता है। मैं एक ग्रहण विशिष्ट समाधान की तलाश में था। –

+0

@kinjal मैं समझता हूं, लेकिन यदि आप जानना चाहते हैं, तो मुझे लगता है कि यह पुस्तकालय है जिसमें समस्या है, ग्रहण नहीं। उन्होंने टेम्पलेट को "स्क्रिप्ट" टैग में डालने का फैसला कब किया था ...? यह एचटीएमएल दृष्टिकोण से भ्रमित है, और यह भी वैध एचटीएमएल नहीं है। आप संपादक को इसे सही तरीके से रंगने की अपेक्षा कैसे करेंगे? –

2

समान:

पिछले }); कोड में divs संसाधन से पहले, अपनी स्क्रिप्ट जोड़ने के लिए निम्नलिखित पंक्तियाँ जोड़ें।

यदि आप Django का उपयोग कर रहे हैं, तो आप केवल एक खाली टैग जोड़ सकते हैं (मुझे विश्वास है) "चाल" ग्रहण केवल यह सोचने में कि रेखा सिर्फ "खराब" एचटीएमएल है। इसके बाद लाइनों तो html वाक्य रचना के साथ हाइलाइट किया जाएगा:

<scrip{{NONEXISTANTVAR}}t type="tmpl_handlebars" id="tmpl_places"> 
    <article> 
     ... 
    </article> 
</script> 

के रूप में टैग खाली है, <script type="tmpl_handlebars" id="tmpl_places"> पूरी तरह से अंतिम दस्तावेज़ में रेंडर किया जाएगा।ध्यान दें कि, का उपयोग कर Django भी संभावना इस कोड को एक {% verbatim %} ब्लॉक में रहता है इसका मतलब है, तो आप प्राप्त करने के लिए इस कोड को जोड़ सकते हैं:

<scrip{% verbatim %}t type="tmpl_handlebars" id="tmpl_places"> 
    <article> 
     ... 
    </article> 
</script> 
{% endverbatim %} 

यह सब एक तरह से बदसूरत है, लेकिन ग्रहण में प्रकाश डाला दोनों सही HTML की ओर जाता है और दस्तावेज़ में सही प्रतिपादन।

संबंधित मुद्दे