Εάν γράφετε για τον Ιστό, ίσως θελήσετε να εξετάσετε το Markdown. Υπάρχουν πολλές εφαρμογές Markdown που απευθύνονται σε συγγραφείς ιστού. Αλλά οι δωρεάν επεξεργαστές κώδικα όπως ο κώδικας Visual Studio της Microsoft (VSCode) μπορεί να είναι ακόμα πιο ισχυροί.

Το VSCode κατανοεί το Markdown και έχει ενσωματωμένα εργαλεία για την προεπισκόπηση του σε HTML. Ωστόσο, μπορείτε να προσθέσετε λειτουργίες επεξεργασίας κειμένου, όπως μέτρηση λέξεων και ορθογραφικό έλεγχο. Μπορεί επίσης να θέλετε να ενεργοποιήσετε προσαρμογές για συγκεκριμένο ιστότοπο για το πρόγραμμα προεπισκόπησης.

Τέλος, η δυνατότητα αντιγραφής του Markdown ως HTML, ώστε να μπορείτε να το επικολλήσετε καθαρά σε ένα Σύστημα Διαχείρισης Περιεχομένου (CMS) είναι απαραίτητη.

Λήψη και εγκατάσταση VSCode

Για να ξεκινήσετε, κατεβάστε είτε το VSCode είτε το εναλλακτικό VSCodium ανοιχτού κώδικα. Οι εκδόσεις του καθενός είναι διαθέσιμες για όλα τα μεγάλα λειτουργικά συστήματα επιτραπέζιου υπολογιστή.

Μόλις το έχετε κατέβασε και εγκαταστάθηκε το VSCode, εκτελέστε την εφαρμογή για να ξεκινήσετε.

instagram viewer

Εγκαταστήστε την επέκταση καταμέτρησης λέξεων

Ξεκινήστε προσθέτοντας έναν μετρητή λέξεων. Υπάρχουν πολλές διαθέσιμες επεκτάσεις που το χειρίζονται αυτό. Αυτό που διαφοροποιεί καλύτερα μεταξύ πραγματικών λέξεων και κωδικών ή ονομάτων αρχείων είναι η επέκταση Word Counter της Microsoft.

Κατεβάστε:Καταμέτρηση λέξεων Επέκταση VSCode (Δωρεάν)

  1. Κάντε κλικ στο Λήψη επέκτασης υπό Πόροι στο κάτω δεξί παράθυρο.
  2. Μετά τη λήψη, μεταβείτε στο VSCode.
  3. Κάνε κλικ στο εικονίδιο με το γρανάζι στην κάτω αριστερή γωνία της διεπαφής.
  4. Κάντε κλικ στο Επεκτάσεις.
  5. Κάντε κλικ στην έλλειψη (...) κοντά στην κορυφή του παραθύρου Επεκτάσεις.
  6. Κάντε κλικ Εγκατάσταση από το VSIX.
  7. Επιλέξτε το ms-vscode.wordcount-*.vsix αρχείο που μόλις κατεβάσατε.

ο Καταμέτρηση λέξεων θα πρέπει τώρα να εγκατασταθεί η επέκταση. Δοκιμάστε το ανοίγοντας ένα νέο αρχείο Markdown και πληκτρολογώντας. Θα πρέπει τώρα να δείτε έναν μετρητή λέξεων στην κάτω αριστερή πλευρά της διεπαφής:

Εγκαταστήστε την επέκταση ορθογραφικού ελέγχου

Θα θελήσετε επίσης να προσθέσετε τη λειτουργία ορθογραφικού ελέγχου. Όπως και με τους μετρητές λέξεων, υπάρχουν πολλές επεκτάσεις που χειρίζονται τον ορθογραφικό έλεγχο. Το πιο δημοφιλές είναι Ορθογραφικός έλεγχος κώδικα από το Street Side Software, καθώς είναι διαθέσιμο σε πολλές γλώσσες.

Κατεβάστε:Ορθογραφικός έλεγχος κώδικα Επέκταση VSCode (Δωρεάν)

  1. Ακολουθήστε τα βήματα 1 έως 6 από την παραπάνω ενότητα.
  2. Επιλέξτε το streetsidesoftware.code-spell-checker-*.vsix αρχείο που μόλις κατεβάσατε.

ο Ορθογραφικός έλεγχος κώδικα θα πρέπει τώρα να εγκατασταθεί η επέκταση. Δοκιμάστε το ανοίγοντας ένα νέο αρχείο Markdown και πληκτρολογώντας λέξεις με ορθογραφικά λάθη.

Θα πρέπει να δείτε μια μπλε σαθρή γραμμή κάτω από αυτές τις λέξεις μαζί με έναν αριθμό σφαλμάτων στην κάτω δεξιά πλευρά της διεπαφής:

Προσαρμόστε το Error Squiggle

Το μεγαλύτερο πρόβλημα με αυτήν την επέκταση ορθογραφικού ελέγχου είναι το αδύναμο μπλε χρώμα που χρησιμοποιείται για το squiggle που εντοπίζει σφάλματα. Τείνει να αναμειγνύεται στο φόντο των σκοτεινών θεμάτων και επαναχρησιμοποιείται για άλλα στοιχεία Markdown.

Μπορείτε να δοκιμάσετε να το αλλάξετε σε ένα έντονο κόκκινο χρώμα όπως θα περιμένατε να δείτε σε έναν επεξεργαστή κειμένου:

  1. Κάνε κλικ στο εικονίδιο με το γρανάζι στην κάτω αριστερή γωνία της διεπαφής.
  2. Κάντε κλικ στο Ρυθμίσεις.
  3. Κάντε κλικ στο Πάγκος εργασίας, έπειτα Εμφάνιση.
  4. Κάντε κύλιση προς τα κάτω στο Προσαρμογή χρώματος:
  5. Κάντε κλικ Επεξεργασία στο settings.json.
  6. Επικολλήστε τον ακόλουθο κώδικα στο πρόγραμμα επεξεργασίας που ανοίγει σε μια νέα καρτέλα:
    "editorInfo.foreground": "#ff0000"
  7. Κλείστε και αποθηκεύστε το αρχείο.

Τώρα, αν γράψετε λάθος μια λέξη, το VSCode θα τη διακοσμήσει με ένα έντονο κόκκινο squiggle:

Αγνοώντας τα ψευδώς θετικά

Ο ορθογραφικός έλεγχος ενδέχεται να μην αναγνωρίζει συγκεκριμένους όρους του κλάδου ή ειδικά ουσιαστικά, όπως ονόματα εταιρειών. Στο παραπάνω στιγμιότυπο οθόνης, για παράδειγμα, το VSCode επισημαίνει τη συντομογραφία "distro" ως ορθογραφικό λάθος.

Για να σταματήσετε να βλέπετε αυτές τις λέξεις ως σφάλματα, θα πρέπει να τις προσθέσετε στη δική σας Ρυθμίσεις χρήστη.

  1. Κάντε δεξί κλικ στη λέξη που θέλετε να αγνοήσει ο ορθογραφικός έλεγχος.
  2. Αιωρούνται πάνω Ορθογραφία και επιλέξτε Προσθήκη λέξεων στις ρυθμίσεις χρήστη.

Από εδώ και στο εξής, ο ορθογραφικός έλεγχος δεν θα αναγνωρίζει πλέον αυτές τις λέξεις ως εσφαλμένες:

Εγκαταστήστε το Copy Markdown ως επέκταση HTML

Στη συνέχεια, εγκαταστήστε την επέκταση Copy Markdown ως HTML, ώστε να μπορείτε να αντιγράψετε και να επικολλήσετε τη μορφοποιημένη Markdown.

Κατεβάστε:Αντιγράψτε το Markdown ως HTML Επέκταση VSCode (Δωρεάν)

  1. Ακολουθήστε τα βήματα 1 έως 6 από τις παραπάνω ενότητες.
  2. Επιλέξτε το jerriepelser.copy-markdown-as-html-1.1.0.vsix αρχείο που μόλις κατεβάσατε.

Τώρα θα πρέπει να μπορείτε να αντιγράψετε το Markdown από το VSCode και να το επικολλήσετε σε ένα CMS ως καθαρό HTML. Για να το δοκιμάσετε:

  1. Επιλέξτε κάποιο κείμενο Markdown.
  2. Ανοιξε το Παλέτα εντολών στο Θέα μενού ή πατώντας CTRL+Shift+P.
  3. Επιλέγω Markdown: Αντιγραφή ως HTML:
  4. Επικολλήστε το αντιγραμμένο Markdown σε ένα νέο αρχείο HTML.

Θα πρέπει να δείτε ότι το αντιγραμμένο Markdown επικολλήθηκε σωστά ως HTML:

Προσαρμογή του παραθύρου προεπισκόπησης

Από προεπιλογή, το παράθυρο προεπισκόπησης θα έχει το ίδιο στυλ με το τρέχον θέμα VSCode.

Ωστόσο, μπορεί να θέλετε οι προεπισκοπήσεις να αντικατοπτρίζουν πιο στενά τον τελικό προορισμό του περιεχομένου σας. Μπορείτε να προσαρμόσετε το παράθυρο προεπισκόπησης για να κάνετε το Markdown σας να μοιάζει σαν να βρίσκεται ήδη στον ιστότοπο στον οποίο δημοσιεύετε.

Μπορείτε να χρησιμοποιήσετε οποιονδήποτε ιστότοπο θέλετε. τα ακόλουθα στυλ ελήφθησαν από το MUO. Μόλις χρησιμοποιήστε το εργαλείο επιθεώρησης στοιχείων του προγράμματος περιήγησής σας για να βρείτε γραμματοσειρές και επιλέξτε χρώματα από οποιονδήποτε ιστότοπο.

  1. Δημιουργήστε ένα νέο αρχείο και ονομάστε το κάπως σαν "CustomStyles.css"
  2. Επικολλήστε το ακόλουθο παράδειγμα κώδικα CSS στο αρχείο:
    σώμα {
     χρώμα του φόντου: #fff;
     χρώμα: #2c2c2c;
     γραμματοσειρά-οικογένεια: Roboto;
     μέγεθος γραμματοσειράς: 18 px;
     βάρος γραμματοσειράς: 400;
    ύψος γραμμής: 1.7 εκ;
     μέγιστο πλάτος: 750 px;
    }
    h1 {
     μέγεθος γραμματοσειράς: 38 px;
     βάρος γραμματοσειράς: 800;
    }
    

    h2 {
     μέγεθος γραμματοσειράς: 34 px;
     βάρος γραμματοσειράς: 700;
    }
    

    h3 {
     μέγεθος γραμματοσειράς: 24 px;
     βάρος γραμματοσειράς: 700;
    }
    

    ένα {
     σύνορο-κάτω: 2px στερεό #bf0d0b;
     χρώμα: #bf0d0b;
     βάρος γραμματοσειράς: 700;
    }
    

    ένα:φτερουγίζω {
     χρώμα: #fff;
     Ιστορικό: #bf0d0b;
    }
    δυνατό {
     βάρος γραμματοσειράς: έντονη;
    }
  3. Κλείστε και αποθηκεύστε το αρχείο.
  4. Κάνε κλικ στο εικονίδιο με το γρανάζι στην κάτω αριστερή γωνία της διεπαφής.
  5. Κάντε κλικ στο Ρυθμίσεις.
  6. Κάντε κλικ στο Επεκτάσεις και μετά Χαμήλωση τιμής.
  7. Κάντε κύλιση προς τα κάτω στο Markdown: Στυλ και κάντε κλικ Πρόσθεσε είδος.
  8. Εισαγάγετε τη διαδρομή σας CustomStyles.css αρχείο, για παράδειγμα:
    ντο:\Χρήστες\Αδάμ\CustomStyles.css
  9. Κάντε κλικ Εντάξει.

Αφού τα φτιάξετε, θα πρέπει να καταλήξετε σε ένα παράθυρο προεπισκόπησης που μοιάζει πολύ με αυτό το άρθρο.

Και πάλι, έλαβα αυτές τις τιμές χρησιμοποιώντας το εργαλείο Inspect Element του προγράμματος περιήγησής μου στο MUO, αλλά θα θέλετε να βρείτε τις τιμές για τον δικό σας ιστότοπο προορισμού.

Θέματα συντάκτη

Το προεπιλεγμένο θέμα VSCode διατίθεται τόσο σε σκούρο όσο και σε ανοιχτόχρωμο, με εκδόσεις υψηλής αντίθεσης του καθενός. Αλλά όπως κάθε καλός επεξεργαστής κώδικα, υπάρχουν ένας τόνος από υπέροχα θέματα τρίτων διαθέσιμα.

Εάν προτιμάτε την εμφάνιση ενός επεξεργαστή κειμένου από εκείνη ενός επεξεργαστή κώδικα, προτείνω το θέμα του Office από την huacat:

Εάν προτιμάτε ένα πρόγραμμα επεξεργασίας κώδικα, κοινά θέματα όπως Dracula, Gruvbox, Material (δείτε στιγμιότυπο οθόνης παρακάτω) και Nord είναι όλα διαθέσιμα από την αγορά επεκτάσεων.

Για να εγκαταστήσετε ένα νέο θέμα:

  1. Κάνε κλικ στο εικονίδιο με το γρανάζι στην κάτω αριστερή γωνία της διεπαφής.
  2. Κάντε κλικ στο Επεκτάσεις.
  3. Αναζητήστε οποιοδήποτε από τα προαναφερθέντα θέματα ή απλώς φιλτράρετε την κατηγορία σε θέματα και περιηγηθείτε σε ό, τι είναι διαθέσιμο.

Είναι το VSCode το απόλυτο πρόγραμμα επεξεργασίας Markdown;

Λοιπόν, είναι το VSCode το απόλυτο πρόγραμμα επεξεργασίας Markdown για περιεχόμενο ιστού; Έξω από το κουτί, μάλλον όχι. Αλλά είναι περίπου όσο επεκτάσιμο θα μπορούσε να είναι.

Οι μετρητές λέξεων, οι ορθογραφικοί έλεγχοι, η αντιγραφή επισήμανσης ως HTML, οι προσαρμογές προεπισκόπησης και τα θέματα απλώς χαράζουν την επιφάνεια. Υπάρχει ένα οικοσύστημα γεμάτο επεκτάσεις διαθέσιμο για το VSCode και μπορείτε να το κάνετε δικό σας.