Web için yazıyorsanız, Markdown’a bakmak isteyebilirsiniz. Web yazarlarına hitap eden çok sayıda Markdown uygulaması var. Ancak Microsoft’un Visual Studio Code (VSCode) gibi ücretsiz kod düzenleyicileri daha da güçlü olabilir.

VSCode, Markdown’ı anlar ve onu HTML’de önizlemek için yerleşik araçlara sahiptir. Ancak, kelime sayımı ve yazım denetleyici gibi kelime işlemci işlevleri ekleyebilirsiniz. Önizleyici için web sitesine özel özelleştirmeleri de etkinleştirmek isteyebilirsiniz.

Son olarak, Markdown’ı HTML olarak kopyalayabilme özelliği, böylece onu bir İçerik Yönetim Sistemine (CMS) temiz bir şekilde yapıştırabilmeniz şarttır.

VSCode’u İndirin ve Yükleyin

Başlamak için VSCode’u veya açık kaynak alternatifi VSCodium’u indirin. Her birinin sürümleri, tüm büyük masaüstü işletim sistemleri için mevcuttur.

VSCode’u indirip yükledikten sonra , başlamak için uygulamayı çalıştırın.

VSCode varsayılan karşılama ekranı.

Kelime Sayısı Uzantısını Yükleyin

Bir kelime sayacı ekleyerek başlayın. Bunu halleden birçok uzantı var. Gerçek sözcükler ile kod veya dosya adları arasında en iyi ayrım yapan, Microsoft’un kendi Word Counter uzantısıdır.

Sağ alt bölmede Kaynaklar altında Uzantıyı İndir’e tıklayın .

İndirdikten sonra VSCode’a geçin.

Arayüzün sol alt köşesindeki dişli simgesine tıklayın .

Uzantıları tıklayın .

Uzantılar bölmesinin üst kısmına yakın üç noktaya ( … ) tıklayın.

VSIX’ten Yükle’yi tıklayın .

VSIX’ten Yükle vurgulanmış olarak VSCode uzantıları menüsü.

Az önce indirdiğiniz ms-vscode.wordcount-*.vsix dosyasını seçin .

Kelime Sayısı uzantısı şimdi kurulmalıdır. Yeni bir Markdown dosyası açıp yazarak test edin. Artık arayüzün sol alt tarafında bir kelime sayacı görmelisiniz:

​​​​​​​Microsoft’un Word Count uzantısına sahip VSCode, örnek bir belgedeki sözcük sayısını algılarken gösterilmiştir.

Yazım Denetimi Uzantısını Yükleyin

Ayrıca yazım denetimi işlevi eklemek isteyeceksiniz. Kelime sayaçlarında olduğu gibi, yazım denetimi yapan birçok uzantı vardır. En popüler olanı , birçok dilde mevcut olduğu için Street Side Software tarafından sağlanan Kod Yazım Denetimi’dir .

Yukarıdaki bölümden 1’den 6’ya kadar olan adımları izleyin.

Az önce indirdiğiniz streetsidesoftware.code-spell-checker-*.vsix dosyasını seçin .

Kod Yazım Denetimi uzantısı şimdi yüklenmelidir. Yeni bir Markdown dosyası açıp yanlış yazılmış sözcükleri yazarak test edin.

VSCode’da açık, yumuşak mavi dalgalı bir alt çizgi tarafından algılanan yanlış yazımlara sahip bir işaretleme belgesi.

Arayüzün sağ alt tarafında bir dizi hata ile birlikte bu kelimelerin altında dalgalı mavi bir çizgi görmelisiniz:

​​​​​​​​​​​​​Dört yazım hatası gösteren bir gösterge ile VSCode durum çubuğunun sağ alt tarafı.

Error Squiggle’ı Özelleştirin

Bu Yazım Denetimi uzantısıyla ilgili en büyük sorun, hataları tanımlayan dalgalı çizgi için kullanılan zayıf mavi renktir. Karanlık temaların arka planına karışma eğilimindedir ve diğer Markdown öğeleri için yeniden kullanılır.

Bir kelime işlemcide görmeyi beklediğiniz gibi onu koyu kırmızı bir renge dönüştürmeyi deneyebilirsiniz:

• Arayüzün sol alt köşesindeki dişli simgesine tıklayın .
• Ayarlar’a tıklayın .
• Workbench’e ve ardından Appearance’a tıklayın .
• Renk Özelleştirme’ye ilerleyin :
• VSCode Ayarları > Workbench > Görünüm > Renk Özelleştirme menüsü.
• settings.json’da Düzenle’yi tıklayın .
• Aşağıdaki kodu yeni bir sekmede açılan düzenleyiciye yapıştırın:
• “editorInfo.foreground”: “#ff0000”
• VSCode settings.json dosyası, özel kod eklenmiş olarak açılır.
• Dosyayı kapatın ve kaydedin.
• Şimdi, bir kelimeyi yanlış yazarsanız, VSCode onu parlak kırmızı bir dalgalı çizgi ile süsleyecektir:

VSCode’da açık, güçlü kırmızı dalgalı alt çizgi tarafından algılanan bariz yanlış yazımlar içeren bir işaretleme belgesi.

Yanlış Pozitifleri Yoksaymak

Yazım denetleyici, belirli sektöre özgü terimleri veya şirket adları gibi özel isimleri tanımayabilir. Örneğin yukarıdaki ekran görüntüsünde, VSCode “distro” kısaltmasını yazım hatası olarak vurgular.

Bu kelimeleri hata olarak görmeyi durdurmak için bunları Kullanıcı Ayarlarınıza eklemek isteyeceksiniz .

Yazım denetleyicinin yok saymasını istediğiniz kelimeye sağ tıklayın.

İmleci Yazım’ın üzerine getirin ve Kullanıcı Ayarlarına Sözcük Ekle’yi seçin .

Yazım ve Kullanıcı Ayarlarına Sözcük Ekle seçenekleri vurgulanmış olarak, dağıtım sözcüğü üzerinde bir sağ tıklama menüsü açılır.

Şu andan itibaren, yazım denetimi artık bu sözcükleri yanlış olarak tanımlamayacak:

VSCode’da üç yazım hatasıyla açık bir işaretleme belgesi.

Copy Markdown’ı HTML Uzantısı Olarak Kurun

Ardından, biçimlendirilmiş Markdown’ı kopyalayıp yapıştırabilmeniz için Copy Markdown as HTML uzantısını yükleyin.

Yukarıdaki bölümlerden 1’den 6’ya kadar olan adımları izleyin.

Az önce indirdiğiniz jerriepelser.copy-markdown-as-html-1.1.0.vsix dosyasını seçin.

Artık Markdown’ı VSCode’dan kopyalayabilmeli ve temiz HTML olarak bir CMS’ye yapıştırabilmelisiniz. Bunu test etmek için:

Bir Markdown metni seçin.

Görünüm menüsünde veya CTRL+Shift+P tuşlarına basarak Komut Paletini açın .

Markdown’ı seçin : HTML Olarak Kopyala :

Markdown ile VSCode açılır Komut Paleti: HMTL olarak kopyala vurgulanmış.

Kopyalanan Markdown’ı yeni bir HTML dosyasına yapıştırın.

Kopyalanan Markdown’ın HTML olarak düzgün bir şekilde yapıştırıldığını görmelisiniz:

Düzgün biçimlendirilmiş bir HTML belgesi VSCode’da açılır.

Önizleme Bölmesini Özelleştirme

Önizleme bölmesi varsayılan olarak geçerli VSCode temasıyla aynı stile sahip olacaktır.

​​​​​​​Bu makale, varsayılan önizleyici ile VSCode’da açılan bir işaretleme dosyasıdır.

Ancak önizlemelerin içeriğinizin nihai hedefini daha yakından yansıtmasını isteyebilirsiniz. Önizleme bölmesini, Markdown’unuzun zaten yayınladığınız web sitesindeymiş gibi görünmesini sağlayacak şekilde özelleştirebilirsiniz.

İstediğiniz herhangi bir web sitesini kullanabilirsiniz; aşağıdaki stiller MUO’dan alınmıştır. Herhangi bir web sitesinden yazı tiplerini bulmak ve renkleri seçmek için tarayıcınızın öğe inceleme aracını kullanmanız yeterli .

Yeni bir dosya oluşturun ve ” CustomStyles.css ” gibi bir ad verin.

Aşağıdaki örnek CSS kodunu dosyaya yapıştırın:

body {

background-color: #fff;

color: #2c2c2c;

font-family: Roboto;

font-size: 18px;

font-weight: 400;

line-height: 1.7em;

max-width: 750px;

}

h1 {

font-size: 38px;

font-weight: 800;

}

h2 {

font-size: 34px;

font-weight: 700;

}

h3 {

font-size: 24px;

font-weight: 700;

}

a {

border-bottom: 2px solid #bf0d0b;

color: #bf0d0b;

font-weight: 700;

}

a:hover {

color: #fff;

background: #bf0d0b;

}

strong {

font-weight: bold;

}

• Dosyayı kapatın ve kaydedin.
• Arayüzün sol alt köşesindeki dişli simgesine tıklayın .
• Ayarlar’a tıklayın .
• Uzantılar’a ve ardından Markdown’a tıklayın .
• Markdown: Styles’a ilerleyin ve Öğe Ekle’yi tıklayın .
• CustomStyles.css dosyanızın yolunu girin, örneğin:
• C:UsersAdamCustomStyles.css
• ​​​​​​​​VSCode Ayarları > Uzantılar > İşaretleme > İşaretleme: Stiller menüsü.
• Tamam’ı tıklayın .
• Bunları yaptıktan sonra, bu makaleye çok benzeyen bir önizleme bölmesine sahip olmalısınız.

Bu makale, MUO gibi görünecek şekilde özelleştirilmiş önizleme ile VSCode’da açılan bir işaretleme dosyası olarak.

Yine, bu değerleri tarayıcımın MUO’daki Inspect Element aracını kullanarak elde ettim, ancak kendi hedef web siteniz için değerleri bulmak isteyeceksiniz.

Editör Temaları

Varsayılan VSCode teması, her birinin yüksek kontrastlı sürümleriyle hem karanlık hem de aydınlık olarak gelir. Ancak, herhangi bir iyi kod düzenleyicide olduğu gibi, bir ton harika üçüncü taraf teması mevcuttur .

Hafif temada VSCode karşılama ekranı.

Kod düzenleyici görünümü yerine Kelime İşlemci görünümünü tercih ediyorsanız, huacat’ın Office temasını öneririm:

Bu makalenin işaretlemesi, huacat’ın Office temasını kullanarak VSCode’da açılır.

Bir kod düzenleyiciyi tercih ederseniz, Dracula, Gruvbox, Material (aşağıdaki ekran görüntüsüne bakın) ve Nord gibi genel temaların tümü uzantı pazarından edinilebilir.

Bu makalenin işaretlemesi, Equinusocio’nun Malzeme temasını kullanarak VSCode’da açılır.

Yeni bir tema yüklemek için:

• Arayüzün sol alt köşesindeki dişli simgesine tıklayın .
• Uzantıları tıklayın .
• Yukarıda belirtilen temalardan herhangi birini arayın veya kategoriyi temalara göre filtreleyin ve mevcut olanlara göz atın.

VSCode Nihai İşaretleme Düzenleyicisi mi?

Peki, VSCode web içeriği için nihai Markdown editörü mü? Kutunun dışında, muhtemelen değil. Ama her şeyin olabileceği kadar genişletilebilir.

Kelime sayaçları, yazım denetleyicileri, Markdown’ı HTML olarak Kopyala, önizleme özelleştirmeleri ve temalar sadece yüzeyseldir. VSCode için mevcut uzantılarla dolu bir ekosistem var ve onu kendinize ait yapmakta özgürsünüz.