Πώς να μετατρέψετε το VSCode στον τελικό επεξεργαστή Markdown

Πώς να μετατρέψετε το VSCode στον τελικό επεξεργαστή Markdown

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





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



ΚΑΤΑΣΚΕΥΗ ΒΙΝΤΕΟ ΤΗΣ ΗΜΕΡΑΣ

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





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

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

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



Η προεπιλεγμένη οθόνη καλωσορίσματος VSCode.

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

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

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



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

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

​​​Ένα έγγραφο σήμανσης ανοιχτό σε VSCode με ορθογραφικά λάθη που εντοπίζονται από μια απαλή μπλε υπογράμμιση.

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

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



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

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

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

​​​​Η κάτω δεξιά πλευρά της γραμμής κατάστασης VSCode με μια ένδειξη που δείχνει τέσσερα ορθογραφικά λάθη.

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

Το αρχείο VSCode settings.json ανοίγει με προσθήκη προσαρμοσμένου κώδικα.

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

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

πορτοκαλί κουκκίδα στο πάνω μέρος του iPhone

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

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

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

Ένα σωστά μορφοποιημένο έγγραφο HTML ανοίγει σε VSCode.

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

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

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

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

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

Το μενού VSCode Settings > Extensions > Markdown > Markdown: Styles.

Εγκαταστήστε το 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 : Αυτό το άρθρο ως αρχείο σήμανσης ανοίγει σε VSCode με την προεπισκόπηση προσαρμοσμένη ώστε να μοιάζει με MUO.
  4. Επικολλήστε το αντιγραμμένο Markdown σε ένα νέο αρχείο HTML.

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

Η οθόνη καλωσορίσματος VSCode στο ανοιχτό θέμα.

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

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

Η σήμανση αυτού του άρθρου ανοίγει σε VSCode χρησιμοποιώντας το θέμα του Office από την huacat.

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

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

  1. Δημιουργήστε ένα νέο αρχείο και ονομάστε το κάπως σαν ' CustomStyles.css '
  2. Επικολλήστε το ακόλουθο παράδειγμα κώδικα CSS στο αρχείο:
    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. και αποθηκεύστε το αρχείο.
  4. Κάνε κλικ στο εικονίδιο με το γρανάζι στην κάτω αριστερή γωνία της διεπαφής.
  5. Κάντε κλικ στο Ρυθμίσεις .
  6. Κάντε κλικ στο Επεκτάσεις και μετά Χαμήλωση τιμής .
  7. Κάντε κύλιση προς τα κάτω στο Markdown: Στυλ και κάντε κλικ Πρόσθεσε είδος .
  8. Εισαγάγετε τη διαδρομή σας CustomStyles.css αρχείο, για παράδειγμα:
    C:\Users\Adam\CustomStyles.css
    Η σήμανση αυτού του άρθρου ανοίγει σε VSCode χρησιμοποιώντας το θέμα Υλικό από την Equinusocio.
  9. Κάντε κλικ Εντάξει .

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

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

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

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

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

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

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

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

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

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

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