7

में जावास्क्रिप्ट तारों के अंदर HTML को सिंटैक्स-हाइलाइट कैसे करें जावास्क्रिप्ट तारों के अंदर HTML को सिंटैक्स-हाइलाइट करने के लिए कोई शानदार पैकेज है?सब्लिमे

(ध्यान दें सवाल केवल जे एस तार अंदर HTML के बारे में है, सामान्य रूप में प्रकाश डाला सिंटैक्स नहीं।)

विशेष रूप से मैं कोणीय घटकों इनलाइन टेम्पलेट्स

angular.module('compMod', []).component('myComp', { 
    template: `<div>Some Text</div>` 
}); 

का उपयोग कर लिख रहा हूँ और एचटीएमएल उजागर करने के लिए देख ES6 टेम्पलेट तारों के अंदर वाक्यविन्यास।

+1

मुझे नहीं पता कि ऐसा कोई पैकेज है या नहीं, लेकिन मुझे लगता है कि यह वैसे भी एक अच्छा विचार नहीं है। जब आप एचटीएमएल नहीं हैं तो शायद आप टेम्पलेट तारों के अंदर चीजों को हाइलाइट करना चाहते हैं। हालांकि, आप टेम्पलेट स्ट्रिंग का उपयोग करने के बजाय 'templateUrl' का उपयोग कर सकते हैं और टेम्पलेट फ़ाइल से लिंक कर सकते हैं। – Calvin

+0

@ कैल्विन इनलाइन टेम्पलेट्स को एक ही स्थान पर रखने का एक लाभ है, इसका अक्सर उपयोग किया जाता है, उदाहरण के लिए [यहां] (https://github.com/formly-js/angular-formly/blob/master/src/directives/formly-form.js), लेकिन जहां तक ​​मुझे पता है कि उस पैकेज के लेखक वेबस्टॉर्म का उपयोग करते हैं ठीक है कि। –

+0

गिटूब पर sublimehq के संकुल रेपो में एक [मुद्दा] (https://github.com/sublimehq/Packages/issues) खोलें और '[जावास्क्रिप्ट]' टैग का उपयोग करके अनुरोध करें। 'JavaScript.sublime-syntax' के नवीनतम संस्करण में, बैकटीक्स में टेम्पलेट स्ट्रिंग्स को इस तरह चिह्नित किया गया है, इसलिए HTML सिंटैक्स को आयात करना बहुत कठिन नहीं होना चाहिए। वे सहमत हो सकते हैं या नहीं भी हो सकते हैं, लेकिन यह एक शॉट के लायक है। – MattDMo

उत्तर

4

जैसा कि @ कैल्विन ने ऊपर टिप्पणी की, मैं नहीं कहूंगा कि यह एक अच्छा अभ्यास है, फिर भी मैं यह नहीं कहूंगा कि यह पूरी तरह से खराब है। वैसे भी, यहां मेरा बेवकूफ समाधान है (किसी भी किनारे के मामलों के लिए इसका परीक्षण नहीं किया गया है):

babel package for sublime text इंस्टॉल करें और इसे अपने * .js फ़ाइलों के लिए default वाक्यविन्यास के रूप में चुनें।

अगला, JavaScript (Babel).sublime-syntax संपादित करें, जो Babel पैकेज निर्देशिका के अंदर स्थित है, उदा। ~/.config/sublime-text-3/Packages/Babel/। अनुभाग template-string-body: के लिए

खोजें, और इसकी शुरुआत निम्नांकित दो पंक्तियों, @ VRPF के सुझाव के समान पर जोड़ें:

- meta_content_scope: text.html.basic.embedded.js 
- include: scope:text.html.basic 

अब आप टेम्पलेट तार के भीतर ES6 + एचटीएमएल वाक्य रचना में एक पूर्ण समर्थन है।

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