Язык Markdown — обзор редакторов для работы
Начал создавать серию статей по Bootstrap, чтобы основательно изучить для себя данный вопрос. Но вот незадача — придется на время отложить его в сторону и отвлечься на пару моментов.
Первый из них — это язык Markdown, а второй — модульные сетки. И если без первого вопроса изучение Bootstrap можно продолжить без какого-либо ущерба (до этого же как-то обходился без него?), то вот со вторым вопросом посложнее будет.
Дело в том, что фреймворк Bootstrap в основе своей работы использует модульную сетку. А вы хорошо себе представляете (и знаете ли вообще?), что такое модульная сетка?
Начнем с языка Markdown
Совсем недавно узнал о существовании языка Markdown. Мне стало интересно, что это за язык такой и зачем он нужен. Оказалось все просто и практично, как раз для меня, так как я довольно часто пишу статьи для своего бложика.
Язык Markdown — по мне, так его языком даже назвать нельзя. Это просто специальный синтаксис, призвание которого — облегчить и убыстрить написание HTML-документов. Это важно для людей, которые или сами ведут блоги\сайты или профессия которых называется контент-менеджер. Другими словами, это люди, которые часто пишут статьи с форматированием в виде HTML-документов.
Если вы хотя бы раз писали статьи с таким форматированием, то прекрасно знаете, что необходимо делать бесчисленное число раз в редакторе — ввод HTML-тегов для форматирования текста. Поверьте (если не знаете) — это очень неудобно и утомительно.
Конечно, для браузера HTML-теги необходимы, иначе он не сможет правильно прочитать HTML-документ. Но вот нам, человекам, эти теги, по большому счету, ни к чему.
Язык Markdown был создан именно для того, чтобы позволить человеку, набирающему текст в HTML-формате, забыть об HTML-тегах. Вместо этих тегов в Markdown применяются символы-заменители, которые гораздо легче набирать вручную. В этом заключается смысл создания и использования языка Markdown.
Конечно, как любой другой язык-надстройка (например, тот же SASS\SCSS или LESS для CSS), Markdown нуждается в компиляторе, который “переводил” бы текст в формате этого языка в стандартный формат HTML-документа.
В терминологии Markdown такой компилятор называется транслятором и их существует достаточное количество. Существуют платные или бесплатные Markdown-редакторы, в которых уже встроен такой транслятор.
Ниже я рассмотрю два варианта использования языка Markdown — один с помощью специализированных редакторов, второй — с помощью плагина под редактор Sublime Text 2, расширяющего его возможности в плане написания статей с таким синтаксисом.
Редактор MarkdownPad2
Редактор MarkdownPad2 — это герой моего дня сегодня! Бесплатный, интуитивно понятный и простой. Под Windows XP у меня на работе он установился и запустился без проблем. А вот дома на ноутбуке HP Pavilion g6 с Windows 7 установился, но запуститься отказался. Выдал какую-то ошибку, которую мне неохота было выискивать в Google.
В версии MarkdownPad2 (бесплатная) нет многих удобных фишек, которые есть в версии MarkdownPad2 Pro (платная). Но и без них можно прожить, это не так уж “страшно”.
Текст, который вы читаете в данный момент (нетрудно догадаться) набран в этом редакторе с использованием синтаксиса Markdown (как ни странно). Сам синтаксис мне описывать совсем неохота по нескольким причинам.
- Первая — там описывать нечего. Он настолько прост и лаконичен, что ему можно и нужно выучиться за полчаса, просто набирая текст в редакторе. Глупо было бы — ведь для цели упрощения написания статей в HTML-разметке язык Markdown и создавался.
- Вторая — если у вас все же есть желание почитать статью-описание этого языка, то есть прекрасный вариант — “Технический блог” Владимира Старкова, где помещен материал Основы markdown. Статья совсем свежая, написана автором 13 февраля этого года. Кроме этого, малоизвестная поисковая система Google поможет вам найти целую кучу разнообразных ‘ов по этому языку.
Чтобы не быть голословным, приведу небольшое изображение редактора MarkdownPad2 после первого запуска программы:
Левая половина окна — это пример синтаксиса Markdown. Правая половина окна — это предварительный просмотр текста, набранного в левой половине. Точно также текст будет выглядеть в окне браузера. Включить или отключить предварительный просмотр можно по клавише F5 .
Если хотите точно в этом удостовериться, нажмите клавишу F6 (или самую последнюю иконку на панели инструментов редактора). Создаваемая страница откроется в окне браузера, являющегося браузером по умолчанию в системе.
Давайте быстро пробежимся, как использовать программу и создавать документы в ней:
- создаем новый документ Ctrl+N
- вносим в него изменения: текст, изображения и так далее
- сохраняем файл с расширением
- экспортируем в HTML-файл Ctrl+Shift+1
Как видим, все просто до предела. Но хочу сказать о паре моментов по работе в этой программе:
- при форматировании текста лучше использовать панель инструментов редактора, так как синтаксис в редакторе слегка отличается от “официального”;
- опция экспорта в pdf-формат Ctrl+Shift+2 доступна только в платной версии (а оно нам надо?).
Редактор MarkDown#Editor
Еще один редактор для написания текстов в синтаксисе Markdown — “MarkDown#Editor”. Он также бесплатный, но на моем ноутбуке он запустился без ошибок.
Программа создана автором из Страны Восходящего Солнца по имени Mitsuhiro Hibara. Проект проживает по запоминающемуся адресу http://www.hibara.org (думаю, жители Восточной Украины и юга России меня поймут).
Редактор мне понравился как внешним видом, так и своими возможностями. В нем все просто и интуитивно понятно. Ниже представлен внешний вид программы после первого ее запуска:
Программа умеет экспортировать только в один формат — HTML. Но больше и не нужно, правда?
Плагин MarkdownEditing
Готовые редакторы под Markdown — это прекрасная вещь, но меня не устраивает одно. Я не люблю держать на компьютере целую кучу программ, каждая из которых выполняет только одну задачу.
Я говорю это к тому, что под мой любимый редактор Sublime Text имеется плагин MarkdownEditing, который позволяет создавать документы формата Markdown в этой программе.
Давайте рассмотрим установку, настройку и работу этого плагина в ST2. Надо сказать, что вопрос с плагином под Sublime потратил у меня достаточно времени. Я не знал, как выполнять экспорт готового md-файла в html-файл. Ни Stackoverflow, ни Toster не помогли мне разобраться с данным вопросом. Только прямая свзяь с maintainer’ом плагина помогла разрешить ситуацию.
- Установка плагина MarkdownEditing в Sublime Text 2 стандартная — через менеджер пакетов
- Перезапускаем редактор Sublime Text 2
- Создаем новый документ и устанавливаем для него синтаксис Markdown Shift+Ctrl+P
- Пишем в новом документе текст
- Сохраняем отредактированный документ как файл с расширением
А теперь немного внимания! Для меня данный вопрос был камнем преткновения, который заставил добраться с просьбой о помощи до самого maintainer’а плагина — Ali Ayas. Я долго не мог понять простой вещи — MarkdownEditing предназначен только для редактирования файлов с синтаксисом Markdown, о чем говорит само название этого плагина.
Плагин MarkdownEditing не умеет сам конвертировать .md-файлы в файлы формата html. Поэтому, если вы пишите статьи для сайта под управлением WordPress (как в моем случае), вам необходимо поставить на эту CMS плагин для конвертации — WP-Markdown. Затем закидываете статьи в формате под эту CMS, а там уже плагин WP-Markdown автоматически превратит их в html-файлы.
Не знаю, кого как, а меня разочаровал такой подход к делу создания markdown-файлов в Sublime Text 2 с плагином MarkdownEditing.
Эмоции немного остыли и я пришел к выводу, что не все так плохо, как казалось с первого взгляда. Более того, имеется плагин MarkdownBuild под Sublime Text 2, который прекрасно справляется с задачей компиляции файла в html-файл. Устанавливается этот плагин как обычно, через менеджер пакетов.
Настройки плагина минимальные и их можно привести здесь целиком:
Единственный момент заключается в том, что настройки плагина MarkdownBuild находятся в файле , добраться до которого можно только через файловый менеджер или Проводник. В редакторе Sublime Text 2 я не нашел способа открыть настройки этого плагина.
Кроме того, компиляция в этом плагине производится через сочетание клавиш Shift+Ctrl+B , а не Ctrl+B , как описано в документации.
Заключение
Я доволен тем, что познакомился с языком Markdown. С ним действительно создавать статьи под сайт гораздо легче, быстрее и удобнее. Писать статьи или обзоры с помощью Markdown — одно удовольствие.
Редактором-победителем для меня стала программа MarkdownPad — быстрая, удобная и надежная. Тот момент, что она отказалась установиться на моем ноуте под Windows 7 роли не играет, как мне кажется.
WebStorm — hotkeys
## Стандартные сочетания клавиш WebStorm- Alt + 1 — открыть\закрыть панель проекта- Alt + 0 — открыть\закрыть панель коммитов- Alt + 9 — . … Continue reading
10+ крутых редакторов с поддержкой Markdown
Каждый, кто хотя бы раз пробовал встроить обычный текст в сайт, знает, что сделать это не так просто. Для этого нужен редактор с особыми функциями форматирования. Например, Markdown-редактор идеально подойдёт. И вот вам моя подборка лучших из них.
Десктопные редакторы Markdown для Mac
Byword
Простой текстовый редактор с полноценной поддержкой Markdown. В нём вы найдёте такие штуки, как подсветка синтаксиса, простые сочетания клавиш, таблицы, перекрёстные ссылки и даже сноски.
В меню «Формат» вы можете задать все необходимые параметры для вашего текста: отступ абзаца, вид кавычек, списков и т.д.
Из главных фишек я бы выделил режим пишущей машинки, который будет удерживать набираемый текст в центре экрана, и фокус-режим, который выделяет выбранный абзац, затемняя всю остальную часть текста.
Готовую работу вы сможете запостить в Tumblr, Blogger, WordPress, Medium, Evernote и вывести в таких форматах, как PDF, RTF и Word.
Ulysses
Это полнофункциональный Markdown-редактор для Mac OSX. Он позволяет маркировать важные отрывки, комментарии или заголовки. И вы легко сможете вставить в свой текст ссылки, сноски и картинки.
All-In-One Person Константин Докучаев
Есть режим пишущей машинки и счётчик символов и слов. Свою работу можно запостить на Medium и WordPress, а также вывести в любом предложенном формате.
MacDown
Ещё один хороший редактор Markdown с минималистичным интерфейсом и возможностью просмотра того, как в итоге будет выглядеть ваш текст.
Автор его создал с нуля после того, как один из его любимых редакторов перестал обновляться. Надо сказать, что утилита распространяется бесплатно.
Вы можете настраивать под себя шрифт, цвет подложки, размер текстового блока и многое другое. Готовую работу можно вывести в HTML или PDF форматах.
Десктопные редакторы Markdown для Windows
Caret
Простой и удобный редактор, в котором есть всё необходимое для работы с Markdown. Среди его основных фишек хотелось бы выделить режим пишущей машинки и возможность переключиться на тёмный режим.
Кроме этого, вы можете включить панель предпросмотра, чтобы одновременно набирать текст с разметкой и видеть итог. Готовую работу можно экспортировать в PDF и HTML.
ghostwriter
Бесплатный Markdown-редактор с чистым интерфейсом и достойным набором функций. Позволяет во время написания текста переходить в полноэкранный режим, использовать панель предпросмотра и режим фокусирования.
Вы можете настроить внешний вид программы, выбрав тёмную или светлую тему. Можно даже поставить на фон любую свою картинку.
Вывести работу можно HTML-файлом. Или в Word, PDF, ODT и иных форматах, установив прямо в ghostwriter конвертер Pandoc.
Typora
Если вы ищете простой редактор Markdown для написания веб-контента, то это решение для вас. Также программа позволяет вставлять в свою работу графики, таблицы, математические формулы и пр.
По умолчанию ваша работа будет сохранена в MD-файле, но Typora поддерживает для экспорта/импорта и другие форматы.
Десктопные редакторы Markdown для Linux
Remarkable
Многофункциональный редактор с проверкой орфографии, счётчиком слов и поддержкой MathJax. Разрешает легко работать с субскриптами, аббревиатурами, сносками и прочими подобными элементами.
Есть возможность настроить вид текста под себя. Также поддерживаются различные сочетания горячих клавиш, что в разы ускорит работу.
Кроме этого, Remarkable позволяет преобразовывать обычные ссылки в гипертекст и просматривать конечный результат прямо во время форматирования. Вывести работу можно в форматах HTML и PDF.
Haroopad
Опенсорсное решение, которое подойдёт для создания таких вещей, как веб-контент, отчёты, презентации, слайды, тексты для блога и т.п.
Среди основных фишек — подсветка синтаксиса, возможность менять размер шрифта с помощью горячих клавиш, создание блок-схем и набор CSS-стилей. Также недавно появилась возможность видеть количество задач, которые нужно выполнить, прямо на значке приложения.
Вы можете заводить сюда файлы с YouTube, Pastebin, Twitter и иных сервисов. Вывести работу можно только в форматах HTML и PDF. А ещё вы можете отправить свою работу в виде электронного письма прямо из Haroopad, либо запостить её в Evernote или Tumblr.
Apostrophe
Этот редактор основан на знаменитом UberWriter, разработка которого прекращена.
На нижней панели программы вы можете увидеть количество набранных символов и слов, а также три режима. Первый из них — «Фокус» — позволяет выделить нужное предложение. Полноэкранный режим скроет всю панель инструментов, предоставив вашему взору только окно с текстом. А в режиме предпросмотра вы сможете увидеть то, как будет выглядеть ваш текст в итоге.
Также здесь есть проверка орфографии и инлайн-превью. Последняя функция позволяет просматривать ссылки, картинки, сноски и другие элементы, кликая по ним.
Вывести работу можно в любом поддерживаемом формате.
Онлайновые редакторы Markdown
HackMD
А этот редактор позволяет легко работать над форматированием текста одновременно нескольким пользователям.
Платформа даже совместима с такими устаревшими редакторами, как Emacs и Sublime.
Работу можно сохранять в Gist, Dropbox и Google Диске. Ну или скачать прямо на компьютер в любом подходящем формате.
StackEdit
Отличный онлайновый редактор Markdown с удобной панелью инструментов для форматирования текста и возможностью видеть, как будет выглядеть работа без разметки.
Главная фишка сервиса в том, что все ваши работы будут сохраняться в его локальном хранилище, и вы можете получить к ним доступ когда угодно.
Также можно подключить Dropbox или Google Диск, если хотите сохранять работу в облаке. Добавить текст в StackEdit можно прямо с компьютера или указав URL.
Dillinger
Простое и современное решение для преобразования Markdown в HTML и наоборот. Всё, что от вас требуется, — вставить текст на левой панели и выбрать формат, в котором хотите видеть конечный результат.
Заводить/выводить свою работу можно через Google Диск, Dropbox, Medium и Github. Также есть возможность конвертировать её в такие форматы, как MD, PDF и HTML.
Кроме того, в Dillinger есть такой режим, который скрывает всё лишнее с глаз, чтобы вы могли сосредоточиться исключительно на своём тексте.
Markdown за 5 минут
Маркдаун, он же markdown — удобный и быстрый способ разметки текста. Маркдаун используют, если недоступен HTML, а текст нужно сделать читаемым и хотя бы немного размеченным (заголовки, списки, картинки, ссылки).
Главный пример использования маркдауна, с которым мы часто сталкиваемся — файлы readme.md , которые есть в каждом репозитории на Гитхабе. md в имени файла это как раз сокращение от markdown.
Другой частый пример — сообщения в мессенджерах. Можно поставить звёздочки вокруг текста в Телеграме, и текст станет полужирным.
Версии маркдауна отличаются, поэтому перепроверьте, какую вы используете.
Где попробовать маркдаун
Установите Visual Studio Code и расширение HTML Preview, сохраните новый файл с любым именем и расширением md, а потом нажмите ctrl+k v. После этого можете играть с маркдауном и сразу смотреть, что получается. Все примеры из статьи как раз сделаны там.
Ну или используйте любой онлайн-редактор, например, Dillinger или Stackedit.
Выделение текста
У нас не очень много вариантов, но есть аналоги тегов <b> и <i> . И их тоже можно вкладывать друг в друга.
Заголовки
Чем больше раз повторяем #, тем больше уровень заголовка. Вообще доступно 6 уровней, но на практике очень редко нужно что-то больше третьего.
Списки
Ненумерованный список — звёздочки с одной стороны. Второй уровень — ставим таб.
С нумерацией вообще смешно — можно просто везде поставить единички, а в документе появится уже нормально проставленная нумерация.
Ссылки
Картинки ставятся как ссылки, только в начале добавляется восклицательный знак.
Цитаты
Всё, теперь вы можете написать свой первый Readme.md.
Что делать, если лень всё это запоминать
Можете писать свои статьи, заметки или Readme.md в гугл-документах, а потом использовать расширение Docs to markdown, чтобы превратить текст в готовую маркдаун-разметку.
Но это крайний случай, потому что для базовой работы с маркдауном хватит и того, что написано выше. А это дел на пять минут.
Readme.md — часть гитхаба
Узнайте, как работать с Git через консоль, и другие тонкости работы с системами контроля версий.