Markdown для повседневной жизни
от aNNiMON
Markdown - простой и удобный язык разметки. Благодаря его популярности, существует множество программ и сервисов, которые так или иначе с ним взаимодействуют. Практически каждый README на GitHub использует Markdown, также он используется на многих сайтах для написания статей или даже книг.
В статье даётся быстрый старт для начинающих, а также множество инструментов для упрощения повседневной работы.
Применение
Markdown может быть использован для ведения ежедневных заметок, блогов, в мессенджерах, для описания проектов, для составления презентаций и даже как основа для целого сайта.
Синтаксис
Заголовки
В Markdown, как и в HTML, есть 6 уровней заголовков. В html они обозначаются так:
В Markdown — при помощи символа решетки. Количество решеток обозначает уровень заголовка:
Форматирование
_курсив_ курсив
**жирный** жирный
~~зачёркнутый~~ зачёркнутый
`моноширинный` моноширинный
цитата
вторая строка цитаты
Разделитель:
---
> Это цитата с _курсивным_ **жирно-_курсивным_** `моноширинным` текстом
Это цитата с курсивным жирно-курсивным моноширинным текстом
Ссылки и изображения
Формат ссылки: [описание](ссылка)
[Домашняя страница](http://annimon.com/) Домашняя страница
В описании ссылки можно применять форматирование текста:
[_Домашняя_страница](http://annimon.com/) Домашняя страница
Формат картинки такой же, только в начало добавляется восклицательный знак: ![описание](ссылка на изображение)
![логотип Markdown логотип Markdown](/ablogs/file718/markdown-logo.png)
Попробуйте теперь сделать картинку-ссылку.
Списки
Списки вы наверняка применяете и в текстовых файлах, в Markdown это стандарт:
- первый пункт
- второй пункт
- третий пункт
Нумерованный список:
1. Первый пункт.
2. Второй пункт.
Вложенный список:
- Первый пункт
- Первый подпункт
- Второй подпункт
- Третий уровень вложенности
- Второй пункт
1. Подпункт 1
2. Подпункт 2
Код
HTML
Кроме всего перечисленного, Markdown поддерживает html-теги. Так что, если чего-то не хватает, например, надстрочного текста, можно использовать html-теги.
x<sup>2</sup> x2
Онлайн-редакторы
- https://jbt.github.io/markdown-editor/ простой редактор. Для небольших текстов формирует ссылку, вот пример.
- http://dillinger.io/ - редактор для писателей. Отличный дизайн, подсчет количества слов, возможность экспорта в html, pdf, а также на популярные сайты и облачные хранилища.
- https://stackedit.io/editor - помимо основных функций редактора умеет конвертировать HTML в md. Есть панель для быстрого форматирования, публикация на множество ресурсов, поддержка LaTeX, гибкие настройки.
- https://write-box.appspot.com/ - ещё один редактор для писателей с простым и лаконичным дизайном.
Редакторы для ПК
- CuteMarkEd - кроссплатформенный редактор с открытыми исходниками и возможностью создания презентаций. Именно в нём сейчас и пишется эта статья![:)](/files/smiles/99.gif)
![cutemarked.png cutemarked.png](/ablogs/file714/cutemarked.png)
- MdCharm - ничуть не уступает остальным редакторам. Из достоинств: возможность установки собственных CSS-стилей, открытие папки как проекта, вкладки.
Плагины для IDE и других редакторов
- Markdown support для IntelliJ IDEA
- Markdown support для NetBeans IDE
- Markdown preview для Sublime Text 2/3
- markdown-preview, markdown-preview-plus для Atom
Прочие инструменты
Редакторы презентаций
- Marp - Markdown Presentation Writer — кроссплатформенный редактор презентаций.
![marp.png marp.png](/ablogs/file719/marp.png)
- Madoko — онлайн-редактор презентаций.
- remark — JavaScript-библиотека для создания презентаций. Использует Markdown.
Редакторы заметок
- Simplenote - сервис для заметок с поддержкой Markdown и синхронизацией. Есть веб-клиент, клиент для ПК и Android.
- NoticEditor - оффлайновый иерархический редактор заметок.
Генераторы сайтов
- Jekyll - используется в GitHub Pages. Блог, страница портфолио, описание проекта, всё это можно сгенерировать из Markdown-файла и получить красивую веб-страничку.
- Hexo - генератор блогов на Node.js.
![hexo.png hexo.png](/ablogs/file717/hexo.png)
- GitBook - пригодится для книг или документации. Особенность GitBook в том, что для открытых проектов они предоставляют место на своём сервере. Отличный вариант для размещения (и продвижения) своих проектов. В свободное время можно что-нибудь почитать в галерее.
- StaticGen - огромный список статических генераторов сайтов.
Ковертеры в другие форматы
- Pandoc - универсальная программа для конвертирования различных текстовых форматов.
- md2bb - настраиваемый конвертер из Markdown в BB-code.
- Онлайн конвертер Markdown в PDF
Стили CSS
- Markdown CSS
- Markedstyle
Практика. Быстрое создание страницы описания проекта
Предположим, что у нас есть проект и очень мало времени на то, чтобы сделать страницу с его описанием. Обычный txt нас не устраивает, мы хотим красивую html-страницу. Набирать вручную html-теги слишком долго, подбирать цвета и стили для текста, тем более. Что делать?
Начинаем с самого текста.
Далее, открываем этот текст в любом редакторе, который умеет экспортировать html. Для примера возьмём dillinger.io.
![Описание проекта на Dillinger Описание проекта на Dillinger](/ablogs/file715/dillinger.png)
Экспортируем в обычный html. Мы, конечно же, можем экспортировать в стилизованный html, но, допустим, нас не устраивает результат.
![Экспорт в HTML Экспорт в HTML](/ablogs/file716/dillinger-export.png)
Полученный результат.
Ищем подходящий стиль на сайтах Markdown CSS или Markedstyle.
Допустим, нам понравился Modest. Первая же ссылка ведёт на GitHub, откуда можно скопировать стиль.
Копируем содержимое css-файла и вставляем между тегов <style></style> сгенерированного ранее html.
Получаем такую страницу. При желании, можно заменить стиль на любой другой.
Напоследок, выкладываю файл этой же статьи в Markdown.
article-source.md
В статье даётся быстрый старт для начинающих, а также множество инструментов для упрощения повседневной работы.
Применение
Markdown может быть использован для ведения ежедневных заметок, блогов, в мессенджерах, для описания проектов, для составления презентаций и даже как основа для целого сайта.
Синтаксис
Заголовки
В Markdown, как и в HTML, есть 6 уровней заголовков. В html они обозначаются так:
- <h1>Заголовок первого уровня</h1>
- <h2>Заголовок второго уровня</h2>
В Markdown — при помощи символа решетки. Количество решеток обозначает уровень заголовка:
- # Заголовок первого уровня
- ## Заголовок второго уровня
- ### Заголовок третьего уровня
- #### Заголовок четвёртого уровня
- ##### Заголовок пятого уровня
- ###### Заголовок шестого уровня
Форматирование
_курсив_ курсив
**жирный** жирный
~~зачёркнутый~~ зачёркнутый
`моноширинный` моноширинный
- > цитата
- > вторая строка цитаты
вторая строка цитаты
Разделитель:
---
> Это цитата с _курсивным_ **жирно-_курсивным_** `моноширинным` текстом
Это цитата с курсивным жирно-курсивным моноширинным текстом
Ссылки и изображения
Формат ссылки: [описание](ссылка)
[Домашняя страница](http://annimon.com/) Домашняя страница
В описании ссылки можно применять форматирование текста:
[_Домашняя_страница](http://annimon.com/) Домашняя страница
Формат картинки такой же, только в начало добавляется восклицательный знак: ![описание](ссылка на изображение)
![логотип Markdown логотип Markdown](/ablogs/file718/markdown-logo.png)
Попробуйте теперь сделать картинку-ссылку.
Ответ
Списки
Списки вы наверняка применяете и в текстовых файлах, в Markdown это стандарт:
- первый пункт
- второй пункт
- третий пункт
Нумерованный список:
1. Первый пункт.
2. Второй пункт.
Вложенный список:
- Первый пункт
- Первый подпункт
- Второй подпункт
- Третий уровень вложенности
- Второй пункт
1. Подпункт 1
2. Подпункт 2
Код
- ```java
- class Main {
- public static void main(String[] args) {
- }
- }
- ```
- class Main {
- public static void main(String[] args) {
- }
- }
- ```javascript
- alert('Example');
- ```
- alert('Example');
HTML
Кроме всего перечисленного, Markdown поддерживает html-теги. Так что, если чего-то не хватает, например, надстрочного текста, можно использовать html-теги.
x<sup>2</sup> x2
Онлайн-редакторы
- https://jbt.github.io/markdown-editor/ простой редактор. Для небольших текстов формирует ссылку, вот пример.
- http://dillinger.io/ - редактор для писателей. Отличный дизайн, подсчет количества слов, возможность экспорта в html, pdf, а также на популярные сайты и облачные хранилища.
- https://stackedit.io/editor - помимо основных функций редактора умеет конвертировать HTML в md. Есть панель для быстрого форматирования, публикация на множество ресурсов, поддержка LaTeX, гибкие настройки.
- https://write-box.appspot.com/ - ещё один редактор для писателей с простым и лаконичным дизайном.
Редакторы для ПК
- CuteMarkEd - кроссплатформенный редактор с открытыми исходниками и возможностью создания презентаций. Именно в нём сейчас и пишется эта статья
![:)](/files/smiles/99.gif)
![cutemarked.png cutemarked.png](/ablogs/file714/cutemarked.png)
- MdCharm - ничуть не уступает остальным редакторам. Из достоинств: возможность установки собственных CSS-стилей, открытие папки как проекта, вкладки.
Плагины для IDE и других редакторов
- Markdown support для IntelliJ IDEA
- Markdown support для NetBeans IDE
- Markdown preview для Sublime Text 2/3
- markdown-preview, markdown-preview-plus для Atom
Прочие инструменты
Редакторы презентаций
- Marp - Markdown Presentation Writer — кроссплатформенный редактор презентаций.
![marp.png marp.png](/ablogs/file719/marp.png)
- Madoko — онлайн-редактор презентаций.
- remark — JavaScript-библиотека для создания презентаций. Использует Markdown.
Редакторы заметок
- Simplenote - сервис для заметок с поддержкой Markdown и синхронизацией. Есть веб-клиент, клиент для ПК и Android.
- NoticEditor - оффлайновый иерархический редактор заметок.
Генераторы сайтов
- Jekyll - используется в GitHub Pages. Блог, страница портфолио, описание проекта, всё это можно сгенерировать из Markdown-файла и получить красивую веб-страничку.
- Hexo - генератор блогов на Node.js.
![hexo.png hexo.png](/ablogs/file717/hexo.png)
- GitBook - пригодится для книг или документации. Особенность GitBook в том, что для открытых проектов они предоставляют место на своём сервере. Отличный вариант для размещения (и продвижения) своих проектов. В свободное время можно что-нибудь почитать в галерее.
- StaticGen - огромный список статических генераторов сайтов.
Ковертеры в другие форматы
- Pandoc - универсальная программа для конвертирования различных текстовых форматов.
- md2bb - настраиваемый конвертер из Markdown в BB-code.
- Онлайн конвертер Markdown в PDF
Стили CSS
- Markdown CSS
- Markedstyle
Практика. Быстрое создание страницы описания проекта
Предположим, что у нас есть проект и очень мало времени на то, чтобы сделать страницу с его описанием. Обычный txt нас не устраивает, мы хотим красивую html-страницу. Набирать вручную html-теги слишком долго, подбирать цвета и стили для текста, тем более. Что делать?
Начинаем с самого текста.
- # Мой крутейший проект
- Свершилось! Представляю Вашему вниманию свой **крутейший проект**. С его помощью наконец-то решается задача, которую прежде тяжело было решить. Больше не нужно покупать десятки дорогих решений, которые затрагивают проблему лишь частично. Всё это в прошлом.
- ## Возможности
- Мой крутейший проект имеет множество восхитительных функций, вот они:
- - Быстрое решение проблемы.
- - Возможность запуска на любой платформе.
- - Для решения задачи вам не понадобится мощное железо, программа работает даже на тетрисе!!
- - Интуитивно понятный интерфейс.
- - И всё это **бесплатно**!
- ## Как это работает
- Всё очень просто. Вам достаточно установить программу на своё устройство и запустить. Она сама сделает всё за вас и уведомит по окончанию работы. Вы также можете нажать `X` для того, чтобы завершить программу. При следующем запуске, она продолжит свою работу.
Далее, открываем этот текст в любом редакторе, который умеет экспортировать html. Для примера возьмём dillinger.io.
![Описание проекта на Dillinger Описание проекта на Dillinger](/ablogs/file715/dillinger.png)
Экспортируем в обычный html. Мы, конечно же, можем экспортировать в стилизованный html, но, допустим, нас не устраивает результат.
![Экспорт в HTML Экспорт в HTML](/ablogs/file716/dillinger-export.png)
Полученный результат.
Ищем подходящий стиль на сайтах Markdown CSS или Markedstyle.
Допустим, нам понравился Modest. Первая же ссылка ведёт на GitHub, откуда можно скопировать стиль.
Копируем содержимое css-файла и вставляем между тегов <style></style> сгенерированного ранее html.
Получаем такую страницу. При желании, можно заменить стиль на любой другой.
Напоследок, выкладываю файл этой же статьи в Markdown.
![](/forum/img/unknown.png)