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

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

Son olarak, bir İçerik Yönetim Sistemine (CMS) temiz bir şekilde yapıştırabilmeniz için Markdown'ı HTML olarak kopyalama yeteneği bir zorunluluktur.

VSCode'u indirin ve yükleyin

Başlamak için ya VSCode'u ya da onun açık kaynaklı alternatifi VSCodium'u indirin. Her birinin sürümleri, tüm büyük masaüstü işletim sistemleri için mevcuttur.

bir kez indirilen ve yüklenen VSCode, başlamak için uygulamayı çalıştırın.

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

Bir kelime sayacı ekleyerek başlayın. Bunu işleyen 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.

instagram viewer

İndirmek:Sözcük sayısı VSCode Uzantısı (Ücretsiz)

  1. Tıklamak Uzantıyı İndir altında Kaynaklar sağ alt bölmede.
  2. İndirdikten sonra VSCode'a geçin.
  3. Tıkla dişli simgesi arayüzün sol alt köşesinde.
  4. Tıklamak Uzantılar.
  5. Üç noktaya tıklayın (...) Uzantılar bölmesinin üst kısmına yakın.
  6. Tıklamak VSIX'ten yükleyin.
  7. Seç ms-vscode.wordcount-*.vsix az önce indirdiğiniz dosya.

bu Sözcük sayısı uzantısı şimdi yüklenmiş olmalıdır. Yeni bir Markdown dosyası açıp yazarak test edin. Şimdi arayüzün sol alt tarafında bir kelime sayacı görmelisiniz:

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

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ı Kod Yazım Denetimi Birçok dilde mevcut olduğu için Street Side Software tarafından.

İndirmek:Kod Yazım Denetimi VSCode Uzantısı (Ücretsiz)

  1. Yukarıdaki bölümden 1'den 6'ya kadar olan adımları izleyin.
  2. Seç streetsidesoftware.code-spell-checker-*.vsix az önce indirdiğiniz dosya.

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

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

Hata Dalgasını Ö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 koyu kırmızı bir renge değiştirmeyi deneyebilirsiniz:

  1. Tıkla dişli simgesi arayüzün sol alt köşesinde.
  2. Tıklamak Ayarlar.
  3. Tıklamak tezgah, sonra Dış görünüş.
  4. Aşağı kaydır Renk Özelleştirme:
  5. Tıklamak settings.json'da düzenleyin.
  6. Yeni bir sekmede açılan düzenleyiciye aşağıdaki kodu yapıştırın:
    "editorInfo.foreground": "#ff0000"
  7. Kapatın ve dosyayı kaydedin.

Şimdi bir sözcüğü yanlış yazarsanız, VSCode onu parlak kırmızı bir dalgalı çizgiyle süsleyecektir:

Yanlış Pozitifleri Yoksaymak

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

Bu kelimeleri hata olarak görmeyi bırakmak için, onları Kullanıcı ayarları.

  1. Yazım denetleyicisinin yok saymasını istediğiniz kelimeye sağ tıklayın.
  2. Üzerinde gezdirmek Yazım ve seçin Kullanıcı Ayarlarına Kelime Ekle.

Şu andan itibaren, yazım denetimi artık bu kelimeleri yanlış olarak tanımlamayacaktır:

Copy Markdown'ı HTML Uzantısı Olarak Yükleyin

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

İndirmek:Markdown'ı HTML olarak kopyala VSCode Uzantısı (Ücretsiz)

  1. Yukarıdaki bölümlerden 1'den 6'ya kadar olan adımları izleyin.
  2. Seç jerriepelser.copy-markdown-as-html-1.1.0.vsix az önce indirdiğiniz dosya.

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

  1. Biraz Markdown metni seçin.
  2. Aç Komut Paleti içinde görüş menüsüne veya düğmesine basarak CTRL+Üst Karakter+P.
  3. Seçmek Markdown: HTML olarak kopyala:
  4. 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:

Önizleme Bölmesini Özelleştirme

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

Ancak, önizlemelerin içeriğinizin nihai hedefini daha yakından yansıtmasını isteyebilirsiniz. Markdown'ınızın yayınladığınız web sitesinde zaten varmış gibi görünmesini sağlamak için önizleme bölmesini özelleştirebilirsiniz.

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

  1. Yeni bir dosya oluşturun ve ona " gibi bir ad verinCustomStyles.css"
  2. Aşağıdaki örnek CSS kodunu dosyaya yapıştırın:
    gövde {
     arka plan rengi: #fff;
     renk: #2c2c2c;
     yazı tipi ailesi: Roboto;
     yazı tipi boyutu: 18 piksel;
     yazı tipi ağırlığı: 400;
    satır yüksekliği: 1.7em;
     maksimum genişlik: 750 piksel;
    }
    h1 {
     yazı tipi boyutu: 38 piksel;
     yazı tipi ağırlığı: 800;
    }
    

    h2 {
     yazı tipi boyutu: 34 piksel;
     yazı tipi ağırlığı: 700;
    }
    

    h3 {
     yazı tipi boyutu: 24 piksel;
     yazı tipi ağırlığı: 700;
    }
    

    a {
     sınır-alt: 2piksel katı #bf0d0b;
     renk: #bf0d0b;
     yazı tipi ağırlığı: 700;
    }
    

    a:vurgu {
     renk: #fff;
     arka fon: #bf0d0b;
    }
    kuvvetli {
     yazı tipi ağırlığı: kalın;
    }
  3. Kapatın ve dosyayı kaydedin.
  4. Tıkla dişli simgesi arayüzün sol alt köşesinde.
  5. Tıklamak Ayarlar.
  6. Tıklamak Uzantılar ve daha sonra indirim.
  7. Aşağı kaydır İşaretleme: Stiller ve tıklayın Öğe eklemek.
  8. yolunuza girin CustomStyles.css dosya, örneğin:
    C:\Kullanıcılar\Adem\Özel Stiller.css
  9. Tıklamak TAMAM.

Bunları yaptıktan sonra, bu makaleye çok benzeyen bir önizleme bölmesine sahip olmalısınız.

Yine, bu değerleri MUO'da tarayıcımın 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üzenleyici gibi, bir sürü harika üçüncü taraf teması mevcut.

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

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

Yeni bir tema yüklemek için:

  1. Tıkla dişli simgesi arayüzün sol alt köşesinde.
  2. Tıklamak Uzantılar.
  3. Yukarıda belirtilen temalardan herhangi birini arayın veya kategoriyi filtreleyin. temalar ve mevcut olanlara göz atın.

VSCode Ultimate Markdown Düzenleyicisi mi?

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

Kelime sayaçları, yazım denetleyicileri, İşaretlemeyi HTML Olarak Kopyala, önizleme özelleştirmeleri ve temalar sadece yüzeyi çizer. VSCode için eklentilerle dolu bir ekosistem var ve bunu kendinize ait yapmakta özgürsünüz.