04. Строчные элементы
Для выполнения этого задания вам нужно создать новый репозиторий.
Все главы являются теоретическими, их нужно только прочитать.
Ссылки
Часто случается так, что в тексте документации нам нужно поместить ссылку на внешний ресурс или другое место этого же документа. Общий вид ссылки в markdown выглядит так:
[текст ссылки](адрес_ссылки)
Например:
[Реальный кейс: с чем мы столкнулись при переходе на облачную модель](https://habr.com/ru/company/lanit/blog/599945/)
Реальный кейс: с чем мы столкнулись при переходе на облачную модель
Но что, если мы используем одну и туже ссылку много раз в тексте?
Можно ли нам как то упростить себе жизнь и записать
эту ссылку всего один раз? Давайте свяжем её, как переменную в обычных языках программирования, с каким-нибудь коротким названием
и будем дальше обращаться к нему. Название должно быть уникальным. Правда, в отличие от переменных, наше слово
будет навсегда связанным с одной конкретной ссылкой, и, в строгом смысле слова, переменной называться просто не может.
Потому что не меняется. Такие слова называют id(identification number), идентификационный номер. Ссылки, созданные такими
образом будем называть многоразовыми.
id - уникальный идентификатор, раньше он мог состоять только из уникальных
цифр, потому что поначалу широко использовался в таблицах баз данных. В свою очередь этот подход заимствован
из бумажых реестров, где нумеровалась
каждая строка. Сейчас id - это всё ещё уникальный идентификатор. При этом он может быть
уже не просто числом, но и просто последовательностью символов.
Чтобы создать многоразовую ссылку, нужно немного изменить вид обычной ссылки. В квадратных скобках мы
указываем наш id. Идентификаторы ссылок могут состоять из букв, цифр, пробелов и знаков пунктуации,
однако они не чувствительны к
регистру. То есть эти два варианта эквивалентны:
[my_id]: http://example.com/ "Необязательная подсказка"
[mY_Id]: http://example.com/ "Необязательная подсказка"
В самом тексте она не отображается, но в исходники вставлена эта строчка
Теперь мы можем ссылаться на него из любого места документа.
[текст нашей первой ссылки][my_id]
[текст нашей второй ссылки][my_id]
[текст нашей третьей ссылки][my_id]
Получим:
Также можно выводить сам id вместо названия, для этого нужно написать id в первых квадратных скобках, а вторые
оставить пустыми. Что за символы до и после объявления таких ссылок мы обсудим немного позже. Так обозначается
блок кода.
[my_id][]
Получим: my_id
Если нужно вывести просто ссылку без замещающего адрес текста, то эту ссылку можно просто поместить между символами
< и >.
<https://habr.com/>
Получим:
Выделение текста
Чтобы выделить текст курсивом, нужно в его начале и конце поставить по одному символу звёздочки * или
нижнего подчёркивания _. Чтобы сделать текст полужирным, нужно две
Если ввести следующий текст:
Как мы видели ранее, *CW33300* - это конвейерный процессор, _то есть он объединяет множество команд в очередь_
и выполняет их параллельно на разных этапах. Это значительно повышает скорость обработки команд, но без
должного контроля это может привести к конфликтам конвейера, вызывающим ошибки вычислений.
Архитектура **MIPS I** подвержена конфликтам __управления и конфликтам данных__, то есть команды могут выполняться
не тогда, когда нужно, и оперировать с устаревшими данными до их обновления.
Получим:
Как мы видели ранее, CW33300 - это конвейерный процессор, то есть он объединяет множество команд в очередь и выполняет их параллельно на разных этапах. Это значительно повышает скорость обработки команд, но без должного контроля это может привести к конфликтам конвейера, вызывающим ошибки вычислений.
Архитектура MIPS I подвержена конфликтам управления и конфликтам данных, то есть команды могут выполняться не тогда, когда нужно, и оперировать с устаревшими данными до их обновления.
Блоки кода
Чтобы вставить в документацию тот или иной код, причём так, чтобы был подсвечен синтаксис языка, нужно использовать специальный блок - блок кода. Для этого нужно либо каждую строчку абзаца начинать с четырёх отступов, либо на первой и последней строчке написать три апострофа `.
Тут важно различать апостроф ', который соответствует букве э, но на английской раскладке и `, который
соответствует ё. Нам нужен именно ё.
Например:
```
public static void swap(int[] arr, int l, int r) {
int tmp = arr[l];
arr[l] = arr[r];
arr[r] = tmp;
}
```
Получим:
public static void swap(int[] arr, int l, int r) {
int tmp = arr[l];
arr[l] = arr[r];
arr[r] = tmp;
}
Обратите внимание на то, что у образца добавлены отступы. Это происходит из-за того, что markdown - тоже язык. Все вставки markdown я оформил при помощи таких блоков. Если не сохранить отступы, то интерпретатор решит, что у меня два пустых блока кода перед исходником и после, а сам исходник не оформит.
Он интерпретирует последовательно, не видит картины в целом, тем более не может догадаться, что подразумевалось. Ему нужны конкретные инструкции. Он считывает первые три апострофа, потом сразу три вторых, и блок кода для него на этом заканчивается. Дальше он просто выводит все символы исходника и снова встречает три апострофа. Для него это начало блока кода. После этого он снова встречает три апострофа. Блок кода снова закончился.
Вот так выглядит работающее оформление в моих исходниках:
Обратите внимание: после открывающих блок кода апострофов добавлено слово md. Это не просто так. Интерпретатор не умеет угадывать язык. Ему нужно явно это указать.
```java
public static void swap(int[] arr, int l, int r) {
int tmp = arr[l];
arr[l] = arr[r];
arr[r] = tmp;
}
```
Получим:
class HelloWorld {
public static void main(String args[]) {
System.out.println("Hello, World");
}
}
Месседжер Teleram тоже использует блоки кода. Вы можете точно также отправить свой код товарищу с подсветкой синтаксиса.
Для этого нужно выделить его теми же тремя апострофами ё.
Текст отправляемого сообщения и результат будут выглядеть примерно так:
Если вам не нужно выделять несколько строк кода, а всего несколько символов или слов, можно использовать
одиночный апостроф, который ё, а не э:
`CP2`, или Geometry Transformation Engine (`GTE`) - это специальный математический
сопроцессор, ускоряющий векторные и матричные вычисления.
CP2, или Geometry Transformation Engine (GTE) - это специальный математический
сопроцессор, ускоряющий векторные и матричные вычисления.
Изображения
Изображения добавляются в документацию так же, как ссылки. Только перед описанием картинки нужно поставить восклицательный знак:
Получим картинку Шлёпы:
Текст, написанный в квадратных скобках отображается, пока не загрузилась картинка. Также можно добавить подсказку:
Если навести курсор мыши на картинку, появится текст "Это Шлёпа".
Также можно создать многоразовую картинку.
Создаём сначала id для картинки:
[floppa]: /img/project/markdown/floppa.png "Big Russian Cat"
Я добавил здесь этот код в исходниках, но его не видно, зато будет видно сами картинки:
![Floppa1][floppa]
![Floppa2][floppa]
![Floppa3][floppa]
![Floppa4][floppa]
Обратный слеш
Обратный слеш \ находится над кнопкой Enter. Вернее, эту кнопку надо зажать одновременно с клавишей Shift.
Сама клавиша, как вы, возможно догадались или знаете, просто слеш /.
Этот слеш применяется для так называемого экранирования экранирования управляющих символов. Управляющие символы - это символы: * \ ` _ { } [ ] () # + - . !
Каждый из них участвует в той или иной команде, поэтому они называются управляющими. Если их использовать не в командах, а просто в тексте, то интерпретатор может не понять, что ему нужно сделать: толи это команда, толи просто символ.
В таких случая перед символом ставят обратный слеш.
Тогда символ защищён от интерпретатора. Интерпретатор увидит, что перед управляющим символом стоит
экранирующий символ \. Чтобы экранировать сам символ обратного слэша, надо добавить перед ним второй слэш \\
\* \\ \` \_ \{ \} \[ \] \(\) \# \+ \- \. \!
Получим:
* \ ` _ { } [ ] () # + - . !
Задание
Чтобы картинки отображались в readme на github, нужно добавить её в папку локального репозитория. После этого нужно добавить её в список индексации и указывать относительный путь.
Например, если картинка test.png лежит внутри папки img, которая в свою очередь лежит в папке репозитория,
то её адрес будет img/test.png.
В таблице ниже представлены ссылки на статьи с хабра. Вам нужно написать readme.md файл
порождающий текст, свёрстанный, как статья по вашей ссылке. Репозиторий нужно опубликовать
на гитхабе и прислать ссылку на него в соответствующий контест.
Комментарии, хэш-теги и прочее верстать не нужно. Раскрывающиеся элементы нужно верстать, как обычный текст. Если статья слишком большая, то необходимо сверстать первые 7 прокруток на экране, не меньшем школьных при масштабе .
Если в статье есть видео, просто не учитывайте их. Анимации gif - это такие же картинки.
Чтобы сохранить картинку, кликните по ней правой кнопкой мыши и выберите пункт Сохранить картинку как....
Чтобы определиться, какую статью нужно верстать, найдите в таблице ваш номер в группе (см. группу в eschool либо можно посмотреть в этом файле), в этой же строке будет нужная вам ссылка.