Skip to main content

Краткое руководство по написанию текста на GitHub

Узнайте о расширенных функциях форматирования, создав gist, чтобы описать себя.

Введение

Markdown — это удобный для чтения язык для форматирования обычного текста. Вы можете использовать синтаксис Markdown вместе с некоторыми дополнительными HTML-тегами для форматирования записи в GitHub, в таких местах, как репозиторий READMEs и комментарии к запросам на вытягивание и проблемам. В этом руководстве вы узнаете о некоторых расширенных функциях форматирования, создав gist.

Если вы еще не знакомы с Markdown, вам может потребоваться начать с курса "Базовый синтаксис записи и форматирования" или курса Взаимодействие с помощью Markdown GitHub Skills.

Создание gist

Gist позволяет хранить фрагменты кода и другие фрагменты информации или предоставлять общий доступ к ним другим пользователям в your enterprise. Чтобы использовать функции форматирования в gist, добавьте gist-файл с расширением .md .

  1. Перейдите на gist home page, http(s)://gist.[hostname].
  2. При необходимости введите описание gist, например "Обо мне".
  3. В поле Имя файла, включая расширение... введите about-me.md.

Дополнительные сведения см. в разделе Создание gist.

Добавление изображения в соответствии с вашими посетителями

В GitHub можно включать изображения. Здесь вы добавите адаптивное изображение, например баннер, в верхнюю часть gist.

С помощью элемента HTML <picture> с функцией prefers-color-scheme мультимедиа можно добавить изображение, которое изменяется в зависимости от того, использует ли посетитель светлый или темный режим. Дополнительные сведения см. в разделе Управление параметрами темы.

  1. Скопируйте и вставьте следующую разметку в файл 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>
  2. Замените заполнители в разметке URL-адресами выбранных изображений. Кроме того, чтобы сначала опробовать эту функцию, можно скопировать URL-адреса из нашего примера ниже.

    • Замените YOUR-DARKMODE-IMAGE URL-адресом изображения, отображаемого для посетителей в темном режиме.
    • Замените YOUR-LIGHTMODE-IMAGE URL-адресом изображения, отображаемого для посетителей в светлом режиме.
    • Замените YOUR-DEFAULT-IMAGE URL-адресом отображаемого изображения, если ни один из других изображений не может быть сопоставлен, например, если посетитель использует браузер, который не поддерживает эту функцию prefers-color-scheme .
  3. Чтобы сделать изображение доступным для посетителей, использующих средство чтения с экрана, замените YOUR-ALT-TEXT его описанием.

  4. Чтобы проверить правильность отображения изображения, перейдите на вкладку Предварительный просмотр .

Дополнительные сведения об использовании изображений в 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 можно использовать для упорядочения информации. Здесь вы будете использовать таблицу, чтобы представить себя, ранжируя что-то, например ваши наиболее часто используемые языки программирования или платформы, то, что вы тратите свое время на обучение, или ваши любимые хобби. Если столбец таблицы содержит числа, полезно выровнять столбец по правому краю, используя синтаксис --: под строкой заголовка.

  1. Вернитесь на вкладку Изменить новый файл .

  2. Чтобы представиться, две строки под тегом </picture> , добавьте заголовок ## About me и короткий абзац о себе, как показано ниже.

    ## About me
    
    Hi, I'm Mona. You might recognize me as GitHub's mascot.
    
  3. В двух строках под этим абзацем вставьте таблицу, скопировав и вставив следующую разметку.

    Markdown
    | Rank | THING-TO-RANK |
    |-----:|---------------|
    |     1|               |
    |     2|               |
    |     3|               |
  4. В столбце справа замените THING-TO-RANK словами "Языки", "Хобби" или другими словами и заполните столбец своим списком вещей.

  5. Чтобы проверить правильность отображения таблицы, перейдите на вкладку Предварительный просмотр .

Дополнительные сведения см. в разделе Упорядочение информации с помощью таблиц.

Пример

## About me

Hi, I'm Mona. You might recognize me as GitHub's mascot.

| Rank | Languages |
|-----:|-----------|
|     1| Javascript|
|     2| Python    |
|     3| SQL       |

Как это выглядит

Снимок экрана: вкладка "Предварительный просмотр" с заголовком "Обо мне" и отображаемой таблицей со списком языков

Добавление свернутого раздела

Чтобы сохранить содержимое в порядке, можно использовать <details> тег для создания разворачиваемого свернутого раздела.

  1. Чтобы создать свернутый раздел для созданной таблицы, заключите таблицу в <details> теги, как показано в следующем примере.

    HTML
    <details>
    <summary>My top THINGS-TO-RANK</summary>
    
    YOUR TABLE
    
    </details>
  2. <summary> Между тегами замените THINGS-TO-RANK на то, что вы ранжированы в таблице.

  3. При необходимости, чтобы по умолчанию раздел отображалось как открытый, добавьте open атрибут в <details> тег .

    <details open>
    
  4. Чтобы проверить правильность отображения свернутого раздела, перейдите на вкладку Предварительный просмотр .

Пример

<details>
<summary>My top languages</summary>

| Rank | Languages |
|-----:|-----------|
|     1| Javascript|
|     2| Python    |
|     3| SQL       |
  
</details>

Как это выглядит

Снимок экрана: вкладка "Предварительный просмотр" с свернутым разделом "Мои лучшие языки", отмеченным стрелкой раскрывающегося списка

Добавление цитаты

В Markdown есть много других вариантов форматирования содержимого. Здесь вы добавите горизонтальное правило для разделения страницы и блок-кавычки для форматирования любимой цитаты.

  1. В нижней части файла в двух строках под </details> тегом добавьте горизонтальное правило, введя три или более дефисов.

    ---
    
  2. Под строкой --- добавьте цитату, введя разметку, как показано ниже.

    > QUOTE
    

    Замените QUOTE цитатой по своему выбору. Кроме того, можно скопировать цитату из приведенного ниже примера.

  3. Чтобы убедиться, что все отображается правильно, откройте вкладку Предварительный просмотр .

Пример

---
> If we pull together and commit ourselves, then we can push through anything.

— Mona the Octocat

Как это выглядит

Снимок экрана: вкладка "Предварительный просмотр" с цитатой с отступом под толстой горизонтальной линией

Добавление комментария

Вы можете использовать синтаксис комментариев HTML, чтобы добавить комментарий, который будет скрыт в выходных данных. Здесь вы добавите комментарий, чтобы напомнить себе, что позже обновите gist.

  1. В двух строках под заголовком ## About me вставьте комментарий, используя следующую разметку.

    <!-- COMMENT -->
    

    Замените COMMENT элементом to-do, чтобы напомнить себе о необходимости выполнить что-то позже (например, добавить дополнительные элементы в таблицу).

  2. Чтобы убедиться, что комментарий скрыт в выходных данных, перейдите на вкладку Предварительный просмотр .

Пример

## About me

<!-- TO DO: add more details about me later -->

Сохранение работы

Если вы довольны изменениями, сохраните gist.

  • Чтобы сохранить gist скрытым от поисковых систем, но видимым для всех пользователей, которым вы предоставляете URL-адрес, щелкните Создать секрет gist.
  • Если вы рады тому, что ваш gist был видим для всех пользователей в your enterprise, щелкните Создать внутренний gist

Дальнейшие действия