Как превратить VSCode в лучший редактор Markdown

Как превратить VSCode в лучший редактор Markdown

Если вы пишете для Интернета, вы можете изучить Markdown. Существует множество приложений Markdown, предназначенных для веб-писателей. Но бесплатные редакторы кода, такие как Microsoft Visual Studio Code (VSCode), могут быть еще более мощными.





VSCode понимает Markdown и имеет встроенные инструменты для предварительного просмотра в HTML. Однако вы можете добавить функции текстового процессора, такие как подсчет слов и проверка орфографии. Вы также можете захотеть включить настройки для конкретного веб-сайта для средства предварительного просмотра.



СДЕЛАТЬ ВИДЕО ДНЯ

Наконец, возможность копировать Markdown как HTML, чтобы вы могли аккуратно вставить его в систему управления контентом (CMS), является обязательной.





как добавить текстовое поле в google docs

Скачайте и установите VSCode

Для начала загрузите либо VSCode, либо его альтернативу с открытым исходным кодом VSCodium. Версии каждого доступны для всех основных настольных операционных систем.

Как только вы скачал и установил VSCode , запустите приложение, чтобы начать.



Экран приветствия VSCode по умолчанию.

Установить расширение для подсчета слов

Начните с добавления счетчика слов. Есть много доступных расширений, которые справляются с этим. Тот, который лучше всего различает фактические слова и код или имена файлов, — это собственное расширение Microsoft Word Counter.

Скачать: Количество слов Расширение VSCode (бесплатно)



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

Количество слов теперь должно быть установлено расширение. Проверьте это, открыв новый файл Markdown и набрав. Теперь вы должны увидеть счетчик слов в нижней левой части интерфейса:

​​​​​​​​Открытый в VSCode документ с уценкой, в котором орфографические ошибки обнаруживаются мягким синим волнистым подчеркиванием.

Установить расширение для проверки орфографии

Вы также захотите добавить функцию проверки орфографии. Как и в случае со счетчиками слов, существует множество расширений для проверки орфографии. Наиболее популярным является Проверка орфографии кода от Street Side Software, так как он доступен на многих языках.



Скачать: Проверка орфографии кода Расширение VSCode (бесплатно)

  1. Выполните шаги с 1 по 6 из раздела выше.
  2. Выбрать streetsidesoftware.code-проверка орфографии-*.vsix файл, который вы только что скачали.

Проверка орфографии кода теперь должно быть установлено расширение. Проверьте это, открыв новый файл Markdown и напечатав слова с ошибками.

​​​​​​Нижняя правая часть строки состояния VSCode с индикатором, показывающим четыре орфографические ошибки.

Вы должны увидеть синюю волнистую линию под этими словами вместе с количеством ошибок в нижней правой части интерфейса:

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

Настройте волнистую линию ошибки

Самая большая проблема с этим расширением проверки орфографии — это слабый синий цвет, используемый для волнистой линии, которая идентифицирует ошибки. Он имеет тенденцию сливаться с фоном темных тем и повторно используется для других элементов Markdown.

Вы можете попробовать изменить его на жирный красный цвет, как вы ожидаете увидеть в текстовом процессоре:

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

Теперь, если вы напишете слово с ошибкой, VSCode украсит его ярко-красной волнистой линией:

Правильно отформатированный HTML-документ, открытый в VSCode.

Игнорирование ложных срабатываний

Средство проверки орфографии может не распознавать определенные отраслевые термины или имена собственные, например названия компаний. Например, на скриншоте выше VSCode выделяет аббревиатуру «дистрибутив» как опечатку.

Чтобы перестать считать эти слова ошибками, добавьте их в свой Пользовательские настройки .

  1. Щелкните правой кнопкой мыши слово, которое программа проверки орфографии должна игнорировать.
  2. Парить Написание и выберите Добавить слова в настройки пользователя . ​​​​​Эта статья в виде файла уценки открывается в VSCode с помощью средства предварительного просмотра по умолчанию.

Отныне проверка орфографии больше не будет определять эти слова как неправильные:

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

Установить копирование Markdown как расширение HTML

Затем установите расширение «Копировать Markdown как HTML», чтобы вы могли копировать и вставлять форматированный Markdown.

как экран зеркало на xbox one

Скачать: Скопировать 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. Выбирать Уценка: копировать как HTML : Эта статья в виде файла уценки, открытого в VSCode с помощью средства предварительного просмотра, настроенного так, чтобы оно выглядело как MUO.
  4. Вставьте скопированный Markdown в новый файл HTML.

Вы должны увидеть, что скопированный Markdown был правильно вставлен как HTML:

Экран приветствия VSCode в светлой теме.

Настройка панели предварительного просмотра

По умолчанию панель предварительного просмотра будет иметь тот же стиль, что и текущая тема VSCode.

Уценка этой статьи открыта в VSCode с использованием темы Office от huacat.

Однако вы можете захотеть, чтобы предварительный просмотр более точно отражал конечное назначение вашего контента. Вы можете настроить панель предварительного просмотра, чтобы ваш Markdown выглядел так, как будто он уже находится на веб-сайте, на котором вы публикуете.

Вы можете использовать любой веб-сайт, который вы хотите; следующие стили были взяты из MUO. Просто используйте инструмент проверки элементов вашего браузера, чтобы найти шрифты а также выбрать цвета с любого сайта .

  1. Создайте новый файл и назовите его примерно так: Пользовательские стили.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. Прокрутите вниз до Уценка: стили и нажмите Добавить элемент .
  8. Введите путь вашего Пользовательские стили.css файл, например: 
    C:\Users\Adam\CustomStyles.css
    Уценка этой статьи открыта в VSCode с использованием темы Material от Equinusio.
  9. Нажмите ХОРОШО .

После того, как вы это сделаете, у вас должна получиться панель предварительного просмотра, очень похожая на эту статью.

Опять же, я получил эти значения с помощью инструмента Inspect Element в моем браузере на MUO, но вы захотите найти значения для своего собственного целевого веб-сайта.

Темы редактора

Тема VSCode по умолчанию бывает темной и светлой, с высококонтрастными версиями каждой из них. Но, как и в любом хорошем редакторе кода, есть доступно множество отличных сторонних тем .

Если вы предпочитаете внешний вид текстового процессора внешнему виду редактора кода, я рекомендую тему Office от huacat:

Wi-Fi подключен, но нет интернета Windows 10

Если вы предпочитаете редактор кода, общие темы, такие как Dracula, Gruvbox, Material (см. снимок экрана ниже) и Nord, доступны на рынке расширений.

Чтобы установить новую тему:

  1. Нажми на значок передач в левом нижнем углу интерфейса.
  2. Нажмите на Расширения .
  3. Найдите любую из вышеупомянутых тем или просто отфильтруйте категорию, чтобы темы и просмотрите то, что доступно.

Является ли VSCode лучшим редактором Markdown?

Итак, является ли VSCode идеальным редактором Markdown для веб-контента? Из коробки, наверное, нет. Но это настолько расширяемо, насколько это возможно.

Счетчики слов, проверка орфографии, копирование Markdown как HTML, настройки предварительного просмотра и темы — это только поверхностные сведения. Для VSCode доступна экосистема, полная расширений, и вы можете сделать их своими собственными.