2

Вот есть, допустим, пакет LiveReload. Разделяешь экран на две части: в одной пишешь код, в другой сразу просматриваешь результат. Как сделать также с Markdown? Я установил пакеты MarkdownEditing и MarkdownPreview, но когда попытался разделить экран на две части, внизу появляются горизонтальные полосы прокрутки, это дико бесит. Как убрать эти полосы, чтобы можно было нормально видеть в браузере текст, который пишешь?

5
  • Несколько часов я убил на решение этой проблемы когда-то. Полчасика—час где-то подождите, распишу ответ подробно. Спасибо. 27 июл 2016 в 15:51
  • В Atom предпросмотр Markdown из коробки, в соседней вкладке. Понимает даже YAML-шапку от Jekyll. Очень удобно, рекомендую. Это не помогает настроить предпросмотр в Sublime Text, поэтому публикую комментарием.
    – user181100
    27 июл 2016 в 16:32
  • @D-side, для Atom, кстати, тоже есть Ghost Text, про который я написал в данном ответе. Спасибо. 24 ноя 2016 в 12:48
  • @СашаЧерных для Atom набрал популярность пакет Atomic Chrome, делающий примерно то же самое, но без поддержки Firefox.
    – user181100
    24 ноя 2016 в 13:19
  • @D-side, только что на форуме анонсировали плагин с предпросмотром, как в Atom. Однако GhostText и Pandoc по-прежнему считаю лучшими решениями. Спасибо. 25 ноя 2016 в 4:02

2 ответа 2

4

Настроив описанными ниже действиями Sublime Text 3 на предпросмотр Markdown, я пишу в данном редакторе, например, ответы на Stack Overflow, и этот в том числе.


Убираем горизонтальную полосу прокрутки в редактируемом файле

Устанавливаем плагин Markdown Editing → открываем любой Markdown-файл с расширением md или mdownPreferencesSettings - MoreSyntax Specific - User. Удаляем содержимое открывшегося файла, вместо него вставляем следующий код:

{
    "extensions":
    [
        "md",
        "mdown"
    ],
    "wrap_width": "0",
}

Т. е. мы добавили параметр со значением "wrap_width": "0". Вместо 0 я подставлял другие цифры, да хоть 4147, всё корректно работало.

Недостаток Markdown Editing — при использовании в файлах с Markdown-разметкой плагина LanguageTool, использующего обращения к API на мой взгляд лучшего спеллчекера с открытым исходным кодом LanguageTool, не подсвечиваются все опечатки в тексте.


Убираем горизонтальную полосу прокрутки при отображении в браузере

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


OmniMarkupPreviewer

Устанавливаем плагин OmniMarkupPreviewer. После Ctrl+Shift+POmniMarkupPreviewer: Preview Current Markup in Browser вместо предпросмотра может открываться страница ошибки. Чтобы её избежать: PreferencesPackage SettingsOmniMarkupPreviewerSettings - User → вставляем следующий код и сохраняем файл.

{
    "renderer_options-MarkdownRenderer": {
        "extensions": ["tables", "fenced_code", "codehilite"]
    }
}

Однако горизонтальный скроллбар остаётся.

OmniMarkupPreviewer

я спрашивал в issue tracker данного плагина на ГитХабе, как справиться с проблемой, но ответа не получил.


Markdown Preview

Устанавливаем плагин Markdown Preview, запускаем предпросмотр. Вместо кириллического текста в браузере, возможно, отобразятся кракозябры. Дабы их избежать, необходимо задать кодировку в редактируемом файле — <meta charset=utf-8>. Потребуется также установка LiveReload и включение синхронизации при сохранении файла: Ctrl+Shift+PLiveReload: Enable/Disable PluginsEnable - Simple Reload.

Ctrl+Shift+PMarkdown Preview: Preview in Browsermarkdown (если выберем github, кракозябры не исчезнут):

Markdown Preview

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


Markmon

Установка как минимум для пользователей Windows может вызвать затруднения, поэтому остановлюсь на ней поподробнее:

  • Скачиваем и устанавливаем Node.js.
  • Устанавливаем Markmon, введя в терминал команду npm install -g markmon.
  • Через Package Control устанавливаем плагин Markmon для Sublime Text 3.
  • Скачиваем и устанавливаем текстовый конвертер Pandoc.
  • Для пользователей Windows: PreferencesBrowse Packages... → вручную создаём папку sublime-text-markmon.
  • PreferencesPackage SettingsMarkmonSettings - User → вставляем в открывшийся файл следующий код и сохраняем файл:

    {
    //On Windows try "markmon.cmd" if you get errors.
    //If markmon is not on your path you'll need to use a full path to it
    "executable": "markmon.cmd",
    "port": 3002,
    "pandoc_path": "",
    "command": "pandoc -t HTML5 --mathjax",
    "stylesheet": null,
    "projectdir": null
    }
    

Ctrl+Shift+PMarkmon launch → доступен предпросмотр в режиме реального времени. Вылезет командная строка, её не следует закрывать до тех пор, пока просмотр Markdown-разметки в браузере не будет представлять для вас необходимости, иначе придётся совершать рестарт самого Sublime Text 3.

Markmon

2

Удобное решение, особенно для форм c live preview, — package GhostText. Подходит и для любых других разметок, не обязательно Markdown.



1. Демонстрация

Протестировано на:

  • Windows 32-bit 10.0.14393,
  • Firefox 47.0.

В браузере открыта вкладка со страницей прямо этого сайта, который вы сейчас просматриваете, — Stack Overflow на русском. При помощи GhostText я пишу и данный ответ.

GhostText



2. Описание

Вы печатаете текст в Sublime Text. Точно такой же текст появляется в выбранной Вами форме на сайте, куда бы Вы вводили текст, пользуясь веб-редактором. Видео от разработчика, как работает GhostText.

Поддерживаемые формы:

  • <textarea>;
  • contenteditable, используется, например, в GMail;
  • формы CodeMirror — например, на сайтах Codepen.io, JSFiddle, JS Bin;
  • формы редактора Ace — применяются, например, в Tumblr.


3. Преимущества

  1. Если случайно закроете браузер, или он зависнет, либо выключат свет, а может, компьютер начнёт пищать, что его нужно будет срочно отключать и т. д. и т. п.; данные, введённые Вами в браузер, могут не сохраниться. Sublime Text же сохраняет данные предыдущей сессии при рестарте. Чтобы случайно не закрыть вкладку, где печатается текст для GhostText, рекомендую использовать плагин Sticky.
  2. Лучше предпросматривать так, как результат будет выглядеть в конечном итоге. В Markmon/Pandoc, равно как и остальных рассмотренных в другом моём ответе парсерах, свои правила оформления; на сайтах, куда Вы разместите свой текст, уже другие. Например, как будет выглядеть при предпросмотре с Markmon демонстрация из п. 1.

Markmon\Pandoc

Markmon, в отличие от Stack Overflow, не выделяет клавиши тегом kbd и не подсвечивает код после конструкции <!-- language: lang-$компьютерный язык -->. Можно произвести соответствующие настройки, но гораздо проще пользоваться GhostText.

  1. Продвинутые текстовые редакторы предоставляют несоизмеримо больше возможностей для редактирования, нежели WYSIWYG.
  2. Удобное деление экрана: с одной стороны — редактор, где печатается текст/код, с другой — браузер, где виден результат предпросмотра. Положим, в веб-редакторе Stack Overflow Вы заметили опечатку — придётся из места предпросмотра скроллить к форме редактирования → исправить опечатку → возвращаться к месту предпросмотра. С GhostText в перемотке нет необходимости.


4. Установка аддона

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


5. Ручная установка

1. Ограничения

Метод, описанный в пп. 5.2 и 6 не будет работать для новых стабильных версий Firefox.

Начиная с релиза 48.0 в стабильной версии Firefox нельзя устанавливать неподписанные аддоны. Несмотря на многочисленные возмущения пользователей, как тщательно аргументированные, так и нецензурные, разработчики не собираются отказываться от нововведения. Учитывая, что проверки расширения приходится ждать месяц, склонен согласиться с комментарием «как вы могли в одночасье всё так испортить?».

Тем не менее способ продолжает функционировать в Firefox

  • Develeper Edition,
  • Nightly,
  • ESR,
  • Unbranded Builds.

Поэтому не удаляю его из данного ответа. Также он может быть полезен для понимания общей картины установки аддонов в Firefox.

2. Зависимости

Неплохо было бы обойтись только установкой пакета для Sublime Text и аддона для Firefox. Однако аддон не работает, а разработчик по всей видимости, давно забросил проект.

Поэтому придётся собрать и поставить расширение для Firefox самостоятельно. Для этого потребуется:

  • что-нибудь, чем можно клонировать репозиторий к себе. Лучше git. Также рекомендую воспользоваться hub — надстройкой над git, упрощающей введение его команд.
  • Node.js вместе с npm — его пакетным менеджером;
  • nircmd для Windows, аналог для Linux — xdtools;
  • XPI Compiler — расширение для Firefox;
  • сам пакет GhostText для Sublime Text. После установки пакетов на всякий случай всегда перезагружайте Sublime Text.

Добавьте в пользовательскую или системную переменную PATH папки с исполняемыми файлами git, hub, npm и nircmd, если они не были туда добавлены автоматически при установке. Для упрощения работы с системными/пользовательскими переменными на Super User рекомендуют воспользоваться программой Rapid Environment Editor.



6. Сборка

  • клонируем репозиторий GhostText; если пользуетесь Hub, введите в удобный для Вас терминал команду hub clone GhostText/GhostText;
  • cd GhostText,
  • npm install,
  • npm run build.

Демонстрация желаемого поведения сборки на AppVeyor.

Если сборка вышла успешной, как на демо, устанавливаем локальный аддон для Firefox. У меня не получалось скомпилировать xpi файл с помощью рекомендуемого консольного приложения jmp, но зато удалось найти среди аддонов Mozilla кое-что получше — XPI Compiler. В адресной строке Firefox набираем about:xpiler → кликаем по значку папки с лупой → выбираем $имя папки с клонированным GhostText\browser, например, я клонировал GhostText в корень диска E, мой путь — E:\GhostText\browser. Кликаем по значку элемента паззла со стрелкой → аддон должен установиться, можно начинать им пользоваться.

XPI Compiler



7. Известные проблемы GhostText

  • Чтобы соединиться заново, требуется закрыть все вкладки в браузере и Sublime Text, в которых использовался GhostText. Иначе могут возникать сбои.
  • Иногда у меня случаются трудности в установке соединения по причинам, не описанным в README.MD репозитория плагина, однако вскоре удаётся успешно установить соединение вновь. Если же не получается достаточно долго, пишите в issue tracker GhostText.

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.