Markdown
Содержание:
Images from the Clipboard
You can also paste images from the clipboard into this dialog with . As with the Web URL if you open the dialog and an image is on the clipboard, the image is pre-selected in the previewer and if you navigate away and re-activate the window with an image on the clipboard the image is automatically picked up and displayed.
Pasted images have to be saved to disk first so the dialog looks slightly different with a Save to Disk button choice:

When you click it the image is saved to disk first. Then once the file exists the image’s new file is shown in the the file Textbox.
When you click OK the file is embedded into the page.
Сложности Markdown
Если нужно больше возможностей, чем предлагают Markdown или HTML, многие инструменты используют другие языки шаблонов, такие как Liquid или CoffeeScript. Такие языки обработки (например, облегченный JavaScript) заполняют пробелы в Markdown и предоставляют возможность создавать включения, условные атрибуты, условный текст и многое другое.
Например, используя Jekyll, мы получаем доступ ко многим расширенным скриптовым функциям. Можно использовать переменные для циклов, сортировки и множества других функций. Для понимания того, как получить функциональность DITA для Jekyll, см. Jekyll versus DITA. Там затрагивается следующее:
- переменные и условная обработка;
- переиспользование частей содержимого (conref);
- составление оглавления;
- просмотр содержимого;
- создание PDF-файлов;
- создание ссылок.
Embed Images as base64 embedded Image Content
Finally you can also optionally embed the image as base64 content directly into the Markdown document. This can be useful in some situations where you want to have a self contained HTML document that doesn’t have external dependencies.
Markdown Monster creates a reference image link in the page which looks like this:
Here's an image:![]More text here......: data:image/png;base64,iVBORw0KGgoAAAANSUhEke02C1MyA29UWKgPA...RS12D==
The image itself is marked with a reference ID which is then embedded at the bottom of the document with the actual base64 encoded image data.
While this can be useful be aware that this image data is going to be very large and very ugly. It’s added at the very bottom of the document so it mostly stays out of the way, but it makes the Markdown document — and the resulting HTML page huge. Use this feature only if you don’t have no other way to link image content, otherwise it’s almost always better to embed links to external image files or URLs.
This is feature that’s been requested by a few people over time and it was easy enough to add, but I still would recommend thinking carefully of whether you want to use this. So much so that you have to click this checkbox — the base64 checkbox is not a tab stop so that it doesn’t easily get set by accident.
Другие генераторы статических сайтов
Надо сказать, что Octopress не единственный инструмент для генерации статического контента
Хотелось бы остановить твое внимание еще на двух инструментах: Poole (bitbucket.org/obensonne/poole) и BlazeBlogger (blaze.blackened.cz)
Poole — генератор статических сайтов, использующий Markdown. Он написан на Python и для своей работы ничего, кроме него, не требует. Работать с ним очень легко: ты создаешь содержимое веб-страниц с помощью Markdown — и Poole превращает их в простой и красивый сайт, снабженный навигационным меню. Принцип работы несложен: программа берет файлы из директории input и копирует их в директорию output, при этом все файлы с расширением md, mkd, mdown или markdown конвертируются в HTML с page.html в качестве каркаса. Если ты хочешь заменить внешний вид сайта, то необходимо будет подредактировать файлы page.html и input/poole.css. Чтобы обновить, изменить, добавить контент, необходимо выполнить:
После чего Poole заново сгенерирует твой сайт.
Windows
MarkdownPad (bit.ly/o3hudG) — один из наиболее популярных редакторов под Windows для работы с Markdown-документами. Мегаполезной фичей является мгновенный предпросмотр (Live Preview) — как только ты что-то меняешь в тексте, в правой части окна мгновенно применяются внесенные изменения. Имеется поддержка горячих клавиш, возможность изменить таблицу стилей CSS непосредственно внутри приложения. Более простой и элегантный инструмент — WriteMonkey (bit.ly/UmIVx). Он менее функционален, но благодаря полноэкранному режиму и возможности фокуса на конкретном участке текста (клавиша F6) более удобен для писателей и блоггеров.
MarkdownPad — возможно, самый функциональный редактор для Windows
Why Use Markdown?
You might be wondering why people use Markdown instead of a WYSIWYG editor. Why write with Markdown when you can press buttons in an interface to format your text? As it turns out, there are a couple different reasons why people use Markdown instead of WYSIWYG editors.
-
Markdown is portable. Files containing Markdown-formatted text can be opened using virtually any application. If you decide you don’t like the Markdown application you’re currently using, you can import your Markdown files into another Markdown application. That’s in stark contrast to word processing applications like Microsoft Word that lock your content into a proprietary file format.
-
Markdown is platform independent. You can create Markdown-formatted text on any device running any operating system.
-
Markdown is future proof. Even if the application you’re using stops working at some point in the future, you’ll still be able to read your Markdown-formatted text using a text editing application. This is an important consideration when it comes to books, university theses, and other milestone documents that need to be preserved indefinitely.
-
Markdown is everywhere. Websites like Reddit and GitHub support Markdown, and lots of desktop and web-based applications support it.
Реализации Markdown
- C#
- C
- ColdFusion
- Common Lisp
- Go
- Haskell
- Java
- JavaScript
- Kotlin
- Lua
- newLISP
- Perl
- PHP
- Python
- Ruby
- Scala
- Tcl
Расширения
Приведённые ниже приложения реализуют Markdown, расширяя его синтаксис дополнительной функциональностью:
- MultiMarkdown (C)
- Text::MultiMarkdown (Perl) модуль, реализующий расширение MultiMarkdown
- PHP Markdown Extra
- python-markdown2 (Поддерживает некоторые расширения PHP Markdown)
- python-markdown (Имеет систему расширений для добавления нового синтаксиса)
- Markout (Java)
- Pegdown (Java)
- Maruku (Ruby)
- Pandoc (Haskell)
Конвертеры
- из HTML в Markdown
- html2text.py (написано на Python)
- Markdownify (на PHP)
- Make.text — букмарклет, преобразующий любую веб-страницу в Markdown
- XHTML-to-Markdown XSLT (XSLT-таблица стилей, работает только с XHTML)
- Pandoc — написанная на Haskell библиотека по преобразованию различных форматов, поддерживает несколько диалектов Markdown ( — диалект от pandoc, — оригинальный Markdown без расширений, — диалект от PHP, — диалект от github) может преобразовывать из и в Markdown, HTML, reStructuredText, LaTeX, и другие.
- Другие форматы в Markdown
- odt2txt (написанный на Python скрипт для преобразования файлов из формата OpenDocument в Markdown)
- word_markdown_macro (макрос Microsoft Word, преобразующий некоторую часть форматирования Word в Markdown)
Веб-приложения, использующие Markdown
-
Вики:
- DokuWiki (с помощью плагина)
- ikiwiki
- Oddmuse
- PmWiki (с помощью плагина)
-
Блоги:
- Tumblr — изначально отключён, но можно использовать, включив в настройках.
- scriptogr.am
-
CMS:
- Drupal — content-фильтр Markdown
- Magento — с помощью модуля
- Plone — «родная» поддержка в Plone 3
- TYPO3 — с помощью плагина af_markdown
- RadiantCMS — один из видов разметки, доступный «из коробки»
- HTMLy — по умолчанию используется для хранения контента (вместо баз данных)
-
Веб-фреймворки:
- Ruby on Rails — требуется установка BlueCloth, Maruku
- Yii — виджет CMarkdown, входит в стандартную поставку фреймворка
- Webasyst — входит в стандартную поставку PHP-фреймфорка в виде плагина к бесплатному приложению «Блог»
- Symfony — требуется установка бандла KnpMarkdownBundle
- Социальные приложения:
- Discord — приложение для публичного общения.
- Steemit — социальная сеть, основанная на блокчейне.
- Telegram — популярный кросс-платформенный мессенджер.
- WhatsApp — популярный кросс-платформенный мессенджер.
История
Первоначально создан в 2004 году Джоном Грубером (англ. John Gruber) и Аароном Шварцем. Многие идеи языка были позаимствованы из существующих соглашений по разметке текста в электронных письмах. Реализации языка Markdown преобразуют текст в формате Markdown в валидный, XHTML и заменяют левые угловые скобки («<») и амперсанды («&») на соответствующие коды сущностей. Первой реализацией Markdown стала написанная Грубером реализация на Perl, однако спустя некоторое время появилось множество реализаций от сторонних разработчиков (см. ). Реализация на Perl распространяется по лицензии типа BSD. Реализации Markdown на различных языках программирования включены (или доступны в качестве плагина) во многие системы управления содержимым.
Как с ним работать?
Пример
-
Напишем заголовок — название нашего проекта.
Основной и самый большой по размеру заголовок создается с помощью оператора решетка «#» и затем пишется название. В нашем случае:
-
Затем напишем чуть меньший заголовок, и напишем «Project Information». Меньший заголовок ставится большим количеством «#»:
И затем напишем информацию о проекте.
-
Вставим ссылки на свои статьи. Это делается очень просто, а если вы используете Haroopad то достаточно пикнуть шпаргалку, и шаблон вставится сам. Синтаксис таков: «(url)»;
-
Вставим бейджики. А вот тут остановимся поподробнее.
Во-первых давайте оформим их в виде таблицы, для красоты. Будет 2 колонки и 2 столбца. Синтаксис выглядеть это будет примерно так:
А результат будет таким:
Дальше, вставим гиперссылки на наши бейджики, но где их взять? Я показывал в предыдущей статье где взять Codecov, но какой взять не упомянул. Так как у нас Markdown файл, то и надо нам тоже Markdown Badge:
Просто копируем его и вставляем в колонку в нашем Markdown. Но не забываем, что Codecov появился в ветке JaCoCo, но не в master, поэтому придется подправить ручками. Travis CI Badge берем прямо напротив названия проекта, там где log билда:
Пикаем на бейджик, и тут всплывает окно настроек:
Выбираем однозначно Markdown, а ветку, какую вам нужно. Я буду делать README.md для двух веток, и они чуть будут отличатся, ведь в ветке master еще я не внедрял Codecov.
-
Напишем информацию как делать import или clone этого проекта. Как это делать, я объяснять не буду, но почитать сможете в моем README.md. Напишем о технологиях, которые мы использовали у себя в проекте, поместив ссылки на них. Все же это обучающий проект. Ну и напишем контактную информацию.
-
Наш Markdown готов. Осталось добавить его в наш проект и все готово. Но не все сразу! Откроем нашу IDEA, и в Plugins проверяем что бы у вас была поддержка Markdown Support:
У меня Ultimate IDEA поэтому у меня все есть, у Вас плагин по умолчанию может не стоять, но при создании файла с расширением md должно вылезти предложение его скачать. Качайте, и перезапустите вашу IDEA.
-
После импортирования написанного нами Markdown, открываем его через IDEA, и редактируем если надо. Вот так это выглядит через IDEA:
Теперь, при нажатии на бейджик мы можем прыгать сразу на сборку проекта, и смотреть что у нас там и как.
-
Сделаю тоже самое для ветки JaCoCo, дабы продемонстрировать Codecov Badge, ведь в нем у нас нету еще README.md. В результате у нас теперь два бейджика:
Codecov показывает процент покрытия кода, причем он также может перенаправлять нас на страницу Codecov и показывать детальный отчет о покрытии кода.
Полезные ссылки
Подведем итоги за цикл моих статей
- И в этой статье мы разобрали что такое Markdown, зачем он нужен и как эфективно его использовать.
Embedding a Markdown Image Link
Markdown is a text format so naturally you can type in the Markdown representation of an image using to put an image reference directly into the editor.
Some typical image markup may look like this:
Here's an image of a drag racer in action:!(Dragster.jpg)Move along.
If the image exists in a local and linkable folder the and you know the URL or file you’re linking to this bit of simple syntax is often the quickest way to get an image into the page.
Markdown also supports raw HTML syntax, so if you need to adorn your image with additional tags or styles you can do that as well:
The following HTML is also legal Markdown:
<img src="markdownmonstericon.png" alt="Markdown Monster icon" style="float: left; margin-right: 10px;" />
Note that how well this works and the syntax used may depend on where this markdown or HTML will end up getting rendered. For example, GitHub doesn’t allow style information and instead allows a few attributes like , , to provide some of these feature with special syntax.
If you use the HTML output created by Markdown Monster however the raw HTML passes through and you’ll see the styled content as shown above.
Абзацы, заголовки, цитаты в Markdown
Абзацы в Markdown — это просто несколько идущих подряд строк текста. Абзацы разделяются одной или более пустых строк. (Пустая строка — это любая строка, которая выглядит пустой. Строка, содержащая только пробелы и табуляторы считается пустой).
Markdown позволяет использовать два стиля заголовков: Setext и atx. Стиль Setext для заголовков <h1> и <h2> создаётся с помощью «подчёркивания» символами «=» и «-» соответственно. Для создания заголовков в стиле atx вставляются от одного до шести символов «#» в начале строки. Количество символов «#» определяет уровень заголовка.
Цитаты предваряются символами «>».
Markdown:
Заголовок первого уровня
========================
Заголовок второго уровня
————————
Настал черёд, мои друзья, поговорить
о королях… Это обычный
параграф.
Быстрая коричневая лиса перепрыгнула
через спину ленивой собаки.
### Заголовок 3
> Это цитата
>
> Это второй параграф в цитате
>
> ## Это заголовок второго уровня в цитате.
|
1 |
Заголовок первого уровня ======================== Заголовок второго уровня ———————— Настал черёд, мои друзья, поговорить о королях… Это обычный параграф. Быстрая коричневая лиса перепрыгнула через спину ленивой собаки. ### Заголовок 3 > Это цитата > > Это второй параграф в цитате > > ## Это заголовок второго уровня в цитате. |
Результат:
XHTML
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<p>Настал черёд, мои друзья, поговорить
о королях… Это обычный
параграф.</p>
<p>Быстрая коричневая лиса перепрыгнула
через спину ленивой собаки.</p>
<h3>Заголовок 3</h3>
<blockquote>
<p>Это цитата</p>
<p>Это второй параграф в цитате</p>
<h2>Это заголовок второго уровня в цитате.</h2>
</blockquote>
|
1 |
<h1>Заголовок первого уровня</h1> <h2>Заголовок второго уровня</h2> <p>Настал черёд, мои друзья, поговорить о королях… Это обычный параграф.</p> <p>Быстрая коричневая лиса перепрыгнула через спину ленивой собаки.</p> <h3>Заголовок 3</h3> <p>Это цитата</p> <p>Это второй параграф в цитате</p> <h2>Это заголовок второго уровня в цитате.</h2> </blockquote> |
Comparing Image Size for jpg and png: Manual but a good Idea!
In the future it might be nice to also compare sizes of images created as PNG and JPG and pick the smaller of the two. For a number of things PNGs are preferrable both in size and quality (since they’re lossless), but not quite sure how to best provide UI for this since the optimization operations are quite slow and would hold up the workflow. Currently I often save images both as PNG and JPG and pick the one that’s smaller for my document. If you think this is nit-picking — the size differences between formats can often be quite drastic and for large files like Weblog post banner files that are often quite large it can mean the diffence between an 80k image or 500k image. For big images in particular it pays to compare image sizes!
My manual workflow for this is:
- Paste or embed an image with the Image dialog
- Save as Png
- Save as Jpg
- Right click on the doc tab, Open Folder
- Compare the file size of both png and jpg files
- Delete the larger one
- Change the image file extension in the document if necessary
Manual — yes. Worth it for large images: Definitely if you can save 100k or often much more for every image load on your connection!
Tables
To add a table, use three or more hyphens () to create each column’s header, and use pipes () to separate each column. You can optionally add pipes on either end of the table.
The rendered output looks like this:
| Syntax | Description |
|---|---|
| Header | Title |
| Paragraph | Text |
Cell widths can vary, as shown below. The rendered output will look the same.
Tip: Creating tables with hyphens and pipes can be tedious. To speed up the process, try using the Markdown Tables Generator. Build a table using the graphical interface, and then copy the generated Markdown-formatted text into your file.
Alignment
You can align text in the columns to the left, right, or center by adding a colon () to the left, right, or on both side of the hyphens within the header row.
The rendered output looks like this:
| Syntax | Description | Test Text |
|---|---|---|
| Header | Title | Here’s this |
| Paragraph | Text | And more |
Formatting Text in Tables
You can format the text within tables. For example, you can add , (words or phrases in backticks () only, not ), and .
You can’t add headings, blockquotes, lists, horizontal rules, images, or HTML tags.
Код в Markdown
В обычном абзаце вы можете вставить тег
<code></code>. Для этого вам нужно обернуть текст символом «
`» (он расположен на одной кнопке с буквой «ё» на клавиатуре). Символы «&», «<», «>» автоматически преобразуются в коды символов HTML.
Markdown:
Я строго не рекомендую использовать теги `<blink>`.
Я бы хотел, чтобы SmartPants использовали `—`
вместо `—`.
|
1 |
Я строго не рекомендую использовать теги `<blink>`. Я бы хотел, чтобы SmartPants использовали `—` вместо `—`. |
Результат:
XHTML
<p>Я строго не рекомендую использовать теги <code><blink></code>.</p>
<p>Я бы хотел, чтобы SmartPants использовали <code>&mdash;</code>
вместо <code>&#8212;</code>.</p>
|
1 |
<p>Я строго не рекомендую использовать теги <code><blink></code>.</p> <p>Я бы хотел, чтобы SmartPants использовали <code>&mdash;</code> вместо <code>&#8212;</code>.</p> |
Чтобы указать целый блок предварительно отформатированного кода, сделайте отступ каждой строки в четыре пробела или один табулятор. Символы «&», «<» и «>» будут преобразованы в HTML-коды символов автоматически:
Если вы хотите, чтобы ваша страница проходила
проверку на XHTML 1.0 Strict, вам нужно добавить
теги абзацев в ваши блочные цитаты:
<blockquote>
<p>Пример.</p>
</blockquote>
|
1 |
Если вы хотите, чтобы ваша страница проходила проверку на XHTML 1.0 Strict, вам нужно добавить теги абзацев в ваши блочные цитаты: <blockquote> <p>Пример.</p> </blockquote> |
Результат:
XHTML
<p>Если вы хотите, чтобы ваша страница проходила
проверку на XHTML 1.0 Strict, вам нужно добавить
теги абзацев в ваши блочные цитаты:</p>
<pre><code><blockquote&gt;
&amp;lt;p>Пример.</p>
</blockquote>
</code></pre>
|
1 |
<p>Если вы хотите, чтобы ваша страница проходила проверку на XHTML 1.0 Strict, вам нужно добавить теги абзацев в ваши блочные цитаты:</p> <pre><code><blockquote> <p>Пример.</p> </code></pre> |
—
區段元素
Markdown支援兩種形式的連結語法:行內和參考兩種形式。
不管是哪一種,連結的文字都是用 來標記。
要建立一個行內形式的連結,只要在方塊括號後面馬上接著括號並插入網址連結即可,如果你還想要加上連結的title文字,只要在網址後面,用雙引號把title文字包起來即可,例如:
會產生:
如果你是要連結到同樣主機的資源,你可以使用相對路徑:
參考形式的連結使用另外一個方括號接在連結文字的括號後面,而在第二個方括號裡面要填入用以辨識連結的標籤:
你也可以選擇性地在兩個方括號中間加上空白:
接著,在文件的任意處,你可以把這個標籤的連結內容定義出來:
連結定義的形式為:
- 方括號,裡面輸入連結的辨識用標籤
- 接著一個冒號
- 接著一個以上的空白或tab
- 接著連結的網址
- 選擇性地接著title內容,可以用單引號、雙引號或是括弧包著
下面這三種連結的定義都是相同:
請注意:有一個已知的問題是Markdown.pl 1.0.1會忽略單引號包起來的連結title。
連結網址也可以用角括號包起來:
你也可以把title屬性放到下一行,也可以加一些縮排,網址太長的話,這樣會比較好看:
網址定義只有在產生連結的時候用到,並不會直接出現在文件之中。
連結辨識標籤可以有字母、數字、空白和標點符號,但是並不區分大小寫,因此下面兩個連結是一樣的:
預設的連結標籤功能讓你可以省略指定連結標籤,這種情形下,連結標籤和連結文字會視為相同,要用預設連結標籤只要在連結文字後面加上一個空的方括號,如果你要讓“Google”連結到google.com,你可以簡化成:
然後定義連結內容:
由於連結文字可能包含空白,所以這種簡化的標籤內也可以包含多個文字:
然後接著定義連結:
連結的定義可以放在文件中的任何一個地方,我比較偏好直接放在連結出現段落的後面,你也可以把它放在文件最後面,就像是註解一樣。
下面是一個參考式連結的範例:
如果改成用連結名稱的方式寫:
上面兩種寫法都會產生下面的HTML。
下面是用行內形式寫的同樣一段內容的Markdown文件,提供作為比較之用:
參考式的連結其實重點不在於它比較好寫,而是它比較好讀,比較一下上面的範例,使用參考式的文章本身只有81個字元,但是用行內形式的連結卻會增加到176個字元,如果是用純HTML格式來寫,會有234個字元,在HTML格式中,標籤比文字還要多。
使用Markdown的參考式連結,可以讓文件更像是瀏覽器最後產生的結果,讓你可以把一些標記相關的資訊移到段落文字之外,你就可以增加連結而不讓文章的閱讀感覺被打斷。
強調
Markdown使用星號()和底線()作為標記強調字詞的符號,被或包圍的字詞會被轉成用標籤包圍,用兩個或包起來的話,則會被轉成,例如:
會轉成:
你可以隨便用你喜歡的樣式,唯一的限制是,你用什麼符號開啟標籤,就要用什麼符號結束。
強調也可以直接插在文字中間:
但是如果你的 和 兩邊都有空白的話,它們就只會被當成普通的符號。
如果要在文字前後直接插入普通的星號或底線,你可以用反斜線:
程式碼
如果要標記一小段行內程式碼,你可以用反引號把它包起來(),例如:
會產生:
如果要在程式碼區段內插入反引號,你可以用多個反引號來開啟和結束程式碼區段:
這段語法會產生:
程式碼區段的起始和結束端都可以放入一個空白,起始端後面一個,結束端前面一個,這樣你就可以在區段的一開始就插入反引號:
會產生:
在程式碼區段內,和角括號都會被轉成HTML實體,這樣會比較容易插入HTML原始碼,Markdown會把下面這段:
轉為:
你也可以這樣寫:
以產生:
圖片
很明顯地,要在純文字應用中設計一個「自然」的語法來插入圖片是有一定難度的。
Markdown使用一種和連結很相似的語法來標記圖片,同樣也允許兩種樣式:行內和參考。
行內圖片的語法看起來像是:
詳細敘述如下:
- 一個驚嘆號
- 接著一個方括號,裡面放上圖片的替代文字
- 接著一個普通括號,裡面放上圖片的網址,最後還可以用引號包住並加上 選擇性的’title’文字。
參考式的圖片語法則長得像這樣:
「id」是圖片參考的名稱,圖片參考的定義方式則和連結參考一樣:
到目前為止, Markdown還沒有辦法指定圖片的寬高,如果你需要的話,你可以使用普通的標籤。
What’s next? Storage Mechanisms
There’s still more that can be done in this space — one thing that has already come up and has been addressed with addins today — is the ability to save images to other storage spaces like Azure Blob Storage, or Imgur or some other storage mechanism like DropBox or OneDrive.
I’ve looked at this a few times and backed out of implementation because the feature set of MM is still in flux — there are a lot of paths that lead to saving images in MM and the way this works differs quite considerably in places. To build a consolidated image saving mechanism will require a fair bit of abstraction and some internal UI logic (for picking save location etc.) that makes this trickier than just a simple provider API.
Today if you want to save and embed images using a custom store you have to create an Addin to make it happen. One such addin exists in the form of the Save Image to Azure Blob Storage Addin (you can load it from Tools -> Addin Manager:

This is a full featured addin that duplicates some of the functionality in the Embed Image Dialog so this is not trivial to create. However, to create one for other storage providers or image services, they could probably copy and modify this existing addin and hook up the appropriate API functionality.
This will get easier in the future as we figure out a better way to make providers more generic, either via a direct image saving Provider API that can be extended and plugged into, or via single addin that provides upload capabilities to various providers.
I’m hoping to hear from you fine people, to see what’s important you in the way of providers, and hopefully can solicit some participation in creating extensions that can interface with other services. The code for both Markdown Monster and all the Addins is available on Github and open for comments and discussions.
Backslash Escapes
When you have characters that are parsed as Markdown that you want to show as written, you can escape the character with the backslash ().
-
Backslashes before non-markup characters are shown as backslash characters.
-
Escaped characters are treated as regular characters. Their usual meaning in Markdown syntax is ignored.
-
Backslash escapes do not work in fenced code blocks, inline code spans, or autolinks.
Here are a few examples of backslash escapes:
\*not emphasis*
\`not an inline code span`
1\. not an ordered list
\* not an unordered list
\# not a heading
\This is not a backslash escape — the escaped character is not a markup character.
區塊元素
段落和換行
一個段落是由一個以上相連接的行句組成,而一個以上的空行則會切分出不同的段落(空行的定義是顯示上看起來像是空行,便會被視為空行。比方說,若某一行只包含空白和tab,則該行也會被視為空行),一般的段落不需要用空白或斷行縮排。
「一個以上相連接的行句組成」這句話其實暗示了Markdown允許段落內的強迫斷行,這個特性和其他大部分的text-to-HTML格式不一樣(包括 MovableType的「Convert Line Breaks」選項),其他的格式會把每個斷行都轉成標籤。
如果你真的想要插入標籤的話,在行尾加上兩個以上的空白,然後按enter。
標題
Markdown支援兩種標題的語法,Setext和atx形式。
Setext形式是用底線的形式,利用(最高階標題)和(第二階標題),例如:
任何數量的和都可以有效果。
Atx形式則是在行首插入1到6個 ,各對應到標題1到6階,例如:
你可以選擇性地「關閉」atx樣式的標題,這純粹只是美觀用的,若是覺得這樣看起來比較舒適,你就可以在行尾加上,而行尾的數量也不用和開頭一樣(行首的井字數量決定標題的階數):
區塊引言
Markdown也允許你只在整個段落的第一行最前面加上:
區塊引言可以有階層(例如:引言內的引言),只要根據層數加上不同數量的:
引言的區塊內也可以使用其他的Markdown語法,包括標題、清單、程式碼區塊等:
清單
Markdown支援有序清單和無序清單。
無序清單使用星號、加號或是減號作為清單標記:
等同於:
也等同於:
有序清單則使用數字接著一個英文句點:
很重要的一點是,你在清單標記上使用的數字並不會影響輸出的HTML結果,上面的清單所產生的HTML標記為:
如果你的清單標記寫成:
或甚至是:
你都會得到完全相同的HTML輸出。重點在於,你可以讓Markdown文件的清單數字和輸出的結果相同,或是你懶一點,你可以完全不用在意數字的正確性。
如果你使用懶惰的寫法,建議第一個項目最好還是從「1.」開始,因為Markdown未來可能會支援有序清單的start屬性。
清單項目標記通常是放在最左邊,但是其實也可以縮排,最多三個空白,項目標記後面則一定要接著至少一個空白或tab。
要讓清單看起來更漂亮,你可以把內容用固定的縮排整理好:
但是如果你很懶,那也不一定需要:
如果清單項目間用空行分開, Markdown會把項目的內容在輸出時用標籤包起來,舉例來說:
會被轉換為:
但是這個:
會被轉換為:
清單項目可以包含多個段落,每個項目下的段落都必須縮排4個空白或是一個tab:
如果你每行都有縮排,看起來會看好很多,當然,再次地,如果你很懶惰,Markdown也允許:
如果要在清單項目內放進引言,那就需要縮排:
如果要放程式碼區塊的話,該區塊就需要縮排兩次,也就是8個空白或是兩個tab:
當然,項目清單很可能會不小心產生,像是下面這樣的寫法:
換句話說,也就是在行首出現數字-句點-空白,要避免這樣的狀況,你可以在句點前面加上反斜線。
程式碼區塊
和程式相關的寫作或是標籤語言原始碼通常會有已經排版好的程式碼區塊,通常這些區塊我們並不希望它以一般段落文件的方式去排版,而是照原來的樣子顯示,Markdown會用和標籤來把程式碼區塊包起來。
要在Markdown中建立程式碼區塊很簡單,只要簡單地縮排4個空白或是1個tab就可以,例如,下面的輸入:
Markdown會轉換成:
這個每行一階的縮排(4個空白或是1個tab),都會被移除,例如:
會被轉換為:
一個程式碼區塊會一直持續到沒有縮排的那一行(或是文件結尾)。
在程式碼區塊裡面,、和會自動轉成HTML實體,這樣的方式讓你非常容易使用Markdown插入範例用的HTML原始碼,只需要複製貼上,再加上縮排就可以了,剩下的Markdown都會幫你處理,例如:
會被轉換為:
程式碼區塊中,一般的Markdown語法不會被轉換,像是星號便只是星號,這表示你可以很容易地以Markdown語法撰寫Markdown語法相關的文件。
?? Практическое занятие: работа в Markdown
Чтобы понять, как работает Markdown, давайте немного потренируемся с Markdown.
- Переходим в онлайн редактор Markdown (например Dillinger.io)
- Создаем следующее:
- нумерованный список;
- ненумерованный список;
- текст, выделенный шрифтом Bold;
- пример кода;
- заголовок 2 уровня;
- кодированный текст.
- При желании можно скопировать содержимое Markdown из файла surfreportendpoint.md и посмотреть различные теги Markdown.
Markdown обрабатывает большую часть обычно используемого синтаксиса, но для таблиц лучше использовать синтаксис HTML
Синтаксис HTML дает больше контроля над шириной столбцов, что может быть важно при настройке таблиц, особенно если таблицы имеют теги кода