Вот есть, допустим, пакет LiveReload. Разделяешь экран на две части: в одной пишешь код, в другой сразу просматриваешь результат. Как сделать также с Markdown? Я установил пакеты MarkdownEditing и MarkdownPreview, но когда попытался разделить экран на две части, внизу появляются горизонтальные полосы прокрутки, это дико бесит. Как убрать эти полосы, чтобы можно было нормально видеть в браузере текст, который пишешь?
-
Несколько часов я убил на решение этой проблемы когда-то. Полчасика—час где-то подождите, распишу ответ подробно. Спасибо.– Саша Черных27 июл 2016 в 15:51
-
В Atom предпросмотр Markdown из коробки, в соседней вкладке. Понимает даже YAML-шапку от Jekyll. Очень удобно, рекомендую. Это не помогает настроить предпросмотр в Sublime Text, поэтому публикую комментарием.– user18110027 июл 2016 в 16:32
-
@D-side, для Atom, кстати, тоже есть Ghost Text, про который я написал в данном ответе. Спасибо.– Саша Черных24 ноя 2016 в 12:48
-
@СашаЧерных для Atom набрал популярность пакет Atomic Chrome, делающий примерно то же самое, но без поддержки Firefox.– user18110024 ноя 2016 в 13:19
-
@D-side, только что на форуме анонсировали плагин с предпросмотром, как в Atom. Однако GhostText и Pandoc по-прежнему считаю лучшими решениями. Спасибо.– Саша Черных25 ноя 2016 в 4:02
2 ответа
Настроив описанными ниже действиями Sublime Text 3 на предпросмотр Markdown, я пишу в данном редакторе, например, ответы на Stack Overflow, и этот в том числе.
Убираем горизонтальную полосу прокрутки в редактируемом файле
Устанавливаем плагин Markdown Editing → открываем любой Markdown-файл с расширением md
или mdown
→ Preferences
→ Settings - More
→ Syntax Specific - User
. Удаляем содержимое открывшегося файла, вместо него вставляем следующий код:
{
"extensions":
[
"md",
"mdown"
],
"wrap_width": "0",
}
Т. е. мы добавили параметр со значением "wrap_width": "0"
. Вместо 0
я подставлял другие цифры, да хоть 4147
, всё корректно работало.
Недостаток Markdown Editing — при использовании в файлах с Markdown-разметкой плагина LanguageTool, использующего обращения к API на мой взгляд лучшего спеллчекера с открытым исходным кодом LanguageTool, не подсвечиваются все опечатки в тексте.
Убираем горизонтальную полосу прокрутки при отображении в браузере
У меня не получилось с первыми двумя плагинами, если кто-то знает, как заставить их работать так же, как Markmon, пожалуйста, сообщите в комментариях.
OmniMarkupPreviewer
Устанавливаем плагин OmniMarkupPreviewer. После Ctrl+Shift+P
→ OmniMarkupPreviewer: Preview Current Markup in Browser
вместо предпросмотра может открываться страница ошибки. Чтобы её избежать: Preferences
→ Package Settings
→ OmniMarkupPreviewer
→ Settings - User
→ вставляем следующий код и сохраняем файл.
{
"renderer_options-MarkdownRenderer": {
"extensions": ["tables", "fenced_code", "codehilite"]
}
}
Однако горизонтальный скроллбар остаётся.
я спрашивал в issue tracker данного плагина на ГитХабе, как справиться с проблемой, но ответа не получил.
Markdown Preview
Устанавливаем плагин Markdown Preview, запускаем предпросмотр. Вместо кириллического текста в браузере, возможно, отобразятся кракозябры. Дабы их избежать, необходимо задать кодировку в редактируемом файле — <meta charset=utf-8>
. Потребуется также установка LiveReload и включение синхронизации при сохранении файла: Ctrl+Shift+P
→ LiveReload: Enable/Disable Plugins
→ Enable - Simple Reload
.
Ctrl+Shift+P
→ Markdown Preview: Preview in Browser
→ markdown
(если выберем github
, кракозябры не исчезнут):
Помимо явного указания кодировки для того, чтобы видеть результат в браузере, потребуется сохранять файл; как с этим плагином осуществить Live Preview, о котором просил уважаемый топикстартер, я не нашёл.
Markmon
Установка как минимум для пользователей Windows может вызвать затруднения, поэтому остановлюсь на ней поподробнее:
- Скачиваем и устанавливаем Node.js.
- Устанавливаем Markmon, введя в терминал команду
npm install -g markmon
. - Через Package Control устанавливаем плагин Markmon для Sublime Text 3.
- Скачиваем и устанавливаем текстовый конвертер Pandoc.
- Для пользователей Windows:
Preferences
→Browse Packages...
→ вручную создаём папкуsublime-text-markmon
. Preferences
→Package Settings
→Markmon
→Settings - 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+P
→ Markmon launch
→ доступен предпросмотр в режиме реального времени. Вылезет командная строка, её не следует закрывать до тех пор, пока просмотр Markdown-разметки в браузере не будет представлять для вас необходимости, иначе придётся совершать рестарт самого Sublime Text 3.
Удобное решение, особенно для форм c live preview, — package GhostText. Подходит и для любых других разметок, не обязательно Markdown.
1. Демонстрация
Протестировано на:
- Windows 32-bit 10.0.14393,
- Firefox 47.0.
В браузере открыта вкладка со страницей прямо этого сайта, который вы сейчас просматриваете, — Stack Overflow на русском. При помощи GhostText я пишу и данный ответ.
2. Описание
Вы печатаете текст в Sublime Text. Точно такой же текст появляется в выбранной Вами форме на сайте, куда бы Вы вводили текст, пользуясь веб-редактором. Видео от разработчика, как работает GhostText.
<textarea>
;- contenteditable, используется, например, в GMail;
- формы CodeMirror — например, на сайтах Codepen.io, JSFiddle, JS Bin;
- формы редактора Ace — применяются, например, в Tumblr.
3. Преимущества
- Если случайно закроете браузер, или он зависнет, либо выключат свет, а может, компьютер начнёт пищать, что его нужно будет срочно отключать и т. д. и т. п.; данные, введённые Вами в браузер, могут не сохраниться. Sublime Text же сохраняет данные предыдущей сессии при рестарте. Чтобы случайно не закрыть вкладку, где печатается текст для GhostText, рекомендую использовать плагин Sticky.
- Лучше предпросматривать так, как результат будет выглядеть в конечном итоге. В Markmon/Pandoc, равно как и остальных рассмотренных в другом моём ответе парсерах, свои правила оформления; на сайтах, куда Вы разместите свой текст, уже другие. Например, как будет выглядеть при предпросмотре с Markmon демонстрация из п. 1.
Markmon, в отличие от Stack Overflow, не выделяет клавиши тегом kbd и не подсвечивает код после конструкции <!-- language: lang-$компьютерный язык -->
. Можно произвести соответствующие настройки, но гораздо проще пользоваться GhostText.
- Продвинутые текстовые редакторы предоставляют несоизмеримо больше возможностей для редактирования, нежели WYSIWYG.
- Удобное деление экрана: с одной стороны — редактор, где печатается текст/код, с другой — браузер, где виден результат предпросмотра. Положим, в веб-редакторе 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
. Кликаем по значку элемента паззла со стрелкой → аддон должен установиться, можно начинать им пользоваться.
7. Известные проблемы GhostText
- Чтобы соединиться заново, требуется закрыть все вкладки в браузере и Sublime Text, в которых использовался GhostText. Иначе могут возникать сбои.
- Иногда у меня случаются трудности в установке соединения по причинам, не описанным в
README.MD
репозитория плагина, однако вскоре удаётся успешно установить соединение вновь. Если же не получается достаточно долго, пишите в issue tracker GhostText.