Kullanıcı Kılavuzu İptal

Kod rengini özelleştirme

Ara

Son güncelleme: 21 May 2021

Dreamweaver

Uygulamayı aç

Dreamweaver'da kod yorumları gibi kod öğelerinizin renklerini (kod renklendirmesini) özelleştirmeyi öğrenin.

Dreamweaver'da arabirim renk tercihlerinizi Düzen > Tercihler > Arabirim'i kullanarak değiştirebilirsiniz.

Dört farklı renk temasından tercih yapabilir ve açık veya koyu bir kod teması seçebilirsiniz.

Renk ve kod temanızı ayarladıktan sonra Dreamweaver'da kod renklerinizi yerleşik main.less dosyasında seçicileri düzenleyerek daha da kişiselleştirebilirsiniz.

Renk temalarını ve kod temalarını ayarlama

Dreamweaver'ı başlattığınızda tercihlerinize göre bir renk teması seçebilirsiniz. Ayrıca bu tercihi istediğiniz zaman değiştirebilirsiniz.

Düzen > Tercihler'i (Windows) veya Dreamweaver > Tercihler'i (Macintosh) seçin.
Soldaki Kategori listesinden Arabirim'i seçin.
Renk Temaları listesinden bir tema seçin.
Arabirim temasını ayarladıktan sonra kod temasını ayarlayın.

Açık veya koyu bir kod teması seçebilirsiniz. Ardından, bu temayı yeni bir adla kaydedebilir ve daha fazla özelleştirebilirsiniz.

Varsayılan kod temaları
Değişiklikleri kaydetmek için Uygula'yı tıklatın.

Kod temalarını özelleştirme

Bir kod teması seçtikten sonra, kod temasını yeni bir adla kaydederek ve düzenleyerek kod renklerini özelleştirin.

Düzen > Tercihler'i (Windows) veya Dreamweaver > Tercihler'i (Macintosh) seçin.
Açık veya koyu bir kod teması seçin, ardından artı simgesini tıklatın ve temayı yeni bir adla kaydedin.

Not:

Varsayılan açık ve koyu kod temaları düzenlenemez, bu nedenle değişiklikleri bu temanın bir kopyasında yapmanız gerekir. Oluşturduğunuz yeni temalar her zaman düzenlenebilir.

Yeni bir tema oluşturma
Varsayılan kod temasını yeni bir adla kaydedin.

Varsayılan bir kod temasından bir kod teması oluşturma
Yeni oluşturulan kod temasını seçin ve Düzenle simgesini tıklatın.

Main.less dosyası Dreamweaver'da açılır ve artık kod renklerinizi özelleştirmek için temada seçicileri düzenleyebilirsiniz.

Main.less dosyasını kaydettiğinizde kod görünümü, yeni renklerle yenilenir.

Main.less dosyasında seçicileri düzenleme

Main.less dosyasındaki seçicileri düzenleme işlemine geçmeden önce, tema dosyası içindeki yorumları ve yönergeleri okumak için birkaç dakika ayırın. Hangi seçiciyi düzenleyeceğinizden hala emin değilseniz aşağıdaki kaynaklara bakın:

Seçicileri anlama: Belirli bir seçici tarafından etkilenen kod öğeleri hakkında bilgi veren referans tabloları
Token Inspector'ı kullanma: Belirli bir dosyayı “incelemek” ve belirli bir seçici tarafından etkilenen kod öğelerini vurgulamak için Token Inspector'ı kullanın.
Yorumların kod renklerini düzenlemek veya eşlenmiş etiketlerin vurgu rengini ayarlamak isterseniz Kod özelleştirme örnekleri bölümünde listelenen örnek kod parçacıklarına bakın.

Artık düzenlemeniz gereken seçicileri bildiğinize göre main.less dosyasında ilgili değişiklikleri yapın.

Aşağıdaki yorumu görene kadar dosyanın sonuna gidin:

/* Custom code colors or overrides should start after this line */
Renklerini düzenlemek istediğiniz kod öğeleri için seçicileri yazın. Aşağıdaki örneğe benzer bir sözdizimi kullanın:

.cm-tag {color: #00D0D0; }

Not:

Tek bir dosya içinde birden fazla kod diline sahipseniz ve her dili kendi kod renkleri
ile ayırt etmek istiyorsanız Karma kod dosyaları için kod renklerini özelleştirme bölümüne bakın.
Aynı rengi birden fazla öğeye atamak istiyorsanız birden fazla seçiciyi gruplayın. Aşağıdaki örnekte, virgülle ayrılan birden çok seçici tek bir renge atanmıştır.

.cm-atom, .cm-string, .cm-string-2, .cm-hr {color: #cf681d;}
Dosya türüne özel kod renklendirmesi özelleştirmesi yapmak için aşağıdaki örnekte gösterildiği gibi kod öğesini dosya türü seçicisinin içine alın:
```
.HTML{
.cm-tag{ color: #00D0D0;}
}
```
Değişikliklerinizi yaptıktan sonra dosyayı kaydedin.

Dreamweaver, tüm açık belgelerde Kod görünümünü yeni renklerle yeniler.

Not:

Değişikliklerinizde sözdizimi hataları veya tanımlanmamış değişkenler varsa Dreamweaver yaptığınız özel kod değişikliklerini yüklemez ve bunun yerine varsayılan Koyu kod temasına geri döner.

Karışık kod dosyaları için kod renklerini özelleştirme

HTML/CSS, HTML/PHP veya HTML/JavaScript gibi karışık mod dosyalarıyla (farklı kodlama dilleri içeren bir dosya) çalışıyorsanız kod renklerini aşağıdaki yolla özelleştirebilirsiniz:

Kod temalarını özelleştirme bölümündeki yönergeleri izleyerek özel bir kod teması oluşturun. Yeni temayı seçin ve uygulayın.
Dreamweaver uygulamasından çıkın.
Package.json dosyasını bir metin düzenleyicisinde açın.

Windows üzerinde: %appdata%\Adobe\Dreamweaver CC 2017\tr_TR\Configuration\Brackets\extensions\user\\

Mac üzerinde: ~/Library/Application Support/Adobe/Dreamweaver CC 2017/tr_TR/Configuration/Brackets/extensions/user//

Aşağıdaki satırı temaya{} ekleyin.

"addModeClass": true

Package.json dosyasını düzenleme
Dreamweaver'ı açın, Düzenle > Tercihler > Arayüz'ü seçin, yeni temayı seçin ve Düzenle simgesini tıklatın.

Main.less dosyasının sonuna moda özel stiller ekleyin.

İlgili dosya türüne ilişkin kod renklerini düzenlemek için aşağıdaki tabloda listelenen seçicileri kullanın.

Seçici	Kod dosya türü
.cm-m-clike	PHP
.cm-m-css	CSS, Less
.cm-m-javascript	JavaScript
.cm-m-xml	HTML, XML

Örneğin, CSS dosyasındaki etiket adlarının kod renklerini ve HTML veya PHP içerisindeki stil etiketlerini özelleştirmek için aşağıdaki sözdizimini kullanın:

.cm-tag {color: #BD46BD;} 
.cm-m-css.cm-tag {color: #38D08B;}

Main.less dosyasını kaydedin.

Kod rengi değişiklikleri bundan sonra kod dosyalarınıza yansıtılır.

Kod özelleştirme örnekleri

Farklı senaryolarda kod renklerini nasıl özelleştirebileceğinizi anlamak için aşağıdaki örnekleri inceleyin.

Eşlenmiş etiketlerin vurgulamasının rengini ayarlama

Main.less dosyasında aşağıdaki kod parçacığını arayın ve rengi ayarlayın.

.CodeMirror-matchingbracket, .CodeMirror-matchingtag {
    /* Ensure visibility against gray inline editor background */
    background-color: #B53A3A;
    color: #fff!important;

Not:

Bu kod parçacığı temaya bağlıdır. Tüm temalarda bulunmayabilir.

Kod yorumlarının rengini ayarlama

Main.less dosyasında aşağıdaki kod parçacığını arayın ve rengi ayarlayın.

.cm-comment {color: #717171; font-style: italic;}

Seçicileri anlama

Kod öğelerinin renklerini değiştirmek için main.less dosyasında seçicilerin özelliklerini düzenleyin.

Ancak, main.less dosyası içindeki seçicileri değiştirmeye başlamadan önce farklı seçicilerin ne anlama geldiğini ve etkiledikleri kod öğelerini anlamak önemlidir. Bu seçiciler tarafından etkilenen HTML, CSS, JavaScript ve PHP dosyalarındaki kod öğelerini anlamak için aşağıdaki tabloyu gözden geçirin.

Ayrıca belirli bir seçiciden etkilenen kod öğelerini anlamak için Token Inspector'ı da kullanabilirsiniz.

Seçiciler	HTML	CSS	JavaScript	PHP
.cm-atom	gibi varlık adları	Onaltılı, RGB veya HSL formatında renkler, strong, none, auto, inherit vb. gibi önceden tanımlanmış nitelik değerleri.	true, false, null, undefined, NaN, Infinity	True, False, Null ve __LINE__, __DIR__, vb. sihirli sabitler
.cm-attribute	Nitelik Adı	all, braille, print, screen vb. ortam türleri
.cm-bracket	<, >, /> ve </ gibi etiket parantezleri
.cm-builtin		ID seçicileri		htmlspecialchars, trim, substr vb. yerleşik işlevler
.cm-comment	Yorum	Yorum	Yorum	Yorumlar
.cm-def		“@ rule”	değişken, işlev tanımı ve işlev parametresi	İşlev tanımında işlev adı
.cm-error	Başlangıç etiketi olmayan kapatma etiketleri Varlık değeri için eksik bir tırnak işareti	Bir özellik değeri için eksik {} ayraçları veya eksik tırnak işaretleri ya da tanınmayan özellik
.cm-keyword		Renk adları, !important, @media içinde and, only ve benzeri anahtar sözcükler.	Kontrol yapısı anahtar sözcükleri (if, else, …), in, of, from, default, public, private vs.	function, if, else, new, echo, isset vs. gibi anahtar sözcükler
.cm-meta	<!DOCTYPE> Bildirimi	-webkit-, -o-, vs. gibi tarayıcıya özel önekler	Yayılmış sözdiziminde elips. Örnek: myFunction(...iterableObj);	<!DOCTYPE> Açıklama ve PHP başlangıç ve bitiş etiketleri: <?php, ?>
.cm-number		Birimli veya birimi olmayan bir sayı	12, 2.1, 123e-5, 0x11, 0b11, 0o11 vb. bir sayı	12, 2.1, 0x11, 0b11, 0123, 5.0E+19 vb. bir sayı
.cm-operator			İşleçler: +, -, *, +=, !==, &&, >>>, vb.	===, &&, !, =>, +, -, vb. işleçler
.cm-property		Özellik adı	Nesne özelliği veya yöntemi
.cm-qualifier		Sınıf seçicisi
.cm-string	nitelik değeri	Url() çağrısına iletilen, tırnak işaretleri arasında font adı, vb. gibi normal dize.	Harf dizesi	Harf dizesi
.cm-string-2		scrollbar-arrow-color, scrollbar-base-color, vb. standart olmayan özellikler.	Normal ifadeler
.cm-tag	Etiket adı	Etiket seçici
.cm-variable		Tırnak işaretleri olmadan font adları	Global değişkenler/işlevler, sınıf referansları	Kullanıcı tanımlı işlev adları, arabirim/sınıf referansları, sınıf özellikleri, gölgeler,
.cm-variable-2		main-bg-color gibi özel özellikler	Kapsamlı değişkenler/işlev referansları	Kullanıcı tanımlı ve önceden tanımlanmış değişkenler, parametreler veya nitelikler
.cm-variable-3		:hover ve :focus vb sahte sınıflar ve ::first-letter, ::selection, vb. sahte öğeler

Aşağıdaki tablo, main.less dosyasındaki seçiciler tarafından etkilenen Dreamweaver şablonlarını ve kitaplıklarını gösterir.

Seçici	Şablonlar (DWT)	Kitaplık (LBI)
.cm-templateComment	Şablon yorumları
.cm-templateAttrVal	Şablon yorumlarında nitelik değerleri
.cm-instanceParam	InstanceParam yorumu ve niteliği
.cm-instanceParamAttrVal	InstanceParam nitelik değerleri
.cm-libraryItem		Belgeye eklenen Kitaplıklar. Örneğin: .cm-libraryItem { color: #3A3A3A; background-color: #A4A4A4; }

Aşağıdaki tabloda, tek bir dosyada birden fazla dilin bulunduğu senaryolar için kod renklerini özelleştirirken kullanılacak seçiciler gösterilmektedir.

Seçici	Kod dosya türü
.cm-m-clike	PHP
.cm-m-css	CSS, Less
.cm-m-javascript	JavaScript
.cm-m-xml	HTML, XML

Token Inspector'ı kullanma

Main.less tema dosyasındaki seçicilerin kod dosyalarındaki (HTML, CSS, JavaScript ve PHP dışındaki) kod öğelerini nasıl etkilediğini öğrenmek için Token Inspector'ı kullanın.

Token Inspector'ı Google Chrome kullanarak açın.
TokenInspector yardımcı uygulaması şu iki bölümden oluşur:
- Kod düzenleyici,
- Modları değiştirmek için bir seçenek ve
- Sağda bir seçici listesi.
Seçicileri anlamak için Token Inspector'ı kullanma

A. Kod Düzenleyici B. Modu Değiştir seçeneği C. Seçici listesi
Dosya içeriğini kopyalayıp Kod Düzenleyici'ye yapıştırın.
Dosyanın modunu dosya adı uzantısına yazıp Modu değiştir'i tıklatarak değiştirin.

Örneğin, bu bir HTML dosyası ise dosya adı uzantısını html olarak değiştirin. Sayfa, moddaki değişikliği yansıtacak şekilde güncelleştirir ve sayfanın üst kısmında geçerli modu belirtir.

Token Inspector'da mod göstergesi
Görünümünü değiştirmek istediğiniz kod öğesini seçin.

Ardından, Token Inspector seçiciyi vurgular.
(İsteğe bağlı) Ayrıca belirli bir seçiciyi seçip kod dosyanızda bu seçiden etkilenen kod öğelerini görebilirsiniz.
Düzenlemek ve güncelleştirmek istediğiniz seçicileri not edin ve Token Inspector'ı kapatın.