# Форматування тексту {#text-formating}

## Типографія {#typography}

### Курсивний шрифт {#type-i}

Курсив позначається *зірочками* або _підкреслюванням_.  

```
*зірочки*
_підкреслення_
```

### Напівжирний шрифт {#type-w}

Напівжирний шрифт - подвійними **зірочками** або __підкресленням__.

```
**зірочки**
__підкреслювання__
```  

### Комбінування курсиву та напівжирного  написання {#type-wi}

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

```
**_зірочки_**
__*підкреслення*__
```

### Спеціальні символи {#special-symbols}

Для відображення символів, яких нема на клавіатурі застосовуйте спеціальний HTML-код, який починається з апмерсанду `&` та закінчується точкою з комою `;`. Деякі приклади спеціальних символів та їх використання в тексті наведено нижче. Також, для ознайомлення з повним списком спеціальних символів скористайтесь [ресурсом](https://unicode-table.com/ru/).

```{block, type = 'table table-hover'}

 Опис                               |Вигляд              | Код
------------------------------------|--------------------|----------------------
Нерозривний пробіл                  |                    |`&nbsp;`
Перевод рядка без створення абзацу  |                    |`\\` або два пробіли в кінці рядка
Тире                                |&ndash;             |`\-\-`або `&ndash;`
Довге тире                          |&mdash;             |`\-\-\-` або `&mdash;`
Знак copyright                      |©                   |`&copy;`
Секція (параграф)                   |§                   |`&sect;`
Точка (маркер списку)               |•                   |`&bull;`
Знак зареєстрованої торгової марки  |®                   |`&reg;`
```

### Підкреслення {#type-u}

Підкреслення тексту суцільною лінією: ++підкреслений текст++.

```
++підкреслений текст++
```

У разі необхідності використання подвійного символу `+` в тексті, між ними потрібно поставити екранований бекслеш: C+\\+ ++підкреслений текст++.

```
C+\\+  ++підкреслений текст++
```

Якщо ж потрібно поставити символ `\` між двома символами `+`, то використовуються два екранованих бекслеш: C+\\\\+ ++підкреслений текст++. 

```
C+\\\\+  ++підкреслений текст++
```

### Закреслений текст {#strike-text}

Для закресленого тексту використовуються дві тильди. ~~Приберіть це.~~

```
~~Приберіть це.~~
```

### Верхній та нижній індекс {#sub-sup}

Текст оточений символами `~` будет перетворений в нижній індекс H~2~SO~4~

```
H~2~SO~4~
``` 

а дві "каретки" `^` створюють верхній індекс ClO^-1^ . 

```
ClO^-1^
```

## Рядкові елементи {#span-elements}

### Стенографічний текст {#verb-text}

Для того, щоб добавити стенографічний текст, розмістіть його в зворотні лапки:  
У чому різниця між `>> =` и `>>`? 

```
`>> =`
```

### Текст зі спливаючою підказкою {#text-title}

[Текст]("зі спливаючою підказкою"). Підказка повинна бути у одинарних чи подвійних лапках. У разі необхідності включення лапок в текст підказки, їх потрібно екранувати.

```
[Текст]("зі спливаючою підказкою")

[Текст]('зі спливаючою підказкою')

[Текст]('зі \'спливаючою підказкою')
```

Текст підказки може містити символи [форматування тексту]("**напівжирний** _курсив_"), рядкові елементи, [посилання](#text-title "Повернутись до заголовку") та [зображення]("![img](http://via.placeholder.com/350x150)"):

```
[текст]("++підкреслення++")

[зображення]("![img](http://via.placeholder.com/350x150)")

[посилання](http://text.com "++_emph tip_++")
```

### Фрагмент коду {#code}

Фрагмент коду (в абзаці): `program test;` \
Як окремий блок:

```
`program test;`
``` 
### Кольорове виділення фрагменту тексту в абзаці {#text-color}

Виділення певного [тексту]{.text-danger} іншим кольором приверне увагу користувачів книги.

```
[Текст]{.text-muted}
```

> Приклади кольорового забарвлення та відповідний йому "клас" зазначені нижче. 

<details class="more">
<summary>Додаткове кольорове забарвлення</summary>

`r span(class='text-muted', 'Кольорове виділення тексту за допомогою класу text-muted')` \n

`r span(class='text-primary', 'Кольорове виділення тексту за допомогою класу text-primary')` \n  

`r span(class='text-success', 'Кольорове виділення тексту за допомогою класу text-success')` \n

`r span(class='text-info', 'Кольорове виділення тексту за допомогою класу text-info')` \n

`r span(class='text-warning', 'Кольорове виділення тексту за допомогою класу text-warning')` \n

`r span(class='text-danger', 'Кольорове виділення тексту за допомогою класу text-danger')` \n

`r span(class='text-aqua', 'Кольорове виділення тексту за допомогою класу text-aqua')` \n

`r span(class='text-black', 'Кольорове виділення тексту за допомогою класу text-black')` \n

`r span(class='text-blue', 'Кольорове виділення тексту за допомогою класу text-blue')` \n

`r span(class='text-fuchsia', 'Кольорове виділення тексту за допомогою класу text-fuchsia')` \n

`r span(class='text-gray', 'Кольорове виділення тексту за допомогою класу text-gray')` \n

`r span(class='text-green', 'Кольорове виділення тексту за допомогою класу text-green')` \n

`r span(class='text-lime', 'Кольорове виділення тексту за допомогою класу text-lime')` \n

`r span(class='text-maroon', 'Кольорове виділення тексту за допомогою класу text-maroon')` \n

`r span(class='text-navy', 'Кольорове виділення тексту за допомогою класу text-navy')` \n

`r span(class='text-olive', 'Кольорове виділення тексту за допомогою класу text-olive')` \n

`r span(class='text-purple', 'Кольорове виділення тексту за допомогою класу text-purple')` \n

`r span(class='text-red', 'Кольорове виділення тексту за допомогою класу text-red')` \n

`r span(class='text-silver', 'Кольорове виділення тексту за допомогою класу text-silver')` \n

`r span(class='text-teal', 'Кольорове виділення тексту за допомогою класу text-teal')` \n

`r span(class='text-white', style='background: #ccc', 'Кольорове виділення тексту за допомогою класу text-white')` \n

`r span(class="text-yellow", 'Кольорове виділення тексту за допомогою класу text-yellow')` \n

</details>

Реалізація за допомогою атрибуту `style` дозволить виділити текcт кольором для якого не існує відповідного `класу`. 

```
[Текст]{style = "color: *колір*"}
```

Усі можливі варіації кольорів ви зможете знайти за даним [посиланням](https://www.w3schools.com/colors/colors_names.asp).

### Фонове виділення фрагменту тексту в абзаці {#text-bg}

Для швидкого виділення ==фрагменту тексту== жовтим кольором використовується подвійний знак дорівнює `==`. Виділення певного тексту може вказати, що його ==потрібно запам'ятати або ж занотувати==. 

```
==Текст==
```

У разі необхідності використання подвійного символу `=` в тексті, між ними потрібно поставити екранований бекслеш: C=\\= ==виділений текст==.

```
C=\\= ==виділений текст==
```

Якщо ж потрібно поставити символ `\` між двома символами `=`, то використовуються два екранованих бекслеш: C=\\\\= ==виділений текст==. 

```
C=\\\\= ==виділений текст==
```

У разі необхідності використання [іншого кольору]#green для фонового виділення тексту використовується назва [HTML-кольору](https://www.w3schools.com/colors/colors_names.asp) або його трьох- або шестизначний hex-код:

```
[іншого кольору]#green
[іншого кольору]#777
[іншого кольору]#a1b2c3
```

<details class="more">
<summary>Веселка</summary>
[в]#RED[е]#ORANGE[с]#YELLOW[е]#GREEN[л]#SkyBlue[к]#blue[а]#purple

```
[в]#RED[е]#ORANGE[с]#YELLOW[е]#GREEN[л]#SkyBlue[к]#blue[а]#purple
```
</details>

Для останнього виду можна застосовувати вкладеність, як у прикладі - [зовнішній [вкладений колір]#lightblue колір]#yellow:

```
[зовнішній [вкладений колір]#lightblue колір]#yellow
```

Виділення певного [тексту]{.bg-success} за допомогою додаткових Bootstrap-класів відбувається наступним чином:

```
[Текст]{.bg-success} 
```

> Приклади кольорового виділення та відповідний йому "клас" Bootstrap зазначені нижче. 

<details class="more">
<summary>Додаткове кольорове виділення</summary>

`r span(class='bg-muted', 'Кольорове виділення фону за допомогою класу bg-muted')` \n

`r span(class='bg-primary', 'Кольорове виділення фону за допомогою класу bg-primary')` \n

`r span(class='bg-success', 'Кольорове виділення фону за допомогою класу bg-success')` \n

`r span(class='bg-info', 'Кольорове виділення фону за допомогою класу bg-info')` \n

`r span(class='bg-warning', 'Кольорове виділення фону за допомогою класу bg-warning')` \n

`r span(class='bg-danger', 'Кольорове виділення фону за допомогою класу bg-danger')` \n

`r span(class='bg-aqua', 'Кольорове виділення фону за допомогою класу bg-aqua')` \n

`r span(class='bg-black', 'Кольорове виділення фону за допомогою класу bg-black')` \n

`r span(class='bg-blue', 'Кольорове виділення фону за допомогою класу bg-blue')` \n

`r span(class='bg-fuchsia', 'Кольорове виділення фону за допомогою класу bg-fuchsia')` \n

`r span(class='bg-gray', 'Кольорове виділення фону за допомогою класу bg-gray')` \n

`r span(class='bg-green', 'Кольорове виділення фону за допомогою класу bg-green')` \n

`r span(class='bg-lime', 'Кольорове виділення фону за допомогою класу bg-lime')` \n

`r span(class='bg-maroon', 'Кольорове виділення фону за допомогою класу bg-maroon')` \n

`r span(class='bg-navy', 'Кольорове виділення фону за допомогою класу bg-navy')` \n

`r span(class='bg-olive', 'Кольорове виділення фону за допомогою класу bg-olive')` \n

`r span(class='bg-purple', 'Кольорове виділення фону за допомогою класу bg-purple')` \n

`r span(class='bg-red', 'Кольорове виділення фону за допомогою класу bg-red')` \n

`r span(class='bg-silver', 'Кольорове виділення фону за допомогою класу bg-silver')` \n

`r span(class='bg-teal', 'Кольорове виділення фону за допомогою класу bg-teal')` \n

`r span(class='bg-white', 'Кольорове виділення фону за допомогою класу bg-white')` \n

`r span(class='bg-yellow', 'Кольорове виділення фону за допомогою класу bg-yellow')` \n

</details>

Реалізація за допомогою атрибуту `style` дозволить виділити текcт кольором для якого не існує відповідного `класу`.

```
[Текст]{style = "background: muted"}
```

### Комбінування виділення тексту кольором та фоном {#text-color-bg}

Використання кольорового виділення тексту може призвести до втрати читаємості тексту, тому звертайте увагу на це при обранні кольорів та за можливості комбінуйте їх.

```
[Текст, який необхідно виділити фоновим кольором]{.text-muted .bg-blue}

або

[Текст, який необхідно виділити фоновим кольором]{style = "color: muted; background: blue;"}
```

<span class="text-yellow bg-black">Приклад комбінуваня класів</span>

### Вкладеність елементів span {#span-contributions}

Елементи span можуть знаходитись всередині інших елементів, приклад наведено нижче:

[Цей текст одного кольору, [а цей текст іншого]{.text-danger}, тому що він знаходиться всередині іншого]{.text-muted}

```
[Текст одного кольору, [текст іншого]{.text-danger}]{.text-muted}
```

## Посилання {#links}

### Звичайне посилання {#simple-link}  

[Сайт дистанційного навчання](https://moodle.com/)

```
[Сайт дистанційного навчання](https://moodle.com/)
```

### Посилання зі спливаючою підказкою {#refer-link}

[Сайт дистанційного навчання](https://moodle.com/ "Посилання на moodle")

```
[Сайт дистанційного навчання](https://moodle.com/ "Посилання на moodle")
```

### Посилання на розділ в книзі {#section-list}

Посилання на розділ/підрозділ [[див. п.п. 1.1](#p1-1)].

```
Посилання на розділ/підрозділ [[див. п.п. 1.1](#p1-1)].
```
