Ubah / Tambahkan penyorotan sintaks untuk bahasa di Sublime 2/3


94

Saya ingin mengubah / menambahkan penyorotan sintaks untuk bahasa di Sublime 2/3.

Misalnya saya ingin kata kunci this diwarnai dalam JavaScript.

Bagaimana saya bisa melakukan itu?

Saya tahu bahwa ada File JavaScript preferensi C:\Program Files\Sublime Text 3\Packages, tetapi saya tidak tahu apa yang harus diubah atau jika saya harus membuat File Preferensi JavaScript baru di suatu tempat di folder ini %APPDATA%\Sublime Text 3.

Jawaban:


95

Penyorotan sintaks dikontrol oleh tema yang Anda gunakan, dapat diakses melalui Preferences -> Color Scheme. Tema menyoroti berbagai kata kunci, fungsi, variabel, dll. Melalui penggunaan cakupan, yang ditentukan oleh serangkaian ekspresi reguler yang terdapat dalam .tmLanguagefile di direktori / paket bahasa. Sebagai contoh, JavaScript.tmLanguageberkas memberikan lingkup source.jsdan variable.language.jske thiskata kunci. Karena Sublime Text 3 menggunakan .sublime-packageformat file zip untuk menyimpan semua pengaturan default, tidak mudah untuk mengedit file satu per satu.

Sayangnya, tidak semua tema berisi semua cakupan, jadi Anda harus bermain-main dengan yang berbeda untuk menemukan satu yang terlihat bagus, dan memberi Anda sorotan yang Anda cari. Ada sejumlah tema yang disertakan dengan Sublime Text, dan banyak lagi tersedia melalui Kontrol Paket , yang sangat saya sarankan untuk dipasang jika Anda belum melakukannya. Pastikan Anda mengikuti petunjuk ST3 .

Kebetulan, saya telah mengembangkan Neon Color Scheme, tersedia melalui Kontrol Paket, yang mungkin ingin Anda lihat. Tujuan utama saya, selain mencoba membuat berbagai bahasa terlihat sebaik mungkin, adalah mengidentifikasi sebanyak mungkin cakupan yang berbeda - lebih banyak daripada yang disertakan dalam tema standar. Meskipun definisi bahasa JavaScript tidak Neonselengkap Python, misalnya, masih memiliki lebih banyak keragaman daripada beberapa default seperti Monokaiatau Solarized.

jQuery disorot dengan Tema Neon

Saya harus mencatat bahwa saya menggunakan Better JavaScriptdefinisi bahasa @ int3h untuk gambar ini daripada yang dikirimkan dengan Sublime. Itu dapat diinstal melalui Kontrol Paket.

MEMPERBARUI

Akhir-akhir ini saya telah menemukan definisi bahasa pengganti JavaScript lainnya - JavaScriptNext - ES6 Syntax. Ini memiliki lebih banyak cakupan daripada JavaScript dasar atau bahkan JavaScript yang lebih baik. Ini terlihat seperti ini pada kode yang sama:

JavaScriptBerikutnya

Juga, sejak saya pertama kali menulis jawaban ini, @skuroda telah merilis PackageResourceViewermelalui Kontrol Paket. Ini memungkinkan Anda untuk melihat, mengedit dan / atau mengekstrak bagian atau keseluruhan .sublime-packagepaket dengan mulus . Jadi, jika mau, Anda bisa langsung mengedit skema warna yang disertakan dengan Sublime.

PEMBARUAN LAIN

Dengan dirilisnya hampir semua paket default di Github , perubahan telah datang dengan cepat dan cepat. Sintaks JS lama telah sepenuhnya ditulis ulang untuk menyertakan bagian terbaik dari JavaScript Next ES6 Syntax, dan sekarang kompatibel sepenuhnya dengan ES6. Sebuah ton perubahan lainnya telah dibuat untuk menutupi sudut dan tepi kasus, meningkatkan konsistensi, dan hanya secara keseluruhan membuatnya lebih baik. Sintaks baru telah disertakan dalam (saat ini) dev build 3111 terbaru .

Jika Anda ingin menggunakan sintaks baru apa pun dengan versi beta saat ini 3103, cukup kloning repo Github di suatu tempat dan tautkan JavaScript(atau bahasa apa pun yang Anda inginkan) ke Packagesdirektori Anda - temukan di sistem Anda dengan memilih Preferences -> Browse Packages.... Kemudian, cukup lakukan git pulldi direktori repo asli dari waktu ke waktu untuk menyegarkan perubahan apa pun, dan Anda dapat menikmati yang terbaru dan terhebat! Saya harus mencatat bahwa repo menggunakan .sublime-syntaxformat baru daripada yang lama .tmLanguage, jadi mereka tidak akan bekerja dengan build ST3 sebelum 3084, atau dengan ST2 (dalam kedua kasus, Anda harus mengupgrade ke versi beta atau dev terbaru).

Saat ini saya mengubah Skema Warna Neon saya untuk menangani semua cakupan baru dalam sintaks JS baru, tetapi sebagian besar harus sudah tercakup.


Saya telah menginstal Kontrol Paket dan JavaScript yang Lebih Baik. Bagaimana saya bisa mengatur skema untuk Anda? Itu tidak terdaftar di bawah Skema Warna.
Niklas

Apakah Anda juga menginstal "Tema Neon" melalui Kontrol Paket? Setelah Anda memilikinya, pergi ke Preferences -> Color Scheme -> Neon Themedan pilih Neon.
MattDMo

1
Jika Anda menginstal paket melalui Kontrol Paket, paket tersebut secara otomatis disimpan di tempat yang benar, dalam hal ini %APPDATA%\Sublime Text 3\Installed Packages\Neon Theme.sublime-package. Memilih opsi menu di atas akan memperbarui Packages\User\Preferences.sublime-settingsfile Anda secara otomatis juga.
MattDMo

@MattDMo - wow, ini sangat teliti. Saya hanya mencoba melakukan beberapa warna sintaks dan penguatan pengeditan untuk markup seperti XML. Tetapi mengalami kesulitan mencari tahu cara memulai dengan sesuatu yang sangat sederhana. Di mana saya bisa mulai melakukan rekayasa balik atau, lebih baik lagi, mendapatkan tutorial tentang cara membuatnya.
Timothy T.

1
@ nmz787 jika yang Anda inginkan hanyalah .sublime-syntaxfile, unduh saja dan salin ke ~/.config/sublime-text-3/Packages/User. Ini kemudian akan tersedia di menu sintaks di kanan bawah jendela Sublim, baik sendiri (akan bertuliskan "SystemVerilog") atau di bawah Usersubmenu, tergantung pada pengaturan Anda. Jika Anda menginginkan seluruh paket, pastikan Kontrol Paket telah diinstal dengan benar, buka palet perintah, ketik pci , tekan enter, cari SystemVerilog, dan tekan enter. Anda tidak perlu mengganti nama file atau apapun - mengapa Anda melakukan itu?
MattDMo

31

Saya akhirnya menemukan cara untuk menyesuaikan Tema yang diberikan.

Buka C:\Program Files\Sublime Text 3\Packagesdan salin + ganti nama Color Scheme - Default.sublime-packagemenjadi Color Scheme - Default.zip. Setelah itu unzip dan salin Tema yang ingin Anda ubah ke %APPDATA%\Sublime Text 3\Packages\User. (Dalam kasus saya,All Hallow's Eve.tmTheme ).

Kemudian Anda dapat membukanya dengan Editor Teks apa pun dan mengubah / menambahkan sesuatu, misalnya untuk mengubah thisdi JavaScript:

<dict>
    <key>name</key>
    <string>Lang Variable</string>
    <key>scope</key>
    <string>variable.language</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#FF0000</string>
    </dict>
</dict>

Ini akan menandai thisFile JavaScript berwarna merah. Anda dapat memilih Tema Anda di bawah Preferences -> Color Scheme -> User -> <Your Name>.


1
ya, ini adalah penyelesaian kikuk yang kita semua butuhkan untuk membiasakan diri saat kita mendekati dunia baru Sublime Text 3. Saya yakin akan ada plugin tidak lama lagi yang memungkinkan .sublime-packagepengeditan lebih mudah ...
MattDMo

9
Plugin itu ada di sini - disebut PackageResourceViewerdan dapat diinstal melalui Kontrol Paket. Itu membuat bekerja dengan .sublime-packagefile Sublime Text 3 jauh lebih mudah, dan saya sangat merekomendasikannya jika Anda berencana melakukan segala jenis penyesuaian pada ST3.
MattDMo

1
Di mana Anda menemukan referensi untuk aturan ini?
qodeninja

2
^ Apa yang mereka katakan. Saya juga tidak mengerti kapan / di mana Anda "memilih" kata kunci "ini" dalam kode, mengapa ini hanya mewarnai kata kunci "ini". Bisakah Anda menjelaskannya?
Zelphir Kaltstahl


16

Gunakan plugin PackageResourceViewer yang diinstal melalui Package Control (seperti yang disebutkan oleh MattDMo ). Ini memungkinkan Anda untuk mengganti sumber daya yang dikompresi hanya dengan membukanya di Sublime Text dan menyimpan file. Secara otomatis hanya menyimpan sumber daya yang diedit ke% APPDATA% / Roaming / Sublime Text 3 / Packages / atau ~ / .config / sublime-text-3 / Packages /.

Khusus untuk op, setelah plugin terinstal, jalankan PackageResourceViewer: Open Resourceperintahnya. Kemudian pilih JavaScriptdiikuti denganJavaScript.tmLanguage . Ini akan membuka file xml di editor. Anda dapat mengedit definisi bahasa apa pun dan menyimpan file. Ini akan menulis salinan pengganti dari file JavaScript.tmLanguage di direktori pengguna.

Metode yang sama dapat digunakan untuk mengedit definisi bahasa dari bahasa apa pun di sistem.


Saya tidak melihat apapun di sana tentang warna. Namun, jawaban Anda paling mendekati apa yang saya butuhkan. Sebagai gantinya, saya mengedit Tema Monokai.tm sesuai posting forum SublimeText ini agar penyorotan sintaks JSON berfungsi.
jmort253

1
Instruksi khusus dalam jawaban ini adalah untuk mengedit definisi bahasa. Meskipun ini tidak akan memungkinkan Anda mengedit warna skema warna secara langsung, ini akan memungkinkan Anda mengubah cara jenis cakupan tertentu ditemukan dan dengan demikian cara skema warna menafsirkan (dan mewarnai) bahasa. Plugin akan membuka semua jenis sumber daya di Sublime sehingga Anda juga dapat mengedit skema warna secara langsung dengan alat yang sama. Misalnya, saya menyukai skema warna Tomorrow Night jadi saya akan membuka Tema Tomorrow-Night.tm dengan plugin ini untuk mengedit skema warna tersebut.
chawkinsuf

5

"Ini" sudah diwarnai di Javascript.

Lihat-> Sintaks-> dan pilih bahasa Anda untuk disorot.


Apa yang saya cari: View -> Syntax -> Open all with current extension as...untuk mengatur misalnya *.stanfile dengan pewarnaan sintaks C ++.
BoltzmannBrain

0

Ini resep saya

Catatan: Ini bukan yang diminta OP. Petunjuk ini akan membantu Anda mengubah warna item (komentar, kata kunci, dll) yang merupakan aturan pencocokan sintaksis. Misalnya, gunakan instruksi ini untuk mengubah sehingga semua komentar kode diwarnai biru, bukan hijau.

Saya yakin OP menanyakan bagaimana mendefinisikan thissebagai item yang akan diwarnai ketika ditemukan dalam file sumber JavaScript.

  1. Instal Paket: PackageResourceViewer

  2. Ctrl+Shift+P> [ PackageResourceViewer: Open Resource]> [ Color Scheme - Default]> [ Marina.sublime-color-scheme] (atau skema warna apa pun yang Anda gunakan)

  3. Perintah di atas akan membuka tab baru ke file " Marina.sublime-color-scheme".

    • Bagi saya, file ini terletak di profil roaming saya %appdata%( C:\Users\walter\AppData\Roaming\Sublime Text 3\Packages\Color Scheme - Default\).
    • Namun, jika saya menjelajah ke jalur itu di Windows Explorer , [ Color Scheme - Default] bukan dari dir-anak [ Packages]. Saya menduga itu PackageResourceViewermelakukan virtualisasi.

langkah opsional: Di tab skema warna baru: Ctrl+Shift+P> [ Set Syntax: JSON]

  1. Telusuri aturan yang ingin Anda ubah. Saya ingin membuat komentar menjadi terlihat, jadi saya mencari " Comment"

    • Saya menemukannya di "rules"bagian tersebut
 "rules":
    [
        {
            "name": "Comment",
            "scope": "comment, punctuation.definition.comment",
            "foreground": "var(blue6)"
        },
  1. Cari string "blue6":untuk menemukan bagian definisi variabel warna. Saya menemukannya di "variables"bagian tersebut.

  2. Pilih warna baru menggunakan alat seperti http://hslpicker.com/ .

  3. Tentukan variabel warna baru, atau timpa setelan warna untuk blue6.

    • Peringatan: penimpaan blue6akan mempengaruhi semua elemen teks lainnya dalam skema warna yang juga menggunakan blue6 ("Punctuation" "Accessor").
  4. Simpan file Anda, perubahan akan langsung diterapkan ke file / tab yang terbuka.

CATATAN

Sublime akan menangani salah satu dari gaya warna ini. Mungkin lebih.

hsla = hue, saturation, lightness, alpha rgba = merah, hijau, biru, alpha

hsla (151, 100%, 41%, 1) - parameter terakhir adalah level alpha (transparansi) 1 = buram, 0,5 = setengah transparan, 0 = transparan penuh

hsl (151, 100%, 41%) - tidak ada saluran alfa

rgba (0, 209, 108, 1) - rgb dengan saluran alfa

rgb (0, 209, 108) - tidak ada saluran alfa

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.