Как правильно написать readme md

Introduction

Markdown is an easy-to-read, easy-to-write language for formatting plain text. You can use Markdown syntax, along with some additional HTML tags, to format your writing on GitHub, in places like repository READMEs and comments on pull requests and issues. In this guide, you’ll learn some advanced formatting features by creating or editing a README for your GitHub profile.

If you’re new to Markdown, you might want to start with «Basic writing and formatting syntax» or the Communicate using Markdown GitHub Skills course.

If you already have a profile README, you can follow this guide by adding some features to your existing README, or by creating a gist with a Markdown file called something like about-me.md. For more information, see «Creating gists.»

Creating or editing your profile README

Your profile README lets you share information about yourself with the community on GitHub.com. The README is displayed at the top of your profile page.

If you don’t already have a profile README, you can add one.

  1. Create a repository with the same name as your GitHub username, initializing the repository with a README.md file. For more information, see «Managing your profile README.»
  2. Edit the README.md file and delete the template text (beginning ### Hi there) that is automatically added when you create the file.

If you already have a profile README, you can edit it from your profile page.

  1. In the upper-right corner of any GitHub page, click your profile photo, then click Your profile.

  2. Click the next to your profile README.

    Screenshot of @octocat's profile README. A pencil icon is highlighted with an orange outline.

Adding an image to suit your visitors

You can include images in your communication on GitHub. Here, you’ll add a responsive image, such as a banner, to the top of your profile README.

By using the HTML <picture> element with the prefers-color-scheme media feature, you can add an image that changes depending on whether a visitor is using light or dark mode. For more information, see «Managing your theme settings.»

  1. Copy and paste the following markup into your README.md file.

  2. Replace the placeholders in the markup with the URLs of your chosen images. Alternatively, to try the feature first, you can copy the URLs from our example below.

    • Replace YOUR-DARKMODE-IMAGE with the URL of an image to display for visitors using dark mode.
    • Replace YOUR-LIGHTMODE-IMAGE with the URL of an image to display for visitors using light mode.
    • Replace YOUR-DEFAULT-IMAGE with the URL of an image to display in case neither of the other images can be matched, for example if the visitor is using a browser that does not support the prefers-color-scheme feature.
  3. To make the image accessible for visitors who are using a screen reader, replace YOUR-ALT-TEXT with a description of the image.

  4. To check the image has rendered correctly, click the Preview tab.

For more information on using images in Markdown, see «Basic writing and formatting syntax.»

Example of a responsive image

<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>

How the image looks

Screenshot of the "Preview" tab of a comment, in light mode. An image of a smiling sun is displayed.

Adding a table

You can use Markdown tables to organize information. Here, you’ll use a table to introduce yourself by ranking something, such as your most-used programming languages or frameworks, the things you’re spending your time learning, or your favorite hobbies. When a table column contains numbers, it’s useful to right-align the column by using the syntax --: below the header row.

  1. Return to the Edit file tab.

  2. To introduce yourself, two lines below the </picture> tag, add an ## About me header and a short paragraph about yourself, like the following.

    ## About me
    
    Hi, I'm Mona. You might recognize me as GitHub's mascot.
    
  3. Two lines below this paragraph, insert a table by copying and pasting the following markup.

  4. In the column on the right, replace THING-TO-RANK with «Languages,» «Hobbies,» or anything else, and fill in the column with your list of things.

  5. To check the table has rendered correctly, click the Preview tab.

For more information, see «Organizing information with tables.»

Example of a table

## About me

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

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

How the table looks

Screenshot of the "Preview" tab of a comment. Under the "About me" heading is a rendered table with a ranked list of languages.

Adding a collapsed section

To keep your content tidy, you can use the <details> tag to create an expandible collapsed section.

  1. To create a collapsed section for the table you created, wrap your table in <details> tags like in the following example.

  2. Between the <summary> tags, replace THINGS-TO-RANK with whatever you ranked in your table.

  3. Optionally, to make the section display as open by default, add the open attribute to the <details> tag.

    <details open>
    
  4. To check the collapsed section has rendered correctly, click the Preview tab.

Example of a collapsed section

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

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

</details>

How the collapsed section looks

Screenshot of the "Preview" tab of a comment. To the left of the words "Top languages" is an arrow indicating that the section can be expanded.

Adding a quote

Markdown has many other options for formatting your content. Here, you’ll add a horizontal rule to divide your page and a blockquote to format your favorite quote.

  1. At the bottom of your file, two lines below the </details> tag, add a horizontal rule by typing three or more dashes.

    ---
    
  2. Below the --- line, add a quote by typing markup like the following.

    > QUOTE
    

    Replace QUOTE with a quote of your choice. Alternatively, copy the quote from our example below.

  3. To check everything has rendered correctly, click the Preview tab.

Example of a quote

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

— Mona the Octocat

How the quote looks

Screenshot of the "Preview" tab of a comment. A quote is indented below a thick horizontal line.

You can use HTML comment syntax to add a comment that will be hidden in the output. Here, you’ll add a comment to remind yourself to update your README later.

  1. Two lines below the ## About me header, insert a comment by using the following markup.

    <!-- COMMENT -->
    

    Replace COMMENT with a «to-do» item you remind yourself to do something later (for example, to add more items to the table).

  2. To check your comment is hidden in the output, click the Preview tab.

## About me

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

Saving your work

When you’re happy with your changes, save your profile README by clicking Commit changes.

Committing directly to the main branch will make your changes visible to any visitor on your profile. If you want to save your work but aren’t ready to make it visible on your profile, you can select Create a new branch for this commit and start a pull request.

Next steps

  • Continue to learn about advanced formatting features. For example, see «Creating diagrams» and «Creating and highlighting code blocks.»
  • Use your new skills as you communicate across GitHub, in issues, pull requests, and discussions. For more information, see «Communicating on GitHub.»

Перевод статьи
«How to Write an Awesome GitHub README».

README writing

Я прочел самый ранний (из тех, что смог
найти) файл README. Он был написан в 1975 году
Вильямом Дж. Эрлом из CS-отдела UIC. Текст
суховат, но удивительно актуален даже
44 года спустя. «Из-за бага в компиляторе
эта функция неправильно компилируется».

README это индикатор того, как поддерживается
репозиторий. Причем, когда этот файл
хороший, это не значит, что проект
активный, не содержит багов и прекрасно
покрыт тестами. Это показывает, что
собственник репозитория заботится о
вас, пользователе (или будущем мейнтейнере).
Хороший README расскажет вам, как пользоваться
этим проектом и как принять в нем участие.
Он продает проект, но дает знать
посетителям, что, возможно, им нужно
другое решение. Таким образом этот файл
как бы выражает уважение автора к
читателям и экономит их время.

При использовании GitHub-профайла как
части приложения файлы README приобретают
особое значение. Они демонстрируют
навыки технического письма – способность
к хорошей коммуникации и умение собирать
воедино документ, описывающий программу.

Трудно ожидать, что кто-то захочет
погрузиться в ваш код, если ему не
предоставили общего описания проекта.
Поэтому файлы README просто необходимы.

Четкое описание

Люди должны иметь возможность
использовать созданное вами программное
обеспечение, даже если не прочтут ни
строчки вашего кода.

Для начала, измените дефолтное название,
которое дает GitHub. Например, смените
python-ml-project-for-cat-lovers-2 на Cat Crawler — Classify Cat
GIFs. Следующий шаг – объяснение вашего
проекта в простейшей форме. Многие люди
используют однострочный комментарий
в самом верху. Например: «Бот для
скачивания и индексации GIF-файлов с
котами».

Следует учитывать, что чем длиннее
описание, тем больше риск умственной
перегрузки читателя.

Отредактируйте ваш текст. Используйте
заголовки, переносы строк, разбивку на
абзацы (два перевода строки, чтобы начать
новый абзац, и <br> для разрыва строки.
Шпаргалка.).
Не стесняйтесь использовать логотипы
продуктов и скриншоты. В отличие от
прочей технической документации, здесь
мультимедиа работает хорошо.

Если ваш репозиторий содержит что-то
интересное и веселое, это должно
отражаться в его описании! Безусловно,
изложение текста в соответствии с
правилами стилистики и композиции имеет
значение, однако интернет это место,
где классные программисты могут проявлять
свое творческое начало. Обратите внимание
на README проекта not-paid
(спасибо большое его создателям), который
помогает разработчикам сайтов обезопасить
себя от недобросовестных клиентов.

Использование

Каким образом следует использовать
ваш проект? Если это API, у вас должен быть
приведен отрывок кода с самыми основными
взаимодействиями. Более полная
документация может быть изложена ниже
или где-то в другом месте. Например,
facebook/react в
своем README дает небольшой фрагмент кода
– маленький пример использования React.
Используйте одинарные левые кавычки
(`) для выделения кода и по три таких
кавычки для разделения блоков кода. Для
специфической подсветки синтаксиса
указывайте язык сразу после первого
экземпляра трех кавычек.

Покажите результат работы кода. Если
можно приложить GIF – сделайте это! Файлы
GIF очень помогают людям разобраться в
том, что именно вы хотите им показать.
Это великолепно использовано в README
проекта alexfoxy/laxxx
(библиотека для плавных web-анимаций).

Пример анимации

Для создания GIF-файлов я использую
инструмент с открытым кодом ShareX.
Он просто выбирает область вашего
экрана. Могу посоветовать и другое
решение, тоже open source, – LICEcap.

Установка

Допустим, ваш посетитель хочет
установить себе ваш проект после того,
как увидел его в действии. Раздел с
описанием установки иногда называется
Getting Started («как начать»).
Он должен быть в каждом проекте, даже
если весь процесс установки заключается
во введении в терминале команды npm
install catcrawler.

Если ваш проект –
статический сайт, скажите об этом!
Напишите что-то вроде «Разместите
родительский каталог на веб-сервере».
Укажите, знание каких базовых инструментов
понадобится читателю для установки. Не
нужно пояснять, что такое pip или npm, просто
перечислите все команды, которые нужно
будет запускать при установке и
первоначальной настройке.

У DEV
есть очень
основательный раздел о сборке и
запуске. Это
отличный пример, которому смело можно
следовать, если хотите, чтобы ваш продукт
был доступен людям. Хорошая практика
при этом – запустить виртуальную машину
и самому попробовать воспользоваться
своим руководством по инсталляции.

Значки (Badges)

Значки (Badges)

Значки на GitHub, главным образом стандартизированные при помощи badges/shields, это одна из первых вещей, на которые обращает внимание посетитель, прокручивая страницу. Значки со статусом сборки описывают стабильность проекта. Другие значки могут показывать активность репозитория, указывая количество коммитов за месяц или число мейнтейнеров. Все эти значки не обязательны, но, как и GIF, являются большим преимуществом.

У shields.io
есть API для
создания ваших собственных значков, а
также npm-пакет,
приятный в использовании. С его помощью
я сделал и запустил несколько значков
меньше, чем за час. Другая npm-альтернатива
это badger.
У Python есть pybadges
от Google.

Участие в проекте (Contributing)

Инструкция по участию в проекте

Если вам нужны соратники, то очень желательно добавить раздел для потенциальных контрибуторов. На GitHub есть стандарт добавления файла CONTRIBUTING.md в корневую папку. Там может быть изложен кодекс поведения и общие рекомендации по поиску проблем и созданию пул-реквестов. Такие пошаговые руководства могут помочь большому количеству новичков, жаждущих принять участие в open source проектах. Я знаю, что некоторые из моих друзей поддерживают только репозитории с четко прописанными правилами для мейнтейнеров.

Если вы не уверены,
с чего начать, мне недавно попался
генератор
кодексов поведения,
который, как мне кажется, очень хорошо
исполнен.

Лицензия

Когда я ищу
решение для каких-то рабочих вопросов,
первое, на что я обращаю внимание, это
лицензия. При создании репозитория на
GitHub есть опция выбора лицензии, благодаря
чему для вас будет сгенерирован файл
LICENSE.md. У GitHub также есть страница,
посвященная этому файлу, а еще они
создали choosealicense.com
– фантастическое руководство по всем
возможным вариантам.

Лично я для своего
открытого исходного кода использую
лицензию MIT. У некоторых людей есть свое
сложившееся мнение относительно
лицензирования, особенно, когда речь
идет о GPL.
«Любые модификации программы,
включающие код, лицензированный по
лицензии GPL, также должны быть доступны
под лицензией GPL вместе с инструкциями
по сборке и установке»
.

Шаблоны

Существует много
шаблонов README-файлов. Это прекрасный
вариант «на крайний случай», но я
обнаружил, что «из коробки» они не совсем
подходят для небольших проектов. Конечный
вариант получается слишком холодным.
Шаблоны больше пригождаются более
крупным, состоявшимся проектам, но с
учетом времени, вложенного в разработку,
все равно имеет смысл сделать собственное
решение.

Вот это
мой фаворит среди шаблонов. Мне он
нравится, поскольку там все сделано
четко и по сути, а кроме того есть два
подраздела для тестов. Если у вас есть
какие-то тесты, следует упомянуть об
этом в вашем README. Первое, что я делаю при
клонировании проекта, это запускаю
тесты. Это позволяет удостовериться,
что для разработки
все готово.

Другие разделы

Разобравшись с
основными разделами, можно дополнить
README по своему вкусу. Возможно, я окажусь
в меньшинстве, но мне нравится бродить
по GitHub в поисках новых вещей и разбираться,
как они устроены. Я благодарен репозиториям,
в которых есть подробные файлы README с
большим количеством примеров кода.
Чтобы
увлечься проектом, я
должен видеть,
что мейнтейнерам он интересен по крайней
мере не меньше, чем мне.

Чтобы получить какое-то представление о стандартном оформлении, рекомендую исследовать тренды вашего языка программирования. А для вдохновения обратите внимание на два моих последних фаворита: Gatsyby и lax.js. Сделайте так, чтобы ваша документация стала просто песней!

The Complete Guide of
Readme Markdown Syntax

Markdown is a syntax for styling all forms of writing on the GitHub platform.
Mostly, it is just regular text with a few non-alphabetic characters thrown in, like git # or *

You can use Markdown most places around GitHub:

  1. Gists
  2. Comments in Issues and Pull Requests
  3. Files with the .md or .markdown extension

Headers

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Font

*Italics*
_This will also be italic_
**Bold text**
__This will also be bold__
***Bold and Italics***
_You **can** combine them_
~~Striked Text~~
***~~Italic, bold, and strikethrough1~~***	

Italics
This will also be italic
Bold Text
This will also be bold
Bold and Italics
You can combine them
Striked Text
Italic, bold, and strikethrough1


Lists

Unordered

* Item 1
* Item 2
  * Item 1a
  * Item 2a
     * Item 1b
     * Item 2b
  • Item 1
  • Item 2
    • Item 1a
    • Item 2a
      • Item 1b
      • Item 2b

OR
- Item 1

  • Item 1

Ordered

1. First
2. jhg
   1. Second
   2. jhg
      1. Third
      2. jhg
  1. First
  2. jhg
    1. Second
    2. jhg
      1. Third
      2. jhg

Links

* [Link with more info with various formatting options](https://docs.github.com/en/github/writing-on-github "more info")
* https://www.google.com/
* <https://www.google.com/>
  • Link with more info with various formatting options
  • https://www.google.com/
  • https://www.google.com/

Link Label

[My GitHub][GitHubLink]

You may define your link label anywhere in the document.

e.g. put on bottom: 

--------------------------------
[GitHubLink]:https://github.com/darsaveli

Links to the URLs in a repository

[Example document](/example/example.md)

Example document

example


Inserting Images or Gifs using links

  • alt in square bracket indicates the replacement text when the image fails to display (can be omitted)
  • parenthesis contains image source
  • title in quotes indicates the text to display when the mouse hovers over the image (can be omitted)

Nite: Dropping the image to the readme file will upload it automatically with this syntax;
It’s the same as links, but add an exlamation mark (!) before opening square bracket;
Image source can be either a location from the local machine or any valid image URL;

Example

![Octocat](https://user-images.githubusercontent.com/81953271/124010886-b571ca80-d9df-11eb-86ac-b358c48ac6aa.png "Github logo") 

Octocat

Resize images/Gifs

<img src="https://github.com/darsaveli/Mariam/blob/main/1479814528_webarebears.gif" width="385px" align="center">

You can use HTML tags like width=»385px», hight=»876px», align=»center», etc depending what you need. In this case this gif was once uploaded to the repository and the link was taken from there.

Other options to resize:

  • ![](https:// link | width=100)

Linking Image/Gif

To open another webpage when image is clicked, enclose the Markdown for the image in brackets, and then add the link in parentheses.

[![Octocat](https://user-images.githubusercontent.com/81953271/124010886-b571ca80-d9df-11eb-86ac-b358c48ac6aa.png "GitHub Logo")](https://github.com/)

Octocat


Tables

|Header1|Header2|Header3|
| --- | --- | --- |
| This | is a | table |
| This | is 2nd | row |
| This | is 3rd | row |
Header1 Header2 Header3
This is a table
This is 2nd row
This is 3rd row

Align

You may specify alignment like this:

| Align left | Centered  | Align right |
| :------------ |:---------------:| -----:|
| col 3 is      | some wordy text | $1600 |
Align left Centered Align right
aaa bbb ccc

p.s. You can use alignment with <h1 (or 2 etc.) align="center"> your text </h1> tags or with <p align="center"> your text</p> tag to align plain text.


CheckBox

* [ ] Checkbox1

* [ ] Checkbox2

* [x] Checkbox selected
  • Checkbox1

  • Checkbox2

  • Checkbox selected

You may use this syntax in GitHub’s issue to check or uncheck the checkbox in real time without having to modify the original version of the issue.


Quoting Text

> This is a block quoted text

This is a block quoted text

Multi-level blockquotes

> Asia
>> China
>>> Beijing
>>>> Haidian
>>>>> Tsinghua

Look like

Asia

China

Beijing

Haidian

Tsinghua

  • These are fenced code blocks

Text highlighting

Using a pair of backquotes is suitable for making tags for articles
linux ubuntu


Horizontal Line

All three will be rendered as:


p.s.


Break between lines


Visible markdown characters


Multi-line text

Add 1 tab or 4 spaces at the beginning of several lines of text.

OR

Use three backticks:

This syntax can also be used for code highlighting


Comments in Markdown

<!-- comment written in markdown -->

They will be invisible on readme


Emoji

:grinning:	or just place the emoji 😀

😀 or just place the emoji 😀

To see a list of every image Github supports, check out the Emoji Cheat Sheet


Code Block

There are three ways to add code in markdown

  1. Inline Code (single backtick)
  2. Whitespace
    `this` is an example of inline code.
  1. Fenced code blocks
    With GFM you can wrap your code with three back quotes to create a code block without the leading spaces. Add annoptional language identifier and your code will get syntax highlighting.
public static void main(String[]args){} //Java
document.getElementById("myH1").innerHTML="Welcome to my Homepage"; //javascipt

Syntax Highlighting

If language name is mentioned after the end of first set of backticks, the code snippet will be highlighted according to the language.

```js
console.log('javascript')
```

```python
print('python')
```

```java
System.out.println('java')
```
   
```json
{
  "firstName": "A",
  "lastName": "B
  "age": 18
}
```
console.log('javascript')
System.out.println('java')
{
  "firstName": "A",
  "lastName": "B",
  "age": 18
}

diff syntax

In the version control system, the function of diff is indispensable, i.e., the addition and deletion of a file content is displayed.
The diff effect that can be displayed in GFM. Green is for new, while red is for deleted.

Syntax

The syntax is similar to code fenced code blocks, except that the diff is written after the three backticks.
And in the content, the beginning of + indicates the addition, and the beginning of - indicates the deletion.

+ Hello world!
- This is useless.

Use YAML: human friendly data serialization language for all programming languages

name: Mariam
located_in: ***
from: ***
education: ***
job: ***
company: ***

Anchor

In fact, each title is an anchor, similar to the HTML anchor (#), e.g.

Syntax Look like
[Back to top](#readme) Back to top

Note that all the letters in the title are converted to lowercase letters.


Render mathematical expressions in Markdown

You can now use LaTeX style syntax to render math expressions within Markdown inline (using $ delimiters) or in blocks (using $$ delimiters).

Writing expressions as blocks
To add math as a multiline block displayed separately from surrounding text, start a new line and delimit the expression with two dollar symbols $$.

$$left( sum_{k=1}^n a_k b_k right)^2 leq left( sum_{k=1}^n a_k^2 right) left( sum_{k=1}^n b_k^2 right)$$

$$left( sum_{k=1}^n a_k b_k right)^2 leq left( sum_{k=1}^n a_k^2 right) left( sum_{k=1}^n b_k^2 right)$$

Writing inline expressions

To include a math expression inline with your text, delimit the expression with a dollar symbol $.

This sentence uses $ delimiters to show math inline: $sqrt{3x-1}+(1+x)^2$

This sentence uses `$` delimiters to show math inline:  $sqrt{3x-1}+(1+x)^2$

Markdown posts on GitHub


GitHub Link

The Complete Guide of
Readme Markdown Syntax

Markdown is a syntax for styling all forms of writing on the GitHub platform.
Mostly, it is just regular text with a few non-alphabetic characters thrown in, like git # or *

You can use Markdown most places around GitHub:

  1. Gists
  2. Comments in Issues and Pull Requests
  3. Files with the .md or .markdown extension

Headers

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Font

*Italics*
_This will also be italic_
**Bold text**
__This will also be bold__
***Bold and Italics***
_You **can** combine them_
~~Striked Text~~
***~~Italic, bold, and strikethrough1~~***	

Italics
This will also be italic
Bold Text
This will also be bold
Bold and Italics
You can combine them
Striked Text
Italic, bold, and strikethrough1


Lists

Unordered

* Item 1
* Item 2
  * Item 1a
  * Item 2a
     * Item 1b
     * Item 2b
  • Item 1
  • Item 2
    • Item 1a
    • Item 2a
      • Item 1b
      • Item 2b

OR
- Item 1

  • Item 1

Ordered

1. First
2. jhg
   1. Second
   2. jhg
      1. Third
      2. jhg
  1. First
  2. jhg
    1. Second
    2. jhg
      1. Third
      2. jhg

Links

* [Link with more info with various formatting options](https://docs.github.com/en/github/writing-on-github "more info")
* https://www.google.com/
* <https://www.google.com/>
  • Link with more info with various formatting options
  • https://www.google.com/
  • https://www.google.com/

Link Label

[My GitHub][GitHubLink]

You may define your link label anywhere in the document.

e.g. put on bottom: 

--------------------------------
[GitHubLink]:https://github.com/darsaveli

Links to the URLs in a repository

[Example document](/example/example.md)

Example document

example


Inserting Images or Gifs using links

  • alt in square bracket indicates the replacement text when the image fails to display (can be omitted)
  • parenthesis contains image source
  • title in quotes indicates the text to display when the mouse hovers over the image (can be omitted)

Nite: Dropping the image to the readme file will upload it automatically with this syntax;
It’s the same as links, but add an exlamation mark (!) before opening square bracket;
Image source can be either a location from the local machine or any valid image URL;

Example

![Octocat](https://user-images.githubusercontent.com/81953271/124010886-b571ca80-d9df-11eb-86ac-b358c48ac6aa.png "Github logo") 

Octocat

Resize images/Gifs

<img src="https://github.com/darsaveli/Mariam/blob/main/1479814528_webarebears.gif" width="385px" align="center">

You can use HTML tags like width=»385px», hight=»876px», align=»center», etc depending what you need. In this case this gif was once uploaded to the repository and the link was taken from there.

Other options to resize:

  • ![](https:// link | width=100)

Linking Image/Gif

To open another webpage when image is clicked, enclose the Markdown for the image in brackets, and then add the link in parentheses.

[![Octocat](https://user-images.githubusercontent.com/81953271/124010886-b571ca80-d9df-11eb-86ac-b358c48ac6aa.png "GitHub Logo")](https://github.com/)

Octocat


Tables

|Header1|Header2|Header3|
| --- | --- | --- |
| This | is a | table |
| This | is 2nd | row |
| This | is 3rd | row |
Header1 Header2 Header3
This is a table
This is 2nd row
This is 3rd row

Align

You may specify alignment like this:

| Align left | Centered  | Align right |
| :------------ |:---------------:| -----:|
| col 3 is      | some wordy text | $1600 |
Align left Centered Align right
aaa bbb ccc

p.s. You can use alignment with <h1 (or 2 etc.) align="center"> your text </h1> tags or with <p align="center"> your text</p> tag to align plain text.


CheckBox

* [ ] Checkbox1

* [ ] Checkbox2

* [x] Checkbox selected
  • Checkbox1

  • Checkbox2

  • Checkbox selected

You may use this syntax in GitHub’s issue to check or uncheck the checkbox in real time without having to modify the original version of the issue.


Quoting Text

> This is a block quoted text

This is a block quoted text

Multi-level blockquotes

> Asia
>> China
>>> Beijing
>>>> Haidian
>>>>> Tsinghua

Look like

Asia

China

Beijing

Haidian

Tsinghua

  • These are fenced code blocks

Text highlighting

Using a pair of backquotes is suitable for making tags for articles
linux ubuntu


Horizontal Line

All three will be rendered as:


p.s.


Break between lines


Visible markdown characters


Multi-line text

Add 1 tab or 4 spaces at the beginning of several lines of text.

OR

Use three backticks:

This syntax can also be used for code highlighting


Comments in Markdown

<!-- comment written in markdown -->

They will be invisible on readme


Emoji

:grinning:	or just place the emoji 😀

😀 or just place the emoji 😀

To see a list of every image Github supports, check out the Emoji Cheat Sheet


Code Block

There are three ways to add code in markdown

  1. Inline Code (single backtick)
  2. Whitespace
    `this` is an example of inline code.
  1. Fenced code blocks
    With GFM you can wrap your code with three back quotes to create a code block without the leading spaces. Add annoptional language identifier and your code will get syntax highlighting.
public static void main(String[]args){} //Java
document.getElementById("myH1").innerHTML="Welcome to my Homepage"; //javascipt

Syntax Highlighting

If language name is mentioned after the end of first set of backticks, the code snippet will be highlighted according to the language.

```js
console.log('javascript')
```

```python
print('python')
```

```java
System.out.println('java')
```
   
```json
{
  "firstName": "A",
  "lastName": "B
  "age": 18
}
```
console.log('javascript')
System.out.println('java')
{
  "firstName": "A",
  "lastName": "B",
  "age": 18
}

diff syntax

In the version control system, the function of diff is indispensable, i.e., the addition and deletion of a file content is displayed.
The diff effect that can be displayed in GFM. Green is for new, while red is for deleted.

Syntax

The syntax is similar to code fenced code blocks, except that the diff is written after the three backticks.
And in the content, the beginning of + indicates the addition, and the beginning of - indicates the deletion.

+ Hello world!
- This is useless.

Use YAML: human friendly data serialization language for all programming languages

name: Mariam
located_in: ***
from: ***
education: ***
job: ***
company: ***

Anchor

In fact, each title is an anchor, similar to the HTML anchor (#), e.g.

Syntax Look like
[Back to top](#readme) Back to top

Note that all the letters in the title are converted to lowercase letters.


Render mathematical expressions in Markdown

You can now use LaTeX style syntax to render math expressions within Markdown inline (using $ delimiters) or in blocks (using $$ delimiters).

Writing expressions as blocks
To add math as a multiline block displayed separately from surrounding text, start a new line and delimit the expression with two dollar symbols $$.

$$left( sum_{k=1}^n a_k b_k right)^2 leq left( sum_{k=1}^n a_k^2 right) left( sum_{k=1}^n b_k^2 right)$$

$$left( sum_{k=1}^n a_k b_k right)^2 leq left( sum_{k=1}^n a_k^2 right) left( sum_{k=1}^n b_k^2 right)$$

Writing inline expressions

To include a math expression inline with your text, delimit the expression with a dollar symbol $.

This sentence uses $ delimiters to show math inline: $sqrt{3x-1}+(1+x)^2$

This sentence uses `$` delimiters to show math inline:  $sqrt{3x-1}+(1+x)^2$

Markdown posts on GitHub


GitHub Link

Понравилась статья? Поделить с друзьями:
  • Как правильно написать power bank
  • Как правильно написать playstation
  • Как правильно написать phd
  • Как правильно написать password
  • Как правильно написать online