HTML'de çok sayıda etiket eklemeliyiz ve biçimlendirme için HTML'ye stil de eklenir. Markdown'ı kullanarak da yapabileceğimiz aynı görevleri HTML'de de yapabiliriz. Sadece bazı komutları kullanarak Markdown dosyasını kolayca HTML dosyasına dönüştürebiliriz. Markdown'ın HTML'ye nasıl dönüştürüleceğini burada açıklayacağız. Ayrıca Markdown'ı HTML'ye dönüştüreceğiz ve bu kılavuzda bu kavramın ayrıntılı bir açıklamasını sağlayacağız. Şimdi Markdown dosyasını HTML dosyasına dönüştürüyoruz. Ayrıca, Markdown dosyasını Visual Studio Code'da HTML dosyasına dönüştürmek için izlememiz gereken her adımı gösterip açıklayacağız.
Örnek 1:
Burada Visual Studio Code kullanıyoruz. Visual Studio Code'da Markdown dosyasını HTML dosyasına nasıl dönüştürdüğümüzü gösteriyoruz. Bunun için bu Visual Studio Kodunda oluşturulmuş Markdown dosyasına sahip olmamız gerekir. Burada oluşturduğumuz dosyanın adı “myabcfile.md”. Bu dosyada “#” etiketini kullanarak başlığı ekliyoruz. Daha sonra bu başlığın altına basit bir metin veya paragraf olan bir metin ekliyoruz. Şimdi, bu satırın başına iki, sonuna iki yıldız eklediğimiz için kalın olan başka bir satır daha ekledik. Yani, bu çizgi burada kalın görünüyor. Bundan sonra “liste” kelimesini italik hale getiriyoruz. Bu kelimeyi iki alt çizgi kullanarak italik yaparız. Sözcüğün başına bir alt çizgi, sonuna bir alt çizgi eklenir. Aşağıdaki çizimde, numarayı yerleştirerek ve sayıdan sonra nokta koyarak sıralı listeyi oluşturuyoruz. Şimdi bu dosyayı kaydediyoruz. Önizleme penceresinde bu dosyanın nasıl göründüğünü de göstereceğiz.
Önizleme penceresinde Markdown kodunun çıktısını gösteriyoruz. Şimdi, bu Markdown'ı HTML'ye dönüştürüyoruz. Devam edin ve bu Markdown dosyasının bir HTML dosyasına nasıl dönüştürüleceğine ilişkin aşağıdaki çizime bakın:
Bu Visual Studio Kodunun en üstünde bulunan görev çubuğundaki terminale tıklayarak terminali açın. Bu terminal açıldığında, aşağıda da gösterilen “code –install-extension yzhang.markdown-all-in-one” komutunu yazın. Bu komutu Visual Studio Code'un terminaline yazdıktan sonra “Enter” tuşuna basıyoruz. Bu komutu başarıyla derledikten sonra ilerliyoruz. Bu komut, burada belirtilen bu uzantının yüklenmesine yardımcı olur.
Bir önceki eklenti başarıyla kurulduğunda bu Visual Studio Code içerisinde “Command Palette”i açıyoruz. Bu komut paleti, basitçe “CTRL+SHIFT+P” tuşlarına basılarak açılır. Bundan sonra, bu Visual Studio Code uygulamasının en üstünde açılır menü açılır. Burada sadece “Markdown” yazıyoruz ve orada birçok komut beliriyor. Aşağıdaki resimde görüldüğü gibi “Markdown All in One: Print Current Document to HTML” seçeneğini seçiyoruz. Burada “CTRL+SHIFT+P” tuşlarına bastıktan sonra bu komutu seçiyoruz. Şimdi bu Markdown dosyası, burada seçtiğimiz bu komut yardımıyla HTML dosyasına dönüştürülür.
Her iki dosya da burada gösterilir. Bu “myabcfile.md” dosyasını “myabcfile.html” dosyasına dönüştürüyoruz. Markdown ve HTML dosyası aşağıdaki resimde gösterilmektedir. Bu HTML dosyası, Markdown dosyasına eklediğimiz tüm verileri içerir. Ancak tek fark, HTML dosyasının içinde farklı etiketler ve stiller içermesi, ancak Markdown dosyasının çok fazla etiket içermemesidir.
HTML dosyası da aşağıdaki resimde gösterilmektedir. Bu dosyada “,
,