Как да превърнете VSCode в Ultimate Markdown Editor

Как да превърнете VSCode в Ultimate Markdown Editor

Ако пишете за мрежата, може да искате да разгледате Markdown. Има много приложения на Markdown, които обслужват уеб писателите. Но безплатните редактори на код като Visual Studio Code (VSCode) на Microsoft могат да бъдат още по-мощни.





отпечатване на списък с файлове в папка и подпапки windows 10

VSCode разбира Markdown и има вградени инструменти за предварителен преглед в HTML. Въпреки това можете да добавите функционалност на текстообработващата програма, като броене на думи и проверка на правописа. Може също да искате да активирате специфични за уебсайта персонализации за визуализатора.



MAKEUSEOF ВИДЕО НА ДЕНЯ

И накрая, възможността за копиране на Markdown като HTML, така че да можете чисто да го поставите в система за управление на съдържанието (CMS), е задължителна.





Изтеглете и инсталирайте VSCode

За да започнете, изтеглете VSCode или неговата алтернатива с отворен код VSCodium. Версиите на всеки са налични за всички основни настолни операционни системи.

След като сте изтеглил и инсталирал VSCode , стартирайте приложението, за да започнете.



Поздравителният екран по подразбиране на VSCode.

Инсталирайте разширението за броене на думи

Започнете с добавяне на брояч на думи. Има много налични разширения, които се справят с това. Този, който най-добре прави разлика между действителните думи и кода или имената на файловете, е собственото разширение Word Counter на Microsoft.

Изтегли: Брой думи Разширение VSCode (безплатно)



  1. Кликнете върху Изтегляне на разширение под Ресурси в долния десен прозорец.
  2. След като го изтеглите, превключете към VSCode.
  3. Кликнете върху икона на зъбно колело в долния ляв ъгъл на интерфейса.
  4. Кликнете върху Разширения .
  5. Щракнете върху многоточие ( ... ) близо до горната част на прозореца с разширения.
  6. Кликнете Инсталирайте от VSIX . ​​​​​​VSCode с разширението за броене на думи от Microsoft, показано откриване на броя на думите в примерен документ.
  7. Избери ms-vscode.wordcount-*.vsix файл, който току-що сте изтеглили.

The Брой думи разширението вече трябва да бъде инсталирано. Тествайте го, като отворите нов Markdown файл и напишете. Сега трябва да видите брояч на думи в долната лява страна на интерфейса:

​​​​​​​Документ за маркиране, отворен във VSCode с правописни грешки, открити от меко синьо криволичещо подчертаване.

Инсталирайте разширение за проверка на правописа

Също така ще искате да добавите функция за проверка на правописа. Както при броячите на думи, има много разширения, които се справят с проверката на правописа. Най-популярният е Проверка на правописа на кода от Street Side Software, тъй като се предлага на много езици.



Изтегли: Проверка на правописа на кода Разширение VSCode (безплатно)

  1. Следвайте стъпки от 1 до 6 от раздела по-горе.
  2. Избери streetsidesoftware.code-spell-checker-*.vsix файл, който току-що сте изтеглили.

The Проверка на правописа на кода разширението вече трябва да бъде инсталирано. Тествайте го, като отворите нов Markdown файл и напишете неправилно изписани думи.

​​​​​​Долната дясна страна на лентата на състоянието на VSCode с индикатор, показващ четири правописни грешки.

Трябва да видите синя криволичеща линия под тези думи заедно с броя на грешките в долната дясна страна на интерфейса:

Файлът VSCode settings.json се отваря с добавен персонализиран код.

Персонализирайте грешката Squiggle

Най-големият проблем с това разширение за проверка на правописа е слабият син цвят, използван за извивката, която идентифицира грешки. Има тенденция да се слива с фона на тъмните теми и се използва повторно за други елементи на Markdown.

Можете да опитате да го промените на удебелен червен цвят, какъвто бихте очаквали да видите в текстообработваща програма:

  1. Кликнете върху икона на зъбно колело в долния ляв ъгъл на интерфейса.
  2. Кликнете върху Настройки .
  3. Кликнете върху работна маса , тогава Външен вид .
  4. Превъртете надолу до Персонализиране на цветовете : Документ за маркиране, отворен във VSCode с груби правописни грешки, открити от силно червено криволичещо подчертаване.
  5. Кликнете Редактирайте в settings.json .
  6. Поставете следния код в редактора, който се отваря в нов раздел: 
    "editorInfo.foreground": "#ff0000"
    Документ за маркиране, отворен във VSCode с три правописни грешки.
  7. и запазете файла.

Сега, ако грешите в правописа на дума, VSCode ще я украси с ярко червено извивка:

защо хромът продължава да се изключва
Правилно форматиран HTML документ, отворен във VSCode.

Игнориране на фалшиви положителни резултати

Проверката на правописа може да не разпознае определени специфични за индустрията термини или собствени съществителни като имена на компании. В екранната снимка по-горе, например, VSCode подчертава съкращението „distro“ като правописна грешка.

За да спрете да виждате тези думи като грешки, трябва да ги добавите към вашия Потребителски настройки .

  1. Щракнете с десния бутон върху думата, която искате програмата за проверка на правописа да игнорира.
  2. Задръжте курсора на мишката Правопис и изберете Добавете думи към потребителските настройки . ​​​​​​​Тази статия като маркдаун файл се отваря във VSCode с програмата за преглед по подразбиране.

Отсега нататък проверката на правописа вече няма да идентифицира тези думи като неправилни:

​​​​​​​Настройки на VSCode > Разширения > Markdown > Markdown: меню Стилове.

Инсталирайте 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. Кликнете върху Разширения и тогава Markdown .
  7. Превъртете надолу до Markdown: Стилове и щракнете Добавете артикул .
  8. Влезте в пътя на вашия CustomStyles.css файл, например: 
    C:\Users\Adam\CustomStyles.css
    Отбелязването на тази статия се отваря във VSCode, като се използва темата Material от Equinusocio.
  9. Кликнете Добре .

След като ги направите, трябва да получите панел за визуализация, който много прилича на тази статия.

Отново получих тези стойности, като използвах инструмента Inspect Element на моя браузър на MUO, но вие ще искате да намерите стойностите за вашия собствен целеви уебсайт.

Теми за редактор

Темата на VSCode по подразбиране се предлага както в тъмно, така и в светло, с висококонтрастни версии на всяка. Но като всеки добър редактор на код, има много страхотни налични теми на трети страни .

Ако предпочитате външния вид на текстов процесор пред този на редактор на код, препоръчвам темата на Office от huacat:

Ако предпочитате редактор на кодове, общи теми като Dracula, Gruvbox, Material (вижте екранната снимка по-долу) и Nord са достъпни от пазара за разширения.

windows 10 не се свързва с wifi

За да инсталирате нова тема:

  1. Кликнете върху икона на зъбно колело в долния ляв ъгъл на интерфейса.
  2. Кликнете върху Разширения .
  3. Потърсете някоя от гореспоменатите теми или просто филтрирайте категорията към теми и прегледайте какво е налично.

Дали VSCode е Ultimate Markdown Editor?

И така, VSCode най-добрият редактор на Markdown за уеб съдържание ли е? Извън кутията, вероятно не. Но това е толкова разширимо, колкото всичко може да бъде.

Броячи на думи, проверки на правописа, Copy Markdown като HTML, персонализации за предварителен преглед и теми просто надраскват повърхността. Има екосистема, пълна с разширения, налични за VSCode, и вие сте свободни да го направите свой собствен.