Как вставить код в markdown
Перейти к содержимому

Как вставить код в markdown

  • автор:

Краткие теоретические сведения

В первой строке таблицы записывается шапка, колонки таблицы разделяются символом вертикальной линии.

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

Вертикальные линии, разделяющие колонки, необязательно располагать друг под другом, это делается только для удобства чтения исходного кода. Количество дефисов во второй строке и количество пробелов в остальных строках значения не имеют.

Код

Для того чтобы сформировать выделенный текст, в markdown достаточно его набрать с отступом от начала строки на одну позицию табуляции (обычно 4 пробела). Этот текст будет моноширинным шрифтом и помещен в рамку, например (сравните ширину букв w и i обычного текста и в примере):

while() if() 

Моноширинный шрифт удобен для отображения кода, поскольку все буквы имеют одинаковую ширину и элементы кода можно располагать в ровные колонки. При подключении дополнительных библиотек (при сборке в HTML) ключевые слова и другие конструкции языков программирования автоматически выделяются заданным цветом или шрифтом.

В случае если код начинается с символа, воспринимаемого в markdown как элемент списка, или если код располагается внутри списка или код располагается внутри строки, для выделения кода нужно использовать парный тег ««`» (набирается клавишей, обычно расположенной на клавиатуре под клавишей «ESC»). Например: printf(«Hello»); .

Формулы

В markdown набрать математические формулы можно только с использованием дополнительных библиотек. Наиболее универсальный способ — использование библиотеки «MathJax». Она поддерживает различные языки разметки для набора математических формул, и, прежде всего, «Latex» и «MathML». Альтернативная библиотека Katex работает только с форматом «Latex», зато проще и быстрее.

В «Katex» по-умолчанию используются парные теги \\(. \))) для набора формулы непосредственно в тексте и $$. $$ для набора формулы в отдельной строке.

Например, формула $$ a=b+c, $$ где \( a=0 \).

может быть набрана следующим образом:

Например, формула $$ a=b+c, $$ где \\( a=0 \\). 

В расширении «Markdown All in One» отображение математических формул настроено по другому. Предыдущий пример следует набирать так:

Например, формула $$a=b+c,$$ где $a=0$ 

Выключенную формулу нужно набирать отдельной строкой, а также следует избегать лишних пробелов.

В формулах встречаются символы различного типа: переменные, операции, функции и др.

Переменные могут быть набраны латинскими или греческими буквами. Латинские буквы набираются непосредственно, а для греческих есть специальные команды, например: \alpha – \(\alpha\)

Операции также могут быть набраны или непосредственно (например, +, –), или с помощью команд, например: \div — \(\div\).

Функции набираются с помощью специальных команд, например: \sin() — \(\sin()\).

Степени и индексы набираются с помощью значков «^» и «_» соответственно, например: w^_n — \(w^_n\).

Дробь можно набирать с помощью обычной косой черты (если формула в одну строчку), однако дробь имеет другой вид, если использовать команду \frac с двумя параметрами (числитель и знаменатель), например: \frac$ — \( \fracn\).

Подробнее о наборе математических формул можно посмотреть на этой странице.

Задание к работе

Описанные ниже задания следует выполнять в одном markdown файле, для защиты лабораторной работы следует предоставить исходный код и сборку этого файла.

printf("Hello world!"); 
if (x>y) return x; 
  1. Наберите формулу: $$a^2+b^2 = c^2$$
  2. Наберите текст с описанием метода решения квадратного уравнения.

Язык разметки Markdown

Зачем нужен ещё один язык разметки и как на нём писать.

Время чтения: 13 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

  • Сергей Кириенко ,
  • Светлана Коробцева

Обновлено 25 июня 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Markdown — удобочитаемый язык разметки, который прозрачно конвертируется в HTML. Его можно открывать и изменять в любом редакторе текста. Широко используется для написания документаций и README-файлов.

Все статьи Доки написаны на Markdown. Разметку этой страницы можно найти в репозитории контента Доки.

Пример

Скопировать ссылку «Пример» Скопировано

Вы можете встретить Markdown в .md или .markdown файлах. Давайте посмотрим на пример одного из таких:

 # Дока Дока — это **добрая** энциклопедия для веб-разработчиков.Вы можете [открыть её](https://doka.guide) в своём браузере. ## Преимущества - Понятный материал;- Нескучные объяснения;- Удобный поиск. # Дока Дока — это **добрая** энциклопедия для веб-разработчиков. Вы можете [открыть её](https://doka.guide) в своём браузере. ## Преимущества - Понятный материал; - Нескучные объяснения; - Удобный поиск.     

Он содержит базовые элементы, которые можно найти почти в любом README . md :

  • заголовок первого уровня для названия;
  • выделение жирным шрифтом важных частей в описании;
  • ссылка с понятным текстом;
  • заголовок второго уровня для подпунктов;
  • маркированный список для перечисления преимуществ.

Несмотря на то, что Markdown достаточно удобно читать в исходном виде, его часто переводят в HTML. Результат конвертации находится ниже.

Цитаты

Скопировать ссылку «Цитаты» Скопировано

Если в начале строки поставить треугольную скобку ( > ), то Markdown превратит текст после неё в цитату. Внутри могут быть любые блоки: параграфы, заголовки или даже другие цитаты.

 > Одна треугольная скобкапревращает в цитату несколько строк,идущих друг за другом. > Одна треугольная скобка превращает в цитату несколько строк, идущих друг за другом.     
 > # Цитаты великих людей> Ваша работа заполнит большую часть жизни и единственный способ быть> полностью довольным — делать то, что по-вашему является великим делом.> И единственный способ делать великие дела — любить то, что вы делаете.>> *— Стив Джобс, Речь в Стенфорде* > # Цитаты великих людей > Ваша работа заполнит большую часть жизни и единственный способ быть > полностью довольным — делать то, что по-вашему является великим делом. > И единственный способ делать великие дела — любить то, что вы делаете. > > *— Стив Джобс, Речь в Стенфорде*      
 > Первая, родительская цитата> > А это уже вторая,\> > дочерняя цитата > Первая, родительская цитата > > А это уже вторая,\ > > дочерняя цитата     

Исходный код

Скопировать ссылку «Исходный код» Скопировано

Markdown позволяет специальным образом размечать исходный код, все символы внутри будут автоматически экранированы. Есть 3 способа, как это можно сделать:

  • Обернуть код одной-двумя парами бэктиков ( `код` )
  • Обернуть код тремя и более парами бэктиков ( «`код«` )
  • Поставить таб или 4 пробела перед каждой строчкой кода
Одна-две пары бэктиков

Скопировать ссылку «Одна-две пары бэктиков» Скопировано

Этот способ позволяет вставлять исходный код как строчный элемент. Даже если фактически у нас будет несколько строчек кода, обёрнутых бэктиками, мы всё равно получим одну строку после конвертации в HTML.

 Функция `alert()`вызывает диалоговое окно. Сумму двух переменныхможно вывести так:``const a = 1const b = 2alert(a + b)`` Функция `alert()` вызывает диалоговое окно. Сумму двух переменных можно вывести так: ``const a = 1 const b = 2 alert(a + b)``     
Три и более пары бэктиков

Скопировать ссылку «Три и более пары бэктиков» Скопировано

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

После обозначения языка программирования визуально ничего не изменится, но это даст возможность дополнительным плагинам и скриптам подсветить код внутри блока.

 Функция ```console.log()```выводит текст в консоль. Сумму двух переменныхможно вывести так:```javascriptconst a = 1const b = 2 console.log(a + b)``` Функция ```console.log()``` выводит текст в консоль. Сумму двух переменных можно вывести так: ```javascript const a = 1 const b = 2 console.log(a + b) ```     
Отступ

Скопировать ссылку «Отступ» Скопировано

Другой способ выделить код — поставить перед ним таб или 4 пробела. Исходный код необходимо отделять пустой строкой от предыдущего блока.

 Метод ```.toString()```превращает числа в строку. Его можно использовать так: const a = 1 const b = 2 (a + b).toString() Метод ```.toString()``` превращает числа в строку. Его можно использовать так: const a = 1 const b = 2 (a + b).toString()     

Выделение текста

Скопировать ссылку «Выделение текста» Скопировано

Если обернуть текст звёздочками ( * ) или нижними подчёркиваниями ( _ ), то он станет жирным или курсивным. Оба символа работают одинаково, стиль выделения зависит только от их количества:

  • одна пара * или _ сделает текст *курсивным*;
  • две пары * или _ сделают текст **жирным**;
  • три пары * или _ применят ***оба стиля***.
 Обычный текст *Курсивный текст* _Другой курсивный текст_ **Жирный текст** __Другой жирный текст__ ***Оба стиля*** ___Оба стиля___ Обычный текст *Курсивный текст*br> _Другой курсивный текст_ **Жирный текст**br> __Другой жирный текст__ ***Оба стиля***br> ___Оба стиля___br>      

Для экранирования служебных символов Markdown нужно поставить обратную косую черту перед каждым из них ( \* , \ _ , \* \ * ).

 **_Оба стиля из \* и \__** __*Оба стиля из \* и \_*__ \*\*Экранирование звёзд\*\* \_\_\_Экранирование подчёркиваний\_\_\_ **_Оба стиля из \* и \__**br> __*Оба стиля из \* и \_*__ \*\*Экранирование звёзд\*\*br> \_\_\_Экранирование подчёркиваний\_\_\_     

Ссылки

Скопировать ссылку «Ссылки» Скопировано

Markdown предлагает 3 стиля разметки ссылок: строчный, справочный и автоматический.

Строчные

Скопировать ссылку «Строчные» Скопировано

Для вставки ссылки в строчном стиле необходимо воспользоваться следующей конструкцией: [Текст ссылки ] ​ ( U R L ) . Есть возможность добавить подсказку, для этого нужно после URL дописать текст в кавычках: [Текст ссылки ] ​ ( U R L «Подсказка» ) .

 Привет, [Дока](https://doka.guide "Энциклопедия про web-dev")! Привет, [Дока](https://doka.guide "Энциклопедия про web-dev")!     
Справочные

Скопировать ссылку «Справочные» Скопировано

Для вставки ссылки в справочном стиле нужно написать [Текст ссылки ] ​ [ Ключ ] в том месте, где вы хотите её поместить, а где-нибудь выше или ниже добавить сноску [Ключ ] : U R L «Подсказка» .

 У [Доки][1] есть свой [репозиторий][repo]. [1]: https://doka.guide "Энциклопедия про web-dev"[repo]: https://github.com/doka-guide "Репозиторий Доки" У [Доки][1] есть свой [репозиторий][repo]. [1]: https://doka.guide "Энциклопедия про web-dev" [repo]: https://github.com/doka-guide "Репозиторий Доки"      
Автоматические

Скопировать ссылку «Автоматические» Скопировано

Markdown позволяет использовать упрощённый вариант для вставки ссылок, для этого нужно просто обернуть URI треугольными скобками ( < U R I>).

Можно вставлять адреса электронной почты ( ), тогда мы автоматически получим ссылку типа mailto : .

 Заходите на или присылайте нам письма на Заходите на или присылайте нам письма на hi@doka.guide>      

Изображения

Скопировать ссылку «Изображения» Скопировано

Конструкции для вставки изображений очень похожи на те, что используются для ссылок. Предлагается 2 стиля разметки: строчный и справочный.

Строчные

Скопировать ссылку «Строчные» Скопировано

Для вставки изображения в строчном стиле необходимо воспользоваться конструкцией !⁠ [ Alt текст ] ​ ( U R L картинки ) . При желании можно добавить подсказку: !⁠ [ Alt текст ] ​ ( U R L картинки «Подсказка» ) .

 ![Одна собака](dog.png "Собака смотрит влево") ![Одна собака](dog.png "Собака смотрит влево")      
Справочные

Скопировать ссылку «Справочные» Скопировано

Для вставки изображения в справочном стиле нужно написать !⁠ [ Alt текст ] ​ [ Ключ ] в том месте, где вы хотите его поместить, а где-нибудь выше или ниже описать картинку по ключу [Ключ ] : U R L картинки «Подсказка» .

 ![Одна собака][1] [1]: dog.png "Собака смотрит влево" ![Одна собака][1] [1]: dog.png "Собака смотрит влево"      

Горизонтальный разделитель

Скопировать ссылку «Горизонтальный разделитель» Скопировано

Для разделения смысловых блоков можно использовать горизонтальную черту (


). Чтобы это сделать, необходимо поставить на одной строке три (или более) дефиса ( — ), подчёркивания ( _ ) или звёздочки ( * ). Они не обязательно должны идти друг за другом, между ними могут быть табы или пробелы.

 --- *** _ _ _ * * * * ------------ --- *** _ _ _ * * * * ------------      

Стандартизация

Скопировать ссылку «Стандартизация» Скопировано

У Markdown есть оригинальная спецификация от одного из создателей языка — Джона Грубера. К сожалению, она не всегда однозначно описывает синтаксис, из-за чего многие конвертеры Markdown работают по-разному. Чтобы исправить эту ситуацию, группа разработчиков «поклонников Markdown» создала CommonMark — спецификацию, которая описывает многие частные случаи, и эталонную реализацию парсера Markdown на JS.

Диалекты

Скопировать ссылку «Диалекты» Скопировано

Простой Markdown не всегда подходит для тех или иных проектов, поэтому существуют спецификации, которые расширяют или сужают его.

GitHub Flavored Markdown

Скопировать ссылку «GitHub Flavored Markdown» Скопировано

GFM — один из диалектов Markdown, который, как можно догадаться из названия, используется на GitHub. Он основан на спецификации CommonMark и расширяет её дополнительными элементами: таблицами, списками задач и зачёркиваниями.

Таблицы

Скопировать ссылку «Таблицы» Скопировано

Колонки таблицы размечаются с помощью вертикальных черт ( | ), а заголовок отделяется дефисами ( — ).

 | Место | Участник | Рейтинг ||-------|----------|---------|| 1 | Саша | 118 || 2 | Юля | 92 || 3 | Даниил | 36 | | Место | Участник | Рейтинг | |-------|----------|---------| | 1 | Саша | 118 | | 2 | Юля | 92 | | 3 | Даниил | 36 |      

Можно поставить двоеточие ( : ) рядом с дефисами для выравнивания текста:

  • по левой стороне ( | : — — — — | )
  • по центру ( | : — — — — : | )
  • по правой стороне ( | — — — — : | )
 | Место | Участник | Рейтинг ||------:|:--------:|:--------|| 1 | Саша | 118 || 2 | Юля | 92 || 3 | Даниил | 36 | | Место | Участник | Рейтинг | |------:|:--------:|:--------| | 1 | Саша | 118 | | 2 | Юля | 92 | | 3 | Даниил | 36 |      

Ячейки таблицы могут не соответствовать друг другу по размеру.

 |Место|Участник|Рейтинг||-:|:-:|:-||1|Саша|118||2|Юля|92||3|Даниил|36| |Место|Участник|Рейтинг| |-:|:-:|:-| |1|Саша|118| |2|Юля|92| |3|Даниил|36|     
Список задач

Скопировать ссылку «Список задач» Скопировано

Для создания списка задач используется синтаксис маркированного списка, но с добавлением чекбоксов ( [ ] или [x ] ) после маркеров.

 - [x] Выйти на улицу- [x] Зайти в магазин- [ ] Купить продукты - [x] Молоко - [x] Хлеб - [ ] Помидоры- [ ] Вернуться домой - [x] Выйти на улицу - [x] Зайти в магазин - [ ] Купить продукты - [x] Молоко - [x] Хлеб - [ ] Помидоры - [ ] Вернуться домой     
Зачёркивание

Скопировать ссылку «Зачёркивание» Скопировано

Если необходимо зачеркнуть текст, то можно поставить по две тильды ( ~ ~ ) в начале и в конце фрагмента.

 ~~Привет, Вова!~~\Здравствуйте, Владимир! ~~Привет, Вова!~~\ Здравствуйте, Владимир!     

Stack Exchange Additions

Скопировать ссылку «Stack Exchange Additions» Скопировано

Популярный среди разработчиков сайт Stack Overflow и все остальные сайты, входящие в группу Stack Exchange, используют в редакторе вопросов Markdown, основанный на спецификации CommonMark. Он расширен следующим образом:

Теги

Скопировать ссылку «Теги» Скопировано

Ссылка на вопросы по определённому тегу пишется просто в квадратных скобках с префиксом tag :

 Все вопросы по тегу [tag:javascript] на нашем сайте. Все вопросы по тегу [tag:javascript] на нашем сайте.     
Спойлер

Скопировать ссылку «Спойлер» Скопировано

Если после символа цитирования поставить восклицательный знак ( >! ), то цитата выведется свёрнутой, и развернуть её пользователь сможет, кликнув по ней.

 В конце пятого эпизода выясняется, что>! он его отец. В конце пятого эпизода выясняется, что >! он его отец.     
Другие отличия

Скопировать ссылку «Другие отличия» Скопировано

Stack Exchange использует тот же синтаксис для создания таблиц, что и GitHub Flavored Markdown, а также некоторые HTML-теги из числа безопасных.

В комментариях к вопросам поддерживается только минимальный набор правил разметки: жирный шрифт, курсив, строчный код в бэктиках и ссылки строчного формата.

Мессенджеры

Скопировать ссылку «Мессенджеры» Скопировано

Многие мессенджеры, например Telegram или Discord, используют упрощённую версию Markdown. Там отсутствует разметка заголовков, списков и цитат, но поддерживается расширенный синтаксис выделения текста: жирный шрифт, курсив, зачёркивания, ссылки, разметка исходного кода.

На практике

Скопировать ссылку «На практике» Скопировано

Саша Беспоясов советует

Скопировать ссылку «Саша Беспоясов советует» Скопировано

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

 [Ковариантность](https://ru.wikipedia.org/wiki/Ковариантность_и_контравариантность_(математика)) [Ковариантность](https://ru.wikipedia.org/wiki/Ковариантность_и_контравариантность_(математика))     

Код выше выведет «Ковариантность)», потому что ссылка закончится на первой закрывающей скобке.

Чтобы таких проблем не возникало, можно обернуть адрес в угловые скобки:

 [Ковариантность]() [Ковариантность]()>)     

Так, например, автоматически делает Prettier, когда работает с Markdown-файлами.

Сергей Минаков советует

Скопировать ссылку «Сергей Минаков советует» Скопировано

Не стоит использовать два пробела для жёсткого переноса строк в параграфе, потому что во многих проектах для IDE включена опция trim _ trailing _ whitespace , которая стирает все пробелы, стоящие в конце строки.

Лучше всего использовать тег
, потому что перенос с помощью обратной косой черты ( \ ) может поддерживаться не всеми Markdown-конвертерами, так как её описание есть в CommonMark, но отсутствует в оригинальной спецификации.

Илья Таратухин советует

Скопировать ссылку «Илья Таратухин советует» Скопировано

Markdown не предполагает специального синтаксиса для встраивания видео, но и использование HTML-тегов тоже не запрещает. Есть два основных пути добавить видео в Markdown:

  1. Использовать обложку видео со ссылкой на внешнюю платформу. 100% рабочий и допустимый на сторонних площадках вроде GitHub способ.
 [![Обложка к видео «Дока — как добавить пулреквест со статьёй»](https://i3.ytimg.com/vi/y-_nXfKkI3w/hqdefault.jpg)](https://www.youtube.com/watch?v=y-_nXfKkI3w) [![Обложка к видео «Дока — как добавить пулреквест со статьёй»](https://i3.ytimg.com/vi/y-_nXfKkI3w/hqdefault.jpg)](https://www.youtube.com/watch?v=y-_nXfKkI3w)     

Обложка к видео «Дока — как добавить пулреквест со статьёй»

  1. Использовать HTML-разметку и вставить , например тот, что генерирует YouTube в диалоге «поделиться».
  iframe width="560" height="315" src="https://www.youtube.com/embed/y-_nXfKkI3w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>iframe>      

fomvasss / Шпаргалка по Markdown.md

Поиграть с разметкой Markdown можно на демо-странице.

Содержание

Заголовки

# H1 ## H2 ### H3 #### H4 ##### H5 ###### H6 Кроме того, H1 и H2 можно обозначить подчеркиванием: Alt-H1 ====== Alt-H2 ------ 

H2

H3

H4
H5
H6

Кроме того, заголовки H1 и H2 можно обозначить подчеркиванием:

Alt-H1

Alt-H2

Выделение

Курсив обозначается *звездочками* или _подчеркиванием_. Полужирный шрифт - двойными **звездочками** или __подчеркиванием__. Комбинированное выделение **звездочками и _подчеркиванием_**. Для зачеркнутого текста используются две тильды . ~~Уберите это.~~ 

Курсив обозначается звездочками или подчеркиванием.

Полужирный шрифт — двойными звездочками или подчеркиванием.

Комбинированное выделение звездочками и подчеркиванием.

Для зачеркнутого текста используются две тильды . Уберите это.

Списки

(В данном примере предшествующие и завершающие пробелы обозначены точками: ⋅)

1. Первый пункт нумерованного списка 2. Второй пункт ⋅⋅*Ненумерованный вложенный список. 1. Сами числа не имеют значения, лишь бы это были цифры ⋅⋅1. Нумерованный вложенный список 4. И еще один пункт. ⋅⋅⋅Внутри пунктов списка можно вставить абзацы с таким же отступом. Обратите внимание на пустую строку выше и на пробелы в начале (нужен по меньшей мере один, но здесь мы добавили три, чтобы также выровнять необработанный Markdown). ⋅⋅⋅Чтобы вставить разрыв строки, но не начинать новый параграф, нужно добавить два пробела перед новой строкой.⋅⋅ ⋅⋅⋅Этот текст начинается с новой строки, но находится в том же абзаце.⋅⋅ ⋅⋅⋅(В некоторых обработчиках, например на Github, пробелы в начале новой строки не нужны.) * Ненумерованный список можно размечать звездочками - Или минусами + Или плюсами 
  1. Первый пункт нумерованного списка
  2. Второй пункт
  • Ненумерованный вложенный список.
  1. Сами числа не имеют значения, лишь бы это были цифры
  2. Нумерованный вложенный список
  3. И еще один пункт. Внутри пунктов списка можно вставить абзацы с таким же отступом. Обратите внимание на пустую строку выше и на пробелы в начале (нужен по меньшей мере один, но здесь мы добавили три, чтобы также выровнять необработанный Markdown). Чтобы вставить разрыв строки, но не начинать новый параграф, нужно добавить два пробела перед новой строкой. Эта текст начинается с новой строки, но находится в том же абзаце. (В некоторых обработчиках, например на Github, пробелы в начале новой строки не нужны.)
  • Ненумерованный список можно размечать звездочками
  • Или минусами
  • Или плюсами

Ссылки

Ссылки можно оформить разными способами.

[Обычная ссылка в строке](https://www.google.com) [Обычная ссылка с title](https://www.google.com "Сайт Google") [Ссылка со сноской][Произвольный регистронезависимый текст] [Относительная ссылка на документ](../blob/master/LICENSE) [Для ссылок со сноской можно использовать цифры][1] Или можно просто вставить ссылку в квадратные скобки [текст ссылки] Произвольный текст, после которого можно привести ссылки. [произвольный регистронезависимый текст]: https://www.mozilla.org [1]: http://slashdot.org [текст ссылки]: http://www.reddit.com 

Или можно просто вставить ссылку в квадратные скобки текст ссылки

Произвольный текст, после которого можно привести ссылки.

(*) Для символов не входящих в ASCII, например кириллицы, текст сноски все-таки регистрозависим (прим. перев.)

Изображения

Вот наш логотип (наведите указатель, чтобы увидеть текст заголовка): Внутри строки: ![alt-текст](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Текст заголовка логотипа 1") В сноске: ![alt-текст][logo] [logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Текст заголовка логотипа 2" 

Вот наш логотип (наведите указатель, чтобы увидеть текст заголовка):

alt-текст

Внутри строки:

alt-текст

В сноске:

Код и подсветка синтаксиса

Блоки кода являются частью функций Markdown, но не подсветка синтаксиса. Однако многие обработчики, например Github или Markdown Here, поддерживают подсветку синтаксиса. Список поддерживаемых языков и способ их указания может различаться. Markdown Here поддерживает десятки языков (и не-языков, например синтаксис diff и заголовки HTTP); полный список и способ указания языков см. на странице highlight.js demo-странице.

`Код` в строке обрамляется `обратными апострофами`. 

Код в строке обрамляется обратными апострофами .

Блоки кода выделяются либо тремя обратными апострофами «` либо четырьмя пробелами в каждой строке. Рекомендуется использовать три апострофа — они проще и только они поддерживают подсветку синтаксиса.

```javascript var s = "Подсветка JavaScript"; alert(s); ``` ```python s = "Подсветка Python" print s ``` ``` Язык не указан, синтаксис не подсвечен. Но мы вставим в него тег. ``` 
var s = "Подсветка JavaScript"; alert(s);
s = "Подсветка Python" print s
Язык не указан, синтаксис не подсвечен (некоторые обработчики все же подсвечивают). Но мы вставим в него тег. 

Таблицы

Таблицы не являются частью Markdown, но многие обработчики, например Markdown Here и Github, поддерживают их. Они позволяют легко добавить таблицы в электронное письмо — в других случаях для этого нужно копировать их из другого приложения.

Вертикальные линии обозначают столбцы. | Таблицы | Это | Круто | | ------------- |:------------------:| -----:| | столбец 3 | выровнен вправо | $1600 | | столбец 2 | выровнен по центру | $12 | | зебра-строки | прикольные | $1 | Внешние вертикальные линии (|) не обязательны, и они нужны только чтобы сам код Markdown выглядел красиво. Тот же код можно записать так: Markdown | не такой | красивый --- | --- | --- *Но выводится* | `так же` | **клево** 1 | 2 | 3 

Вертикальные линии обозначают столбцы.

Таблицы Это Круто
столбец 3 выровнен вправо $1600
столбец 2 выровнен по центру $12
зебра-строки прикольные $1

Внешние вертикальные линии (|) не обязательны, и они нужны только чтобы сам код Markdown выглядел красиво. Тот же код можно записать так:

Markdown не такой красивый
Но выводится так же клево
1 2 3

Цитаты

> С помощью цитат очень удобно в письме обозначать исходный текст. > Эта строка - часть той же цитаты. Разрыв цитаты. > Это очень длинная строка, но она будет правильно процитирована даже при размещении на нескольких строках. Продолжаем писать, чтобы эта строка не вмещалась на одной строке в любом окне. Кстати, в цитаты можно *вставлять* даже **Markdown**. 

С помощью цитат очень удобно в письме обозначать исходный текст. Эта строка — часть той же цитаты.

Это очень длинная строка, но она будет правильно процитирована даже при размещении на нескольких строках. Продолжаем писать, чтобы эта строка не вмещалась на одной строке в любом окне. Кстати, в цитаты можно также размечать с помощью Markdown.

Встроенный HTML

Часто Markdown понимает чистый HTML.

 
Список определений
Это то, что люди иногда используют.
Markdown внутри HTML
Работает *не очень** хорошо. Используйте HTML-теги.

Список определений Это то, что люди иногда используют. Markdown внутри HTML Работает *не очень** хорошо. Используйте HTML-теги.

Горизонтальные линии

Три и более. --- Дефисы *** Звездочки ___ Подчеркивания 

Подсветка кода с помощью Markdown в Gitlab и на Github

В файле README.md можно разместить код с подсветкой синтаксиса.

Делается это с помощью обратных кавычек (`).

Код внутри строк можно выделить если с двух сторон поставить по одной обратной кавычки. Пример: `код` .

Многострочный код выделяется тремя обратными кавычками с каждой стороны:

``` function test() < console.log("notice the blank line before this function?"); >```

Подсветку синтаксиса можно добавить если указать язык программирования.

```javascript function test() < console.log("notice the blank line before this function?"); >```

Наглядные примеры с подсветкой синтаксиса можно увидеть по ссылкам ниже.

Ссылки

  • Gitlab. Code and Syntax Highlighting
  • Github. Creating and highlighting code blocks

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *