Kā pārvērst VSCode par galīgo atzīmes redaktoru

Kā pārvērst VSCode par galīgo atzīmes redaktoru

Ja rakstāt tīmeklim, iespējams, vēlēsities izpētīt Markdown. Ir daudz Markdown lietotņu, kas paredzētas tīmekļa rakstniekiem. Taču bezmaksas koda redaktori, piemēram, Microsoft Visual Studio Code (VSCode), var būt vēl jaudīgāki.





VSCode saprot Markdown, un tajā ir iebūvēti rīki tā priekšskatīšanai HTML formātā. Tomēr varat pievienot tekstapstrādes funkcionalitāti, piemēram, vārdu skaitu un pareizrakstības pārbaudītāju. Varat arī iespējot vietnei raksturīgus priekšskatījuma pielāgojumus.





DIENAS VIDEO MAKEUSEOF

Visbeidzot, iespēja kopēt Markdown kā HTML, lai jūs varētu to tīri ielīmēt satura pārvaldības sistēmā (SPS), ir obligāta.





Lejupielādējiet un instalējiet VSCode

Lai sāktu, lejupielādējiet vai nu VSCode, vai tā atvērtā pirmkoda alternatīvu VSCodium. Katra versija ir pieejama visām lielākajām galddatoru operētājsistēmām.

Kad esat lejupielādēts un instalēts VSCode , palaidiet lietojumprogrammu, lai sāktu.



  VSCode noklusējuma sveiciena ekrāns.

Instalējiet vārdu skaita paplašinājumu

Sāciet, pievienojot vārdu skaitītāju. Ir pieejami daudzi paplašinājumi, kas to apstrādā. Tas, kas vislabāk atšķir faktiskos vārdus no koda vai failu nosaukumiem, ir Microsoft Word Counter paplašinājums.

Lejupielādēt: Vārdu skaits VSCode paplašinājums (bezmaksas)





  1. Klikšķiniet uz Lejupielādēt paplašinājumu zem Resursi apakšējā labajā rūtī.
  2. Pēc lejupielādes pārslēdzieties uz VSCode.
  3. Noklikšķiniet uz zobrata ikona saskarnes apakšējā kreisajā stūrī.
  4. Klikšķiniet uz Paplašinājumi .
  5. Noklikšķiniet uz elipses ( ... ) netālu no paplašinājumu rūts augšdaļas.
  6. Klikšķis Instalējiet no VSIX .   ​​​​VSCode ar Microsoft Word Count paplašinājumu, kas parāda vārdu skaitu dokumenta paraugā.
  7. Izvēlies ms-vscode.wordcount-*.vsix tikko lejupielādētais fails.

The Vārdu skaits tagad ir jāinstalē paplašinājums. Pārbaudiet to, atverot jaunu Markdown failu un ierakstot. Tagad interfeisa apakšējā kreisajā pusē vajadzētu redzēt vārdu skaitītāju:

  ​​​​VSCode ir atvērts atzīmes dokuments ar pareizrakstības kļūdām, kas konstatētas ar maigi zilu, viļņainu pasvītrojumu.

Instalējiet pareizrakstības pārbaudes paplašinājumu

Varat arī pievienot pareizrakstības pārbaudes funkcionalitāti. Tāpat kā ar vārdu skaitītājiem, ir daudz paplašinājumu, kas veic pareizrakstības pārbaudi. Populārākais ir Koda pareizrakstības pārbaude no Street Side Software, jo tas ir pieejams daudzās valodās.





Lejupielādēt: Koda pareizrakstības pārbaude VSCode paplašinājums (bezmaksas)

  1. Izpildiet 1. līdz 6. darbību no iepriekš minētās sadaļas.
  2. Izvēlies streetsidesoftware.code-spell-checker-*.vsix tikko lejupielādētais fails.

The Koda pareizrakstības pārbaude tagad ir jāinstalē paplašinājums. Pārbaudiet to, atverot jaunu Markdown failu un ierakstot nepareizi uzrakstītus vārdus.

  ​​​​VSCode statusa joslas apakšējā labajā pusē ar indikatoru, kas parāda četras pareizrakstības kļūdas.

Zem šiem vārdiem vajadzētu redzēt zilu viļņainu līniju, kā arī kļūdu skaitu saskarnes apakšējā labajā pusē:

  Tiek atvērts fails VSCode settings.json ar pievienotu pielāgotu kodu.

Pielāgojiet kļūdu izliekumu

Lielākā problēma ar šo pareizrakstības pārbaudes paplašinājumu ir vājā zilā krāsa, kas tiek izmantota kļūdas identificējošai svirai. Tam ir tendence saplūst ar tumšo tēmu fonu un tiek atkārtoti izmantots citiem Markdown elementiem.

Varat mēģināt mainīt to uz treknu sarkanu krāsu, kā to varētu redzēt tekstapstrādes programmā:

  1. Noklikšķiniet uz zobrata ikona saskarnes apakšējā kreisajā stūrī.
  2. Klikšķiniet uz Iestatījumi .
  3. Klikšķiniet uz Darba galds , tad Izskats .
  4. Ritiniet uz leju līdz Krāsu pielāgošana :   VSCode atvērts pazemināšanas dokuments ar acīmredzamām pareizrakstības kļūdām, kas konstatētas ar spēcīgu sarkanu, slīdīgu pasvītrojumu.
  5. Klikšķis Rediģējiet vietnē settings.json .
  6. Ielīmējiet šo kodu redaktorā, kas tiek atvērts jaunā cilnē:
    "editorInfo.foreground": "#ff0000"
      VSCode ir atvērts novērtējuma dokuments ar trim pareizrakstības kļūdām.
  7. un saglabājiet failu.

Tagad, ja jūs nepareizi uzrakstīsit vārdu, VSCode to izrotās ar spilgti sarkanu šķipsnu:

  Pareizi formatēts HTML dokuments tiek atvērts VSCode.

Ignorējot viltus pozitīvus rezultātus

Pareizrakstības pārbaudītājs var neatpazīt noteiktus nozarei raksturīgus terminus vai īpašvārdus, piemēram, uzņēmumu nosaukumus. Piemēram, iepriekš redzamajā ekrānuzņēmumā VSCode izceļ saīsinājumu “distro” kā pareizrakstības kļūdu.

Lai šie vārdi vairs netiktu uzskatīti par kļūdām, ieteicams tos pievienot savam Lietotāja iestatījumi .

  1. Ar peles labo pogu noklikšķiniet uz vārda, kuru vēlaties, lai pareizrakstības pārbaudītājs ignorētu.
  2. Virziet kursoru virs Pareizrakstība un atlasiet Pievienojiet vārdus lietotāja iestatījumiem .   Šis raksts kā atzīmes fails tiek atvērts programmā VSCode ar noklusējuma priekšskatītāju.

No šī brīža pareizrakstības pārbaude vairs neatzīs šos vārdus kā nepareizus:

  ​​​​​​Izvēlne VSCode iestatījumi > Paplašinājumi > Markdown > Markdown: Stili izvēlne.

Instalējiet Copy Markdown kā HTML paplašinājumu

Pēc tam instalējiet paplašinājumu Copy Markdown kā HTML, lai varētu kopēt un ielīmēt formatētu Markdown.

Lejupielādēt: Kopējiet Markdown kā HTML VSCode paplašinājums (bezmaksas)

  1. Izpildiet 1.–6. darbību no iepriekš minētajām sadaļām.
  2. Izvēlies jerriepelser.copy-markdown-as-html-1.1.0.vsix tikko lejupielādētais fails.

Tagad jums vajadzētu būt iespējai kopēt Markdown no VSCode un ielīmēt to CMS kā tīru HTML. Lai to pārbaudītu:

  1. Atlasiet kādu Markdown tekstu.
  2. Atveriet Komandu palete iekš Skatīt izvēlnē vai nospiežot CTRL+Shift+P .
  3. Izvēlieties Markdown: kopēt kā HTML :   Šis raksts kā atzīmes fails tiek atvērts programmā VSCode ar priekšskatītāju, kas ir pielāgots tā, lai tas izskatītos kā MUO.
  4. Ielīmējiet nokopēto Markdown jaunā HTML failā.

Jums vajadzētu redzēt, ka kopētais Markdown ir pareizi ielīmēts kā HTML:

ko darīt ar veco datoru
  VSCode sveiciena ekrāns gaišajā motīvā.

Priekšskatījuma rūts pielāgošana

Pēc noklusējuma priekšskatījuma rūts stils būs tāds pats kā pašreizējam VSCode motīvam.

  Šī raksta atzīme tiek atvērta VSCode, izmantojot huacat Office motīvu.

Tomēr, iespējams, vēlēsities priekšskatījumos precīzāk atspoguļot jūsu satura galamērķi. Varat pielāgot priekšskatījuma rūti, lai jūsu Markdown izskatītos tā, it kā tas jau būtu vietnē, kurā publicējat.

Jūs varat izmantot jebkuru vietni, kuru vēlaties; no MUO tika ņemti šādi stili. Vienkārši izmantojiet pārlūkprogrammas elementu pārbaudes rīku, lai atrastu fontus un izvēlieties krāsas no jebkuras vietnes .

  1. Izveidojiet jaunu failu un nosauciet to kā ' CustomStyles.css '
  2. Ielīmējiet šādu CSS koda piemēru failā:
    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. un saglabājiet failu.
  4. Noklikšķiniet uz zobrata ikona saskarnes apakšējā kreisajā stūrī.
  5. Klikšķiniet uz Iestatījumi .
  6. Klikšķiniet uz Paplašinājumi un tad Markdown .
  7. Ritiniet uz leju līdz Markdown: stili un noklikšķiniet Pievienot vienumu .
  8. Ievadiet savu ceļu CustomStyles.css fails, piemēram:
    C:\Users\Adam\CustomStyles.css
      Šī raksta atzīme tiek atvērta VSCode, izmantojot Equinusocio materiālu tēmu.
  9. Klikšķis labi .

Kad esat tos izveidojis, jums vajadzētu iegūt priekšskatījuma rūti, kas līdzinās šim rakstam.

Atkal es ieguvu šīs vērtības, izmantojot pārlūkprogrammas rīku Pārbaudīt elementu vietnē MUO, taču jūs vēlaties atrast vērtības savai galamērķa vietnei.

Redaktora motīvi

Noklusējuma VSCode motīvs ir pieejams gan tumšā, gan gaišā krāsā, un katrai no tām ir liela kontrasta versija. Bet, tāpat kā jebkurš labs koda redaktors, arī tādi ir pieejams daudz lielisku trešo pušu tēmu .

Ja vēlaties Word procesora izskatu, nevis koda redaktoru, es iesaku Office motīvu no huacat:

Ja vēlaties koda redaktoru, paplašinājumu tirgū ir pieejamas tādas izplatītas tēmas kā Dracula, Gruvbox, Material (skatiet ekrānuzņēmumu zemāk) un Nord.

Lai instalētu jaunu motīvu:

  1. Noklikšķiniet uz zobrata ikona saskarnes apakšējā kreisajā stūrī.
  2. Klikšķiniet uz Paplašinājumi .
  3. Meklējiet kādu no iepriekš minētajām tēmām vai vienkārši filtrējiet kategoriju tēmas un pārlūkojiet to, kas ir pieejams.

Vai VSCode ir Ultimate Markdown redaktors?

Tātad, vai VSCode ir labākais tīmekļa satura Markdown redaktors? Izgatavots, iespējams, nē. Bet tas ir tikpat paplašināms, cik tas varētu būt.

Vārdu skaitītāji, pareizrakstības pārbaudītāji, Markdown kā HTML kopēšana, priekšskatījuma pielāgojumi un motīvi vienkārši saskrāpē virsmu. Vietnei VSCode ir pieejama pilna ekosistēma ar paplašinājumiem, un jūs varat to izveidot par savu.