Markdown для повседневной жизни

от
Прочее   markdown

Markdown - простой и удобный язык разметки. Благодаря его популярности, существует множество программ и сервисов, которые так или иначе с ним взаимодействуют. Практически каждый README на GitHub использует Markdown, также он используется на многих сайтах для написания статей или даже книг.

В статье даётся быстрый старт для начинающих, а также множество инструментов для упрощения повседневной работы.

Применение
Markdown может быть использован для ведения ежедневных заметок, блогов, в мессенджерах, для описания проектов, для составления презентаций и даже как основа для целого сайта.


Синтаксис
Заголовки
В Markdown, как и в HTML, есть 6 уровней заголовков. В html они обозначаются так:
  1. <h1>Заголовок первого уровня</h1>
  2. <h2>Заголовок второго уровня</h2>

В Markdown — при помощи символа решетки. Количество решеток обозначает уровень заголовка:
  1. # Заголовок первого уровня
  2. ## Заголовок второго уровня
  3. ### Заголовок третьего уровня
  4. #### Заголовок четвёртого уровня
  5. ##### Заголовок пятого уровня
  6. ###### Заголовок шестого уровня


Форматирование
_курсив_ курсив

**жирный** жирный

~~зачёркнутый~~ зачёркнутый

`моноширинный` моноширинный

  1. > цитата
  2. > вторая строка цитаты
цитата
вторая строка цитаты

Разделитель:
---


> Это цитата с _курсивным_ **жирно-_курсивным_** `моноширинным` текстом
Это цитата с курсивным жирно-курсивным моноширинным текстом

Ссылки и изображения
Формат ссылки: [описание](ссылка)

[Домашняя страница](http://annimon.com/) Домашняя страница

В описании ссылки можно применять форматирование текста:

[_Домашняя_страница](http://annimon.com/) Домашняя страница

Формат картинки такой же, только в начало добавляется восклицательный знак: ![описание](ссылка на изображение)

логотип Markdown

Попробуйте теперь сделать картинку-ссылку.
Ответ


Списки
Списки вы наверняка применяете и в текстовых файлах, в Markdown это стандарт:

- первый пункт
- второй пункт
- третий пункт

Нумерованный список:

1. Первый пункт.
2. Второй пункт.

Вложенный список:

- Первый пункт
   - Первый подпункт
   - Второй подпункт
     - Третий уровень вложенности
- Второй пункт
   1. Подпункт 1
   2. Подпункт 2


Код
  1. ```java
  2. class Main {
  3.  
  4.   public static void main(String[] args) {
  5.   }
  6. }
  7. ```
  1. class Main {
  2.  
  3.   public static void main(String[] args) {
  4.   }
  5. }

  1. ```javascript
  2. alert('Example');
  3. ```
  1. 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 - кроссплатформенный редактор с открытыми исходниками и возможностью создания презентаций. Именно в нём сейчас и пишется эта статья :)
   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
  - Madoko — онлайн-редактор презентаций.
  - remark — JavaScript-библиотека для создания презентаций. Использует Markdown.


Редакторы заметок
  - Simplenote - сервис для заметок с поддержкой Markdown и синхронизацией. Есть веб-клиент, клиент для ПК и Android.
  - NoticEditor - оффлайновый иерархический редактор заметок.


Генераторы сайтов
  - Jekyll - используется в GitHub Pages. Блог, страница портфолио, описание проекта, всё это можно сгенерировать из Markdown-файла и получить красивую веб-страничку.
  - Hexo - генератор блогов на Node.js.
   hexo.png
  - GitBook - пригодится для книг или документации. Особенность GitBook в том, что для открытых проектов они предоставляют место на своём сервере. Отличный вариант для размещения (и продвижения) своих проектов. В свободное время можно что-нибудь почитать в галерее.
  - StaticGen - огромный список статических генераторов сайтов.


Ковертеры в другие форматы
  - Pandoc - универсальная программа для конвертирования различных текстовых форматов.
  - md2bb - настраиваемый конвертер из Markdown в BB-code.
  - Онлайн конвертер Markdown в PDF


Стили CSS
  - Markdown CSS
  - Markedstyle


Практика. Быстрое создание страницы описания проекта
Предположим, что у нас есть проект и очень мало времени на то, чтобы сделать страницу с его описанием. Обычный txt нас не устраивает, мы хотим красивую html-страницу. Набирать вручную html-теги слишком долго, подбирать цвета и стили для текста, тем более. Что делать?

Начинаем с самого текста.

  1. # Мой крутейший проект
  2.  
  3. Свершилось! Представляю Вашему вниманию свой **крутейший проект**. С его помощью наконец-то решается задача, которую прежде тяжело было решить. Больше не нужно покупать десятки дорогих решений, которые затрагивают проблему лишь частично. Всё это в прошлом.
  4.  
  5. ## Возможности
  6.  
  7.  Мой крутейший проект имеет множество восхитительных функций, вот они:
  8.  
  9.  - Быстрое решение проблемы.
  10.  - Возможность запуска на любой платформе.
  11.  - Для решения задачи вам не понадобится мощное железо, программа работает даже на тетрисе!!
  12.  - Интуитивно понятный интерфейс.
  13.  - И всё это **бесплатно**!
  14.  
  15. ## Как это работает
  16.  
  17. Всё очень просто. Вам достаточно установить программу на своё устройство и запустить. Она сама сделает всё за вас и уведомит по окончанию работы. Вы также можете нажать `X` для того, чтобы завершить программу. При следующем запуске, она продолжит свою работу.

Далее, открываем этот текст в любом редакторе, который умеет экспортировать html. Для примера возьмём dillinger.io.

Описание проекта на Dillinger

Экспортируем в обычный html. Мы, конечно же, можем экспортировать в стилизованный html, но, допустим, нас не устраивает результат.

Экспорт в HTML

Полученный результат.

Ищем подходящий стиль на сайтах Markdown CSS или Markedstyle.

Допустим, нам понравился Modest. Первая же ссылка ведёт на GitHub, откуда можно скопировать стиль.

Копируем содержимое css-файла и вставляем между тегов <style></style> сгенерированного ранее html.

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

Напоследок, выкладываю файл этой же статьи в Markdown.
article-source.md
+11   13   2
1201

  © aNNiMON (Melnik Software)
Онлайн: 28 (1/27)
 
Яндекс.Метрика