Введение
Markdown — это удобный в читаемом и написании язык для форматирования обычного текста. Вы можете использовать синтаксис Markdown вместе с некоторыми дополнительными html-тегами для форматирования записи в GitHub, в таких местах, как репозиторий READMEs и комментарии о запросах на вытягивание и проблемах. В этом руководстве описаны некоторые расширенные функции форматирования, создав или изменив файл сведений для профиля GitHub.
Если вы не знакомы с Markdown, вам может потребоваться начать с курса "Базовый синтаксис записи и форматирования" или курса "Обмен данными с помощью Markdown GitHub Skills.
Если у вас уже есть файл сведений профиля, вы можете следовать этому руководству, добавив некоторые функции в существующий файл СВЕДЕНИЙ или создав gist с помощью файла Markdown с именем вроде about-me.md
. Дополнительные сведения см. в разделе Создание gist.
Создание или изменение сведений профиля
Файл сведений профиля позволяет делиться сведениями о себе с сообществом на экземпляр GitHub Enterprise Server. Файл сведений отображается в верхней части страницы профиля.
Если у вас еще нет файла сведений профиля, вы можете добавить его.
- Создайте репозиторий с тем же именем, что и имя пользователя GitHub, инициализировав репозиторий с помощью
README.md
файла. Дополнительные сведения см. в разделе Управление файлом сведений о профиле. - Измените
README.md
файл и удалите текст шаблона (начиная### Hi there
с ), который автоматически добавляется при создании файла.
Если у вас уже есть файл сведений профиля, его можно изменить на странице профиля.
-
В правом верхнем углу любой страницы GitHub Enterprise Server нажмите фото своего профиля, затем выберите Ваш профиль.
-
Щелкните рядом с файлом сведений профиля.
Добавление изображения в соответствии с вашими посетителями
Изображения можно включать в GitHub. Здесь вы добавите адаптивное изображение, например баннер, в начало профиль README.
С помощью элемента HTML <picture>
с prefers-color-scheme
функцией мультимедиа можно добавить изображение, которое изменяется в зависимости от того, использует ли посетитель светлый или темный режим. Дополнительные сведения см. в разделе Управление параметрами темы.
-
Скопируйте и вставьте следующую разметку в файл
README.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-IMAGE
URL-адресом изображения, отображаемого для посетителей в темном режиме. - Замените
YOUR-LIGHTMODE-IMAGE
URL-адресом изображения, отображаемого для посетителей в светлом режиме. - Замените
YOUR-DEFAULT-IMAGE
URL-адресом изображения, отображаемого в случае, если другие изображения не могут быть сопоставлены, например, если посетитель использует браузер, который не поддерживает эту функцию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, чтобы добавить комментарий, который будет скрыт в выходных данных. Здесь вы добавите комментарий, чтобы напомнить себе об обновлении README позже.
-
В двух строках
## About me
под заголовком вставьте комментарий с помощью следующей разметки.<!-- COMMENT -->
Замените
COMMENT
элементом to-do, который вы напоминаете себе о необходимости выполнить что-то позже (например, чтобы добавить дополнительные элементы в таблицу). -
Чтобы убедиться, что комментарий скрыт в выходных данных, перейдите на вкладку Предварительный просмотр .
Пример комментария
## About me <!-- TO DO: add more details about me later -->
Сохранение работы
Когда вы будете довольны изменениями, сохраните профилировать файл сведений, нажав кнопку Зафиксировать изменения.
Фиксация непосредственно в main
ветви сделает изменения видимыми для любого посетителя в вашем профиле. Если вы хотите сохранить свою работу, но не готовы сделать ее видимой в своем профиле, можно выбрать Создать новую ветвь для этой фиксации и запустить запрос на вытягивание.
Дальнейшие действия
- Ознакомьтесь с дополнительными функциями форматирования. Например, см. "Создание и выделение блоков кода".
- Используйте новые навыки при общении в GitHub, в вопросах, запросах на вытягивание и обсуждениях. Дополнительные сведения см. в разделе Взаимодействие с GitHub.