Jika Anda menulis untuk web, Anda mungkin ingin melihat penurunan harga. Ada banyak aplikasi penurunan harga yang melayani penulis web. Tetapi editor kode gratis seperti Microsoft Visual Studio Code (VSCode) bisa menjadi lebih kuat.

VSCode memahami penurunan harga dan memiliki alat bawaan untuk mempratinjaunya dalam HTML. Namun, Anda dapat menambahkan fungsionalitas pengolah kata seperti jumlah kata dan pemeriksa ejaan. Anda mungkin juga ingin mengaktifkan penyesuaian khusus situs web untuk pratinjau.

Terakhir, kemampuan untuk menyalin penurunan harga sebagai HTML sehingga Anda dapat menempelkannya dengan rapi ke dalam Sistem Manajemen Konten (CMS) adalah suatu keharusan.

Unduh dan Instal VSCode

Untuk memulai, unduh VSCode atau VSCodium alternatif open source-nya. Versi masing-masing tersedia untuk semua sistem operasi desktop utama.

Setelah Anda unduh dan instal VSCode, jalankan aplikasi untuk memulai.

Instal Ekstensi Jumlah Kata

Mulailah dengan menambahkan penghitung kata. Ada banyak ekstensi yang tersedia yang menangani ini. Salah satu yang paling membedakan antara kata dan kode atau nama file yang sebenarnya adalah ekstensi Penghitung Kata Microsoft sendiri.

instagram viewer

Unduh:Jumlah kata Ekstensi VSCode (Gratis)

  1. Klik Unduh Ekstensi dibawah Sumber daya di panel kanan bawah.
  2. Setelah diunduh, alihkan ke VSCode.
  3. Klik pada ikon roda gigi di sudut kiri bawah antarmuka.
  4. Klik Ekstensi.
  5. Klik elipsis (...) di dekat bagian atas panel Ekstensi.
  6. Klik Instal dari VSIX.
  7. Memilih ms-vscode.wordcount-*.vsix file yang baru saja Anda unduh.

Itu Jumlah kata ekstensi sekarang harus diinstal. Uji dengan membuka file penurunan harga baru dan mengetik. Anda sekarang akan melihat penghitung kata di sisi kiri bawah antarmuka:

Instal Ekstensi Periksa Ejaan

Anda juga ingin menambahkan fungsionalitas pemeriksa ejaan. Seperti halnya penghitung kata, ada banyak ekstensi yang menangani pemeriksaan ejaan. Yang paling populer adalah Periksa Ejaan Kode oleh Street Side Software karena tersedia dalam banyak bahasa.

Unduh:Periksa Ejaan Kode Ekstensi VSCode (Gratis)

  1. Ikuti langkah 1 sampai 6 dari bagian di atas.
  2. Memilih streetsidesoftware.code-spell-checker-*.vsix file yang baru saja Anda unduh.

Itu Periksa Ejaan Kode ekstensi sekarang harus diinstal. Uji dengan membuka file penurunan harga baru dan mengetik kata-kata yang salah eja.

Anda akan melihat garis berlekuk-lekuk biru di bawah kata-kata itu bersama dengan jumlah kesalahan di sisi kanan bawah antarmuka:

Sesuaikan Coretan Kesalahan

Masalah terbesar dengan ekstensi Pemeriksaan Ejaan ini adalah warna biru lemah yang digunakan untuk coretan yang mengidentifikasi kesalahan. Itu cenderung menyatu dengan latar belakang tema gelap dan digunakan kembali untuk elemen penurunan harga lainnya.

Anda dapat mencoba mengubahnya menjadi warna merah tebal seperti yang Anda harapkan di pengolah kata:

  1. Klik pada ikon roda gigi di sudut kiri bawah antarmuka.
  2. Klik Pengaturan.
  3. Klik meja kerja, kemudian Penampilan.
  4. Gulir ke bawah ke Kustomisasi Warna:
  5. Klik Edit di settings.json.
  6. Rekatkan kode berikut ke editor yang terbuka di tab baru:
    "editorInfo.foreground": "#ff0000"
  7. Tutup dan simpan file.

Sekarang jika Anda salah mengeja kata, VSCode akan menghiasinya dengan coretan merah cerah:

Mengabaikan Positif Palsu

Pemeriksa ejaan mungkin tidak mengenali istilah khusus industri tertentu atau kata benda yang tepat seperti nama perusahaan. Pada tangkapan layar di atas, misalnya, VSCode menyoroti singkatan "distro" sebagai kesalahan ejaan.

Untuk berhenti melihat kata-kata ini sebagai kesalahan, Anda dapat menambahkannya ke Pengaturan pengguna.

  1. Klik kanan pada kata yang ingin Anda abaikan oleh pemeriksa ejaan.
  2. Arahkan kursor ke atas Ejaan dan pilih Tambahkan Kata ke Pengaturan Pengguna.

Mulai sekarang, pemeriksaan ejaan tidak akan lagi mengidentifikasi kata-kata ini sebagai salah:

Instal Salin Penurunan Harga sebagai Ekstensi HTML

Selanjutnya, instal ekstensi Copy Markdown as HTML sehingga Anda dapat menyalin & menempelkan Markdown yang diformat.

Unduh:Salin Penurunan Harga sebagai HTML Ekstensi VSCode (Gratis)

  1. Ikuti langkah 1 sampai 6 dari bagian di atas.
  2. Memilih jerriepelser.copy-markdown-as-html-1.1.0.vsix file yang baru saja Anda unduh.

Sekarang Anda seharusnya dapat menyalin Markdown dari VSCode dan menempelkannya ke CMS sebagai HTML bersih. Untuk menguji ini:

  1. Pilih beberapa teks Penurunan harga.
  2. Buka Palet Perintah dalam Melihat menu, atau dengan menekan CTRL+Shift+P.
  3. Memilih Penurunan harga: Salin sebagai HTML:
  4. Tempelkan Markdown yang disalin ke file HTML baru.

Anda akan melihat bahwa penurunan harga yang disalin telah ditempelkan dengan benar sebagai HTML:

Menyesuaikan Panel Pratinjau

Secara default, panel pratinjau akan memiliki gaya yang sama dengan tema VSCode saat ini.

Namun, Anda mungkin ingin pratinjau lebih mencerminkan tujuan akhir konten Anda. Anda dapat menyesuaikan panel pratinjau untuk membuat penurunan harga Anda terlihat seperti sudah ada di situs web yang Anda publikasikan.

Anda dapat menggunakan situs web apa pun yang Anda inginkan; gaya berikut diambil dari MUO. Hanya gunakan alat elemen inspeksi browser Anda untuk menemukan font dan pilih warna dari situs web mana pun.

  1. Buat file baru dan beri nama seperti "CustomStyles.css"
  2. Tempelkan contoh kode CSS berikut ke dalam file:
    tubuh {
     warna latar belakang: #ff;
     warna: #2c2c2c;
     font-family: Roboto;
     ukuran font: 18px;
     font-berat: 400;
    tinggi garis: 1.7em;
     lebar maks: 750 piksel;
    }
    h1 {
     ukuran font: 38px;
     font-berat: 800;
    }
    

    h2 {
     ukuran font: 34px;
     berat font: 700;
    }
    

    h3 {
     ukuran font: 24px;
     berat font: 700;
    }
    

    sebuah {
     perbatasan-bawah: 2px padat #bf0d0b;
     warna: #bf0d0b;
     berat font: 700;
    }
    

    sebuah: arahkan {
     warna: #ff;
     Latar Belakang: #bf0d0b;
    }
    kuat {
     font-berat: tebal;
    }
  3. Tutup dan simpan file.
  4. Klik pada ikon roda gigi di sudut kiri bawah antarmuka.
  5. Klik Pengaturan.
  6. Klik Ekstensi lalu Penurunan harga.
  7. Gulir ke bawah ke Penurunan harga: Gaya dan klik Tambahkan Barang.
  8. Masukkan jalur Anda CustomStyles.css berkas, misalnya:
    C:\Pengguna\Adam\Gaya Kustom.css
  9. Klik Oke.

Setelah Anda membuatnya, Anda akan mendapatkan panel pratinjau yang sangat mirip dengan artikel ini.

Sekali lagi, saya mendapatkan nilai-nilai ini dengan menggunakan alat Elemen Inspeksi browser saya di MUO, tetapi Anda ingin menemukan nilai untuk situs web tujuan Anda sendiri.

Tema Editor

Tema VSCode default hadir dalam gelap dan terang, dengan versi kontras tinggi masing-masing. Tapi seperti editor kode yang bagus, ada banyak sekali tema pihak ketiga yang hebat tersedia.

Jika Anda lebih suka tampilan Pengolah Kata daripada editor kode, saya merekomendasikan tema Office oleh huacat:

Jika Anda lebih suka editor kode, tema umum seperti Dracula, Gruvbox, Material (lihat tangkapan layar di bawah), dan Nord semuanya tersedia dari pasar ekstensi.

Untuk menginstal tema baru:

  1. Klik pada ikon roda gigi di sudut kiri bawah antarmuka.
  2. Klik Ekstensi.
  3. Cari salah satu tema yang disebutkan di atas atau cukup filter kategori untuk tema dan menelusuri apa yang tersedia.

Apakah VSCode Editor Penurunan Harga Tertinggi?

Jadi, apakah VSCode adalah editor penurunan harga terbaik untuk konten web? Out-of-the-box, mungkin tidak. Tapi itu bisa diperluas seperti apa pun.

Penghitung kata, pemeriksa ejaan, Salin Markdown sebagai HTML, penyesuaian pratinjau, dan tema hanya menggores permukaan. Ada ekosistem yang penuh dengan ekstensi yang tersedia untuk VSCode, dan Anda bebas membuatnya sendiri.