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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Затем установите расширение «Копировать 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. Выбирать Уценка: копировать как HTML:
  4. Вставьте скопированный Markdown в новый файл HTML.

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

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

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

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

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

  1. Создайте новый файл и назовите его примерно так:Пользовательские стили.css"
  2. Вставьте следующий пример кода CSS в файл:
    тело {
     фоновый цвет: #ффф;
     цвет: #2c2c2c;
     семейство шрифтов: Roboto;
     размер шрифта: 18 пикселей;
     вес шрифта: 400;
    высота линии: 1.7эм;
     максимальная ширина: 750 пикселей;
    }
    ч1 {
     размер шрифта: 38 пикселей;
     вес шрифта: 800;
    }
    

    ч2 {
     размер шрифта: 34px;
     вес шрифта: 700;
    }
    

    h3 {
     размер шрифта: 24px;
     вес шрифта: 700;
    }
    

    а {
     нижняя граница: 2пиксели сплошные #bf0d0b;
     цвет: #bf0d0b;
     вес шрифта: 700;
    }
    

    а:наведите {
     цвет: #ффф;
     фон: #bf0d0b;
    }
    сильный {
     вес шрифта: полужирный;
    }
  3. Закройте и сохраните файл.
  4. Нажми на значок передач в левом нижнем углу интерфейса.
  5. Нажмите на Настройки.
  6. Нажмите на Расширения а потом Уценка.
  7. Прокрутите вниз до Уценка: стили и нажмите Добавить элемент.
  8. Введите путь вашего Пользовательские стили.css файл, например:
    С:\Пользователи\Адам\Пользовательские стили.css
  9. Нажмите ХОРОШО.

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

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

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

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

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

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

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

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

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

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

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