VSCode'u Ultimate Markdown Düzenleyicisine Dönüştürme

VSCode'u Ultimate Markdown Düzenleyicisine Dönüştürme

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.





seni kimin aradığını nasıl bilebilirim

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.



GÜNÜN YAPILAN VİDEOSU

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.



VSCode varsayılan karşılama ekranı.

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.

İ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 . ​​​Microsoft'un Word Count uzantısına sahip VSCode, örnek bir belgedeki kelime sayısını algıladığını gösteriyor.
  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:

​​Yumuşak mavi dalgalı bir altı çizili tarafından algılanan yazım hataları ile VSCode'da açık olan bir indirim belgesi.

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.

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

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

VSCode settings.json dosyası, özel kod eklenerek açılır.

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 : Güçlü bir kırmızı dalgalı alt çizgi tarafından algılanan bariz yazım hatalarıyla VSCode'da açık bir markdown belgesi.
  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"
    VSCode'da üç yazım hatasıyla açık bir markdown belgesi.
  7. ve dosyayı kaydedin.

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

VSCode'da uygun şekilde biçimlendirilmiş bir HTML belgesi açılır.

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 . ​​​Bu makale, varsayılan önizleyici ile VSCode'da açılan bir işaretleme dosyası olarak.

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

​​VSCode Ayarları > Uzantılar > İşaretleme > İşaretleme: Stiller menüsü.

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 : Bu makale, MUO gibi görünecek şekilde özelleştirilmiş önizleyici ile VSCode'da açılan bir işaretleme dosyası olarak.
  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:

Işık temasındaki VSCode karşılama ekranı.

Önizleme Bölmesini Özelleştirme

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

Bu makalenin işaretlemesi, huacat'ın Office temasını kullanarak VSCode'da açılı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 inceleme öğesi aracını kullanın ve herhangi bir web sitesinden renkleri seçin .

  1. Yeni bir dosya oluşturun ve ona ' gibi bir ad verin CustomStyles.css '
  2. 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; 
    }
  3. 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:\Users\Adam\CustomStyles.css
    Bu makalenin işaretlemesi, Equinusocio'nun Malzeme temasını kullanarak VSCode'da açılır.
  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.