Jak zmienić VSCode w ostateczny edytor Markdown

Jak zmienić VSCode w ostateczny edytor Markdown

Jeśli piszesz dla sieci, możesz zajrzeć do Markdown. Istnieje wiele aplikacji Markdown przeznaczonych dla twórców stron internetowych. Ale bezpłatne edytory kodu, takie jak Visual Studio Code (VSCode) firmy Microsoft, mogą być jeszcze potężniejsze.





VSCode rozumie Markdown i ma wbudowane narzędzia do podglądu go w HTML. Możesz jednak dodać funkcje edytora tekstu, takie jak licznik słów i sprawdzanie pisowni. Możesz także włączyć dostosowania specyficzne dla witryny dla przeglądarki.



MAKEUSEOF WIDEO DNIA

Wreszcie, możliwość skopiowania Markdowna jako HTML, aby można było go bezproblemowo wkleić do systemu zarządzania treścią (CMS), jest koniecznością.





Pobierz i zainstaluj VSCode

Aby rozpocząć, pobierz VSCode lub jego alternatywę o otwartym kodzie źródłowym VSCodium. Wersje każdego z nich są dostępne dla wszystkich głównych systemów operacyjnych dla komputerów stacjonarnych.

Kiedy już pobrany i zainstalowany VSCode , uruchom aplikację, aby rozpocząć.



Domyślny ekran powitalny VSCode.

Zainstaluj rozszerzenie zliczania słów

Zacznij od dodania licznika słów. Dostępnych jest wiele rozszerzeń, które to obsługują. Tym, który najlepiej odróżnia rzeczywiste słowa od kodu lub nazw plików, jest rozszerzenie Microsoft Word Counter.

Ściągnij: Liczba słów Rozszerzenie VSCode (bezpłatne)



  1. Kliknij Pobierz rozszerzenie pod Zasoby w prawym dolnym okienku.
  2. Po pobraniu przełącz się na VSCode.
  3. Kliknij na Ikona zębatki w lewym dolnym rogu interfejsu.
  4. Kliknij Rozszerzenia .
  5. Kliknij wielokropek ( ... ) w górnej części okienka Rozszerzenia.
  6. Kliknij Zainstaluj z VSIX . ​​​​​​​VSCode z rozszerzeniem Word Count firmy Microsoft pokazuje wykrywanie liczby słów w przykładowym dokumencie.
  7. Wybierz ms-vscode.wordcount-*.vsix właśnie pobrany plik.

The Liczba słów rozszerzenie powinno być teraz zainstalowane. Przetestuj go, otwierając nowy plik Markdown i wpisując. Powinieneś teraz zobaczyć licznik słów w lewym dolnym rogu interfejsu:

​​​​​​​Dokument przeceny otwarty w programie VSCode z błędami pisowni wykrytymi przez delikatne, niebieskie, faliste podkreślenie.

Zainstaluj rozszerzenie sprawdzania pisowni

Będziesz także chciał dodać funkcję sprawdzania pisowni. Podobnie jak w przypadku liczników słów, istnieje wiele rozszerzeń, które obsługują sprawdzanie pisowni. Najpopularniejszy to Sprawdzanie pisowni kodu przez Street Side Software, ponieważ jest dostępny w wielu językach.



Ściągnij: Sprawdzanie pisowni kodu Rozszerzenie VSCode (bezpłatne)

  1. Wykonaj kroki od 1 do 6 z powyższej sekcji.
  2. Wybierz streetsidesoftware.code-spell-checker-*.vsix właśnie pobrany plik.

The Sprawdzanie pisowni kodu rozszerzenie powinno być teraz zainstalowane. Przetestuj go, otwierając nowy plik Markdown i wpisując błędnie napisane słowa.

​​​​​​​Dolna prawa strona paska stanu VSCode ze wskaźnikiem pokazującym cztery błędy pisowni.

Powinieneś zobaczyć niebieską falistą linię pod tymi słowami wraz z liczbą błędów w prawym dolnym rogu interfejsu:

Otwórz plik VSCode settings.json z dodanym kodem niestandardowym.

Dostosuj zawijas błędów

Największym problemem związanym z tym rozszerzeniem sprawdzania pisowni jest słaby niebieski kolor squiggle, który identyfikuje błędy. Ma tendencję do wtapiania się w tło ciemnych motywów i jest ponownie wykorzystywany w innych elementach Markdown.

Możesz spróbować zmienić go na odważny czerwony kolor, jakiego można się spodziewać w edytorze tekstu:

  1. Kliknij na Ikona zębatki w lewym dolnym rogu interfejsu.
  2. Kliknij Ustawienia .
  3. Kliknij stoł warsztatowy , następnie Wygląd zewnętrzny .
  4. Przewiń w dół do Dostosowywanie kolorów : Dokument przeceny otwarty w programie VSCode z rażącymi błędami pisowni wykrytymi przez silne czerwone podkreślenie faliste.
  5. Kliknij Edytuj w settings.json .
  6. Wklej następujący kod do edytora, który otworzy się w nowej karcie: 
    "editorInfo.foreground": "#ff0000"
    Dokument przeceny otwarty w programie VSCode z trzema błędami pisowni.
  7. i zapisz plik.

Teraz, jeśli źle napiszesz słowo, VSCode ozdobi je jaskrawoczerwonym zawijasem:

Prawidłowo sformatowany dokument HTML otwarty w programie VSCode.

Ignorowanie fałszywych trafień

Moduł sprawdzania pisowni może nie rozpoznawać określonych terminów branżowych lub nazw własnych, takich jak nazwy firm. Na powyższym zrzucie ekranu, na przykład, VSCode podświetla skrót „distro” jako błędną pisownię.

Aby przestać widzieć te słowa jako błędy, dodaj je do swojego Ustawienia użytkownika .

  1. Kliknij prawym przyciskiem myszy słowo, które moduł sprawdzania pisowni ma zignorować.
  2. Najedź na Pisownia i wybierz Dodaj słowa do ustawień użytkownika . ​​​​​​​Ten artykuł jako plik przeceny otwierany w programie VSCode z domyślnym podglądem.

Od teraz sprawdzanie pisowni nie będzie już identyfikować tych słów jako niepoprawnych:

​​​​​​​Ustawienia VSCode > Rozszerzenia > Markdown > Markdown: menu Style.

Zainstaluj Copy Markdown jako rozszerzenie HTML

Następnie zainstaluj rozszerzenie Kopiuj Markdown jako HTML, aby móc kopiować i wklejać sformatowany Markdown.

Ściągnij: Skopiuj Markdown jako HTML Rozszerzenie VSCode (bezpłatne)

  1. Wykonaj kroki od 1 do 6 z powyższych sekcji.
  2. Wybierz jerriepelser.copy-markdown-as-html-1.1.0.vsix właśnie pobrany plik.

Teraz powinieneś być w stanie skopiować Markdown z VSCode i wkleić go do CMS jako czysty kod HTML. Aby to przetestować:

  1. Zaznacz tekst Markdown.
  2. Otworzyć Paleta poleceń w Pogląd menu lub naciskając CTRL+Shift+P .
  3. Wybierać Markdown: Kopiuj jako HTML : Ten artykuł jako plik przeceny otwierany w programie VSCode z podglądem dostosowanym do wyglądu MUO.
  4. Wklej skopiowany Markdown do nowego pliku HTML.

Powinieneś zobaczyć, że skopiowany Markdown został poprawnie wklejony jako HTML:

Ekran powitalny VSCode w jasnym motywie.

Dostosowywanie okienka podglądu

Domyślnie okienko podglądu będzie miało ten sam styl, co bieżący motyw programu VSCode.

Przecena tego artykułu jest otwierana w programie VSCode przy użyciu motywu pakietu Office firmy huacat.

Możesz jednak chcieć, aby podglądy lepiej odzwierciedlały ostateczne miejsce docelowe treści. Możesz dostosować okienko podglądu, aby Twoja Markdown wyglądała, jakby była już w witrynie, w której publikujesz.

Możesz korzystać z dowolnej strony internetowej; następujące style zostały zaczerpnięte z MUO. Tylko użyj narzędzia inspekcji w przeglądarce, aby znaleźć czcionki oraz wybierz kolory z dowolnej strony internetowej .

  1. Utwórz nowy plik i nazwij go mniej więcej „ CustomStyles.css '
  2. Wklej następujący przykładowy kod CSS do pliku: 
    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. i zapisz plik.
  4. Kliknij na Ikona zębatki w lewym dolnym rogu interfejsu.
  5. Kliknij Ustawienia .
  6. Kliknij Rozszerzenia i wtedy Obniżka cen .
  7. Przewiń w dół do Przecena: Style i kliknij Dodaj Przedmiot .
  8. Wprowadź ścieżkę swojego CustomStyles.css plik, na przykład:
    C:\Users\Adam\CustomStyles.css
    Przecenę tego artykułu otwiera się w programie VSCode przy użyciu motywu Material firmy Equinusocio.
  9. Kliknij OK .

Po wykonaniu tych czynności powinieneś otrzymać okienko podglądu, które wygląda bardzo podobnie do tego artykułu.

Ponownie uzyskałem te wartości za pomocą narzędzia Inspect Element w mojej przeglądarce na MUO, ale będziesz chciał znaleźć wartości dla swojej własnej witryny docelowej.

Motywy edytora

Domyślny motyw VSCode jest zarówno ciemny, jak i jasny, z wersjami każdego z nich o wysokim kontraście. Ale jak każdy dobry edytor kodu, są dostępnych jest mnóstwo świetnych motywów innych firm .

jak zrobić zrzut ekranu w systemie Windows 10 bez narzędzia do wycinania

Jeśli wolisz wygląd edytora tekstu od edytora kodu, polecam motyw Office od huacat:

Jeśli wolisz edytor kodu, popularne motywy, takie jak Dracula, Gruvbox, Material (patrz zrzut ekranu poniżej) i Nord, są dostępne na rynku rozszerzeń.

Aby zainstalować nowy motyw:

  1. Kliknij na Ikona zębatki w lewym dolnym rogu interfejsu.
  2. Kliknij Rozszerzenia .
  3. Wyszukaj dowolny z wyżej wymienionych motywów lub po prostu przefiltruj kategorię, aby motywy i przeglądaj, co jest dostępne.

Czy VSCode jest najlepszym edytorem przecen?

Czy zatem VSCode jest najlepszym edytorem Markdown dla treści internetowych? Po wyjęciu z pudełka, prawdopodobnie nie. Ale jest tak rozszerzalny, jak tylko może być.

Liczniki słów, sprawdzanie pisowni, kopiowanie Markdown jako HTML, dostosowania podglądu i motywy po prostu zarysowują powierzchnię. Istnieje ekosystem pełen rozszerzeń dostępnych dla VSCode i możesz go dowolnie dostosować.