Назад
 Начало |
 Учебные материалы |
Подразделы
Другие разделы
Дата и время
13/03/2025 08:23:42
Язык Markdown
Основной Markdown
##### Абзацы (код)
```text
Абзацы создаются при помощи пустой строки.
Если вокруг текста сверху и снизу
есть пустые строки, то текст превращается в абзац.
Чтобы сделать принудительно\
разделение на строки,\
нужно поставить обратную косую черту\
в конце строки.
```
##### Абзацы (результат)
Абзацы создаются при помощи пустой строки.
Если вокруг текста сверху и снизу
есть пустые строки, то текст превращается в абзац.
Чтобы сделать принудительно\
разделение на строки,\
нужно поставить обратную косую черту\
в конце строки.
||font-size:70%|Можно делать вместо ``\`` два пробела в конце строки, но их сложно увидеть||
Выделять слова можно при помощи ``*`` и ``_``. Один символ для курсива, два символа для жирного текста,
три -- для курсива и жирного одновременно.
Для зачеркивания текста ставим два символа ``~`` до и после <<текста>>.
Так как иногда требуется более сложные способы выделения, в язык была добавлена возможность
использования свойств CSS и классов. Для этого выделяем текст двумя или тремя ``|`` и перед текстом пишем свойства CSS и
их значения через ``;`` и заканчиваем символом `|`.
##### Выделение текста (код)
```text
Это _курсив_ и это тоже *курсив*,
это __жирный__ и так тоже **жирный**,
а так ***жирный курсив***.
~~Зачеркнуто~~
Использование CSS:
||font-size:120%;background-color:yellow|
большой текст на желтом фоне||
Использование классов:
||.j4||Абзац с выравниванием по ширине и отступом в 4 символа.
```
##### Выделение текста (результат)
Это _курсив_ и это тоже *курсив*,
это __жирный__ и так тоже **жирный**,
а так ***жирный курсив***.
~~Зачеркнуто~~
Использование CSS:
||font-size:120%;background-color:yellow|
большой текст на желтом фоне||
Использование классов:
||.j4||Абзац с выравниванием по ширине и отступом в 4 символа.
### Заголовки
##### Заголовки (код)
```text
# Заголовок уровня 1
## Заголовок уровня 2
### Заголовок уровня 3
#### Заголовок уровня 4
##### Заголовок уровня 5
###### Заголовок уровня 6
```
##### Заголовки (результат)
# Заголовок уровня 1
## Заголовок уровня 2
### Заголовок уровня 3
#### Заголовок уровня 4
##### Заголовок уровня 5
###### Заголовок уровня 6
### Списки
Для создания списков используем символы ``*`` или ``-`` или ``+`` или число с точкой (для нумерованных списков) в начале строки, перед вложенными пунктами ставим четыре пробела
или символ табуляции. Если в начале абзаца стоят символы ``*`` или ``-`` или ``+`` или число с точкой, то он также оформляется как элемент списка.
##### Списки (код)
```text
Ненумерованный список
* элемент 1
* элемент 2
- элемент 2.1
- элемент 2.2
* элемент 3
Нумерованный список
1. элемент 1
2. элемент 2
- элемент 2.1
- элемент 2.2
3. элемент 3
```
```
Список из абзацев
* Первый пункт,
продолжение текста
* Второй пункт
```
##### Списки (результат)
Ненумерованный список
* элемент 1
* элемент 2
- элемент 2.1
- элемент 2.2
* элемент 3
Нумерованный список
1. элемент 1
2. элемент 2
- элемент 2.1
- элемент 2.2
3. элемент 3
Список из абзацев
* Первый пункт,
продолжение текста
* Второй пункт
### Цитаты
Цитаты оформляются с помощью символа ``>``.
##### Цитаты (код)
```text
> Главная проблема цитат в Интернете в том,
что люди сразу верят в их подлинность
>>> В.И.Ленин
```
##### Цитаты (результат)
> Главная проблема цитат в Интернете в том,
что люди сразу верят в их подлинность
>>> В.И.Ленин
### Исходный код
Внутри абзацев выделяется несколькими `` ` `` слева и справа (обычно два, но если не включен режим формул, то можно один).
Большой код можно поместить между `` ``` ``, написанных до и после кода на отдельных строках, после первого `` ``` `` можно написать название языка программирования
но если не указать, язык программирования будет определяться по тексту программы.
##### Исходный код (код)
````text
Пример кода ``a+b``
```c++
int main()
{ cout<<"Hello\n";
}
```
````
##### Исходный код (результат)
Пример кода ``a+b``
```c++
int main()
{ cout<<"Hello\n";
}
```
### Формулы
Можно писать формулы в упрощенном виде (AsciiMath, используются одиночные `` ` ` ``) или в формате TeX (используются `` \( \) `` и ``$$ $$``).
##### Формулы (код)
```text
Если `a != 0`, то существуют
два решения уравнения `ax^2 + bx + c = 0`,
которые вычисляются по формуле
`x = (-b +- sqrt(b^2-4ac))/(2a) .`
Если \(a \ne 0\), то существуют
два решения уравнения \(ax^2 + bx + c = 0\),
которые вычисляются по формуле
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
```
##### Формулы (результат)
Если `a != 0`, то существуют
два решения уравнения `ax^2 + bx + c = 0`,
которые вычисляются по формуле
`x = (-b +- sqrt(b^2-4ac))/(2a) .`
Если \(a \ne 0\), то существуют
два решения уравнения \(ax^2 + bx + c = 0\),
которые вычисляются по формуле
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
### Горизонтальная черта
Горизонтальная черта создается тремя или более символами ``*`` или ``-`` на отдельной строке.
### Ссылки
Для создания геперссылок используется комбинация из квадратных и круглых скобок.
В квадратных скобках указывается текст, а в круглых - URL ссылки.
##### Ссылки (код)
```text
Пример [ссылки на сайт](https://ipc.susu.ru/) и
[ссылки с подсказкой](/learn.html "Подсказка")
```
##### Ссылки (результат)
Пример [ссылки на сайт](https://ipc.susu.ru/) и
[ссылки с подсказкой](/learn.html "Подсказка")
### Картинки
Картинки делаются почти также, но добавляется символ ``!``, текст в квадратных скобках используется в том
случае, если картинка не сможет загрузиться, и можно указать стили CSS (расширение Markdown).
##### Картинки (код)
```text
Примеры 
Центрирование картинки
```
##### Картинки (результат)
Примеры 
Центрирование картинки
### Таблицы
Для рисования таблиц используются символы ``|`` и ``-``. Для указания выравнивания в колонке к
последовательности из ``-`` добавляются символы ``:``: ``:---`` - влево, ``:---:`` - по центру, ``---:`` - вправо.
##### Таблицы (код)
```text
Наименование | Количество
------------ | ---------:
Апельсины | 5
Яблоки | 120
Груши | 25
```
##### Таблицы (результат)
Наименование | Количество
------------ | ---------:
Апельсины | 5
Яблоки | 120
Груши | 25
Расширения Markdown
##### Графики (код)
````text
```plot
xAxis:{domain:[-10,10]},
yAxis:{domain:[-5,5]},
grid:true,
data: [
{fn:'sin(x)',color:'darkred'},
{fn:'x^2/5'}
]
```
````
````text
```width:400px;height:300px|plot
yAxis: {domain: [-1.897959183, 1.897959183]},
xAxis: {domain: [-3, 3]},
data: [{
r: '2 * sin(4 theta)',
fnType: 'polar',
graphType: 'polyline'
}]
```
````
##### Графики (результат)
```plot
xAxis:{domain:[-10,10]},
yAxis:{domain:[-5,5]},
grid:true,
disableZoom:true,
data: [
{fn:'sin(x)',color:'darkred'},
{fn:'x^2/5'}
]
```
```width:400px;height:300px|plot
yAxis: {domain: [-1.897959183, 1.897959183]},
xAxis: {domain: [-3, 3]},
data: [{
r: '2 * sin(4 theta)',
fnType: 'polar',
graphType: 'polyline'
}]
```
##### Вычисляемые таблицы (код)
````text
```spreadsheet
Апельсины,5
Яблоки,120
ИТОГО,=SUM(B1:B2)
```
````
##### Вычисляемые таблицы (результат)
```spreadsheet
Апельсины,5
Яблоки,120
ИТОГО,=SUM(B1:B2)
```
Для рисования UML и ER-диаграмм используется язык PlantUML. [Примеры](http://plantuml.com/ru/index)
##### UML (код)
````text
```width:200px|uml
hide circle
Object <|-- ArrayList
Object : equals()
ArrayList : elementData: Object[]
ArrayList : size()
```
````
##### UML (результат)
```width:200px|uml
hide circle
Object <|-- ArrayList
Object : equals()
ArrayList : elementData: Object[]
ArrayList : size()
```
Для рисования интерфейса используется язык [PlantUML/Salt](http://plantuml.com/ru/salt).
##### Интерфейс (код)
````text
```width:200px|salt
{
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
```
````
##### Интерфейс (результат)
```width:200px|salt
{
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
```
Для рисования графов используется язык Graphviz/DOT. [Примеры](https://tonyballantyne.com/graphs.html)
##### Граф (код)
````text
```width:200px|dot
digraph G {
node[shape=circle];
a -> b -> c
c -> a
b -> d
}
```
````
##### Граф (результат)
```width:200px|dot
digraph G {
node[shape=circle];
a -> b -> c
c -> a
b -> d
}
```
##### Синтаксическая диаграмма (код)
````text
```width:700px|ebnf
unsigned_integer = { "digit" }- ;
unsigned_number = unsigned_integer, [ ".", unsigned_integer ], [ "E", ["+"|"-"], unsigned_integer ];
```
````
##### Синтаксическая диаграмма (результат)
```width:700px|ebnf
unsigned_integer = { "0-9" }- ;
unsigned_number = unsigned_integer, [ ".", unsigned_integer ], [ "E", ["+"|"-"], unsigned_integer ];
```
Кроме показанных выше диаграмм, поддерживаются диаграммы Ганта ([gantt](https://plantuml.com/ru/gantt-diagram)), Чена ([chen](https://plantuml.com/ru/er-diagram)), ментальные карты ([mindmap](https://plantuml.com/ru/mindmap-diagram)), разбиения работ ([wbs](https://plantuml.com/ru/wbs-diagram)), сложных структур данных ([json](https://plantuml.com/ru/json) и [yaml](https://plantuml.com/ru/yaml)), ASCII-графику для диаграмм ([ditaa](https://plantuml.com/ru/ditaa)).
