Введение
Markdown — это удобный для чтения язык для форматирования обычного текста. Вы можете использовать синтаксис Markdown вместе с некоторыми дополнительными HTML-тегами для форматирования записи в GitHub, в таких местах, как репозиторий READMEs и комментарии к запросам на вытягивание и проблемам. В этом руководстве вы узнаете о некоторых расширенных функциях форматирования, создав gist.
Если вы еще не знакомы с Markdown, вам может потребоваться начать с курса "Базовый синтаксис записи и форматирования" или курса Взаимодействие с помощью Markdown GitHub Skills.
Создание gist
Gist позволяет хранить фрагменты кода и другие фрагменты информации или предоставлять общий доступ к ним другим пользователям в your enterprise. Чтобы использовать функции форматирования в gist, добавьте gist-файл с расширением .md .
- Перейдите на gist home page,
http(s)://gist.[hostname]. - При необходимости введите описание gist, например "Обо мне".
- В поле Имя файла, включая расширение... введите
about-me.md.
Дополнительные сведения см. в разделе Создание gist.
Добавление изображения в соответствии с вашими посетителями
В GitHub можно включать изображения. Здесь вы добавите адаптивное изображение, например баннер, в верхнюю часть gist.
С помощью элемента HTML <picture> с функцией prefers-color-scheme мультимедиа можно добавить изображение, которое изменяется в зависимости от того, использует ли посетитель светлый или темный режим. Дополнительные сведения см. в разделе Управление параметрами темы.
-
Скопируйте и вставьте следующую разметку в файл
about-me.md.HTML <picture> <source media="(prefers-color-scheme: dark)" srcset="YOUR-DARKMODE-IMAGE"> <source media="(prefers-color-scheme: light)" srcset="YOUR-LIGHTMODE-IMAGE"> <img alt="YOUR-ALT-TEXT" src="YOUR-DEFAULT-IMAGE"> </picture> -
Замените заполнители в разметке URL-адресами выбранных изображений. Кроме того, чтобы сначала опробовать эту функцию, можно скопировать URL-адреса из нашего примера ниже.
- Замените
YOUR-DARKMODE-IMAGEURL-адресом изображения, отображаемого для посетителей в темном режиме. - Замените
YOUR-LIGHTMODE-IMAGEURL-адресом изображения, отображаемого для посетителей в светлом режиме. - Замените
YOUR-DEFAULT-IMAGEURL-адресом отображаемого изображения, если ни один из других изображений не может быть сопоставлен, например, если посетитель использует браузер, который не поддерживает эту функциюprefers-color-scheme.
- Замените
-
Чтобы сделать изображение доступным для посетителей, использующих средство чтения с экрана, замените
YOUR-ALT-TEXTего описанием. -
Чтобы проверить правильность отображения изображения, перейдите на вкладку Предварительный просмотр .
Дополнительные сведения об использовании изображений в Markdown см. в разделе Базовый синтаксис записи и форматирования.
Пример
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/25423296/163456776-7f95b81a-f1ed-45f7-b7ab-8fa810d529fa.png">
<source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
<img alt="Shows an illustrated sun in light mode and a moon with stars in dark mode." src="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
</picture>
Как это выглядит
Добавление таблицы
Таблицы Markdown можно использовать для упорядочения информации. Здесь вы будете использовать таблицу, чтобы представить себя, ранжируя что-то, например ваши наиболее часто используемые языки программирования или платформы, то, что вы тратите свое время на обучение, или ваши любимые хобби. Если столбец таблицы содержит числа, полезно выровнять столбец по правому краю, используя синтаксис --: под строкой заголовка.
-
Вернитесь на вкладку Изменить новый файл .
-
Чтобы представиться, две строки под тегом
</picture>, добавьте заголовок## About meи короткий абзац о себе, как показано ниже.## About me Hi, I'm Mona. You might recognize me as GitHub's mascot. -
В двух строках под этим абзацем вставьте таблицу, скопировав и вставив следующую разметку.
Markdown | Rank | THING-TO-RANK | |-----:|---------------| | 1| | | 2| | | 3| | -
В столбце справа замените
THING-TO-RANKсловами "Языки", "Хобби" или другими словами и заполните столбец своим списком вещей. -
Чтобы проверить правильность отображения таблицы, перейдите на вкладку Предварительный просмотр .
Дополнительные сведения см. в разделе Упорядочение информации с помощью таблиц.
Пример
## About me
Hi, I'm Mona. You might recognize me as GitHub's mascot.
| Rank | Languages |
|-----:|-----------|
| 1| Javascript|
| 2| Python |
| 3| SQL |
Как это выглядит
Добавление свернутого раздела
Чтобы сохранить содержимое в порядке, можно использовать <details> тег для создания разворачиваемого свернутого раздела.
-
Чтобы создать свернутый раздел для созданной таблицы, заключите таблицу в
<details>теги, как показано в следующем примере.HTML <details> <summary>My top THINGS-TO-RANK</summary> YOUR TABLE </details> -
<summary>Между тегами заменитеTHINGS-TO-RANKна то, что вы ранжированы в таблице. -
При необходимости, чтобы по умолчанию раздел отображалось как открытый, добавьте
openатрибут в<details>тег .<details open> -
Чтобы проверить правильность отображения свернутого раздела, перейдите на вкладку Предварительный просмотр .
Пример
<details>
<summary>My top languages</summary>
| Rank | Languages |
|-----:|-----------|
| 1| Javascript|
| 2| Python |
| 3| SQL |
</details>
Как это выглядит
Добавление цитаты
В Markdown есть много других вариантов форматирования содержимого. Здесь вы добавите горизонтальное правило для разделения страницы и блок-кавычки для форматирования любимой цитаты.
-
В нижней части файла в двух строках под
</details>тегом добавьте горизонтальное правило, введя три или более дефисов.--- -
Под строкой
---добавьте цитату, введя разметку, как показано ниже.> QUOTEЗамените
QUOTEцитатой по своему выбору. Кроме того, можно скопировать цитату из приведенного ниже примера. -
Чтобы убедиться, что все отображается правильно, откройте вкладку Предварительный просмотр .
Пример
---
> If we pull together and commit ourselves, then we can push through anything.
— Mona the Octocat
Как это выглядит
Добавление комментария
Вы можете использовать синтаксис комментариев HTML, чтобы добавить комментарий, который будет скрыт в выходных данных. Здесь вы добавите комментарий, чтобы напомнить себе, что позже обновите gist.
-
В двух строках под заголовком
## About meвставьте комментарий, используя следующую разметку.<!-- COMMENT -->
Замените
COMMENTэлементом to-do, чтобы напомнить себе о необходимости выполнить что-то позже (например, добавить дополнительные элементы в таблицу). -
Чтобы убедиться, что комментарий скрыт в выходных данных, перейдите на вкладку Предварительный просмотр .
Пример
## About me <!-- TO DO: add more details about me later -->
Сохранение работы
Если вы довольны изменениями, сохраните gist.
- Чтобы сохранить gist скрытым от поисковых систем, но видимым для всех пользователей, которым вы предоставляете URL-адрес, щелкните Создать секрет gist.
- Если вы рады тому, что ваш gist был видим для всех пользователей в your enterprise, щелкните Создать внутренний gist
Дальнейшие действия
- Узнайте больше о расширенных функциях форматирования. Например, см. "Создание и выделение блоков кода".
- Используйте новые навыки при общении в GitHub, в проблемах, запросах на вытягивание и обсуждениях. Дополнительные сведения см. в разделе Взаимодействие с GitHub.