2013-03-15 11 views
13

AngularJS hakkında Egghead.io hakkında bazı videolar izliyordum. Videoların yaratıcısı Webstorm'u kullanıyor (ve inanıyorum ki onlar için çalışıyor). Fark ettiğim bir özellik, farklı kapsamlar veya tırnak işaretleri dahilinde farklı sözdizimi vurgulaması yapabilmesidir. Yani, aşağıdaki (bir angularjs direktifi) gibi kodSublime Text 2: Bağlamı temel alan farklı dil vurguları? (a la Webstorm)

return { 
    template: '<div>something</div>', 
    //   ^^^ these guys ^^^ 
} 

yılında ... O HTML olarak vurgulamak için tırnak işaretleri içini alabilirsiniz.

Sublime Text 2 kullanıyorum ve ona oldukça bağlıyım. Sublime'in böyle bir davayı ele alabilmesi için mevcut bir özellik/eklenti var mı? Değilse, Sublime Text 2 API'yi kullanarak teknik olarak bu gibi bir şey olabilir mi?

cevap

8

Sanırım yerleşik değil, ama kesinlikle mümkün. Graphviz ile çalışıyorum ve benzer bir şey yapmak istedim. Etiketler, html benzeri sözdizimi ile oluşturulabilir. Her neyse, ben .tmLanguage dosyası ile oynadı ve html benzeri girişlerin geçerli olduğu bağlam ile eşleştirmek için yeni bir desen ekledim (label = <'u arıyorum). Çekim için kullandığım modeller o kadar iyi değil, ama benim için iyi çalışıyor. Bu bana aşağıdakileri verdi, ki sizin aradığınıza benzediğini düşünüyorum.

Demo

Ben angularjs hakkında hiçbir şey bilmiyorum, bu yüzden o özgü bir şey ile size yardımcı olamaz, ama kesinlikle mümkündür. Aşağıdaki resimde, son <table></table>'un sadece vurgulamanın orada meydana gelmediğini göstereceğini unutmayın.

Düzenleme:

orijinal sonrası bu belirtmeyi unuttum, ama burada benim güncellenen tmLangauage dosyasıdır. İlk desen eklediğim şey ( link). JSON'dan plist'e geçmek için PlistJsonConverter'u kullandım ve dosyayı .tmLanguage olarak kaydettim. Bu yardımcı olur umarım.

+0

bu dosya varsayılan 'DOT.thLanguage' değerini geçersiz kılar mı yoksa bunu genişletir mi (bir şekilde) . –

+0

@RyanB Yerleşik graphviz paketini yok saydım, bu yüzden kendi başıma kullanıyor. – skuroda

+0

ilginç, teşekkürler –

0

@skuroda doğru, AngularJS yönerge JS dosyasında HTML'yi kolayca düzenlemek için ek bir eklentiyle @ skuroda'nın kodunu uyguladım. Sonuç, bir direktifi JS dosyası içinde vurgulayan HTML sözdizimi ve şablonlar düzenlenirken dize ile ilgili sınırlayıcıları kaldırmak için ek işlevselliktir .... Sublime AngularJS HTML Template Plugin