Examples

Here you will find some examples on how each element is being displayed on EzGitDoc page and how generated code looks in *.md file. Most of them are generated in HTML tags but not all like text list, table. Currently there are no plans on separating those approaches as with raw markdown you cannot for example set image width/height or align it.

1. Code

```javascript
var parts = document.getElementsByClassName('myPart');
var firstPart = parts.item(0);
var firstPartTagName = firstPart.tagName;
```

2. Header

note

EzGitDoc is using <h> tags to create headers. It's also possible to use hashtag markdown. HTML tags are 'slightly better' due to the fact that they can be used inside other HTML tags like paragraphs while hashtags not.

Example 05
<h2>Hey there 2</h2>
<h3>Hey there 3</h3>
<h4>Hey there 4</h4>

3. Image

note

If you didn't prepare images yet, leave word blank in URL field and EzGitDoc will use placeholder images which can be overwritten when needed.

<p align="left"><img src="https://cdn.pixabay.com/photo/2018/03/11/08/47/dog-3216207_1280.png" alt="Image 1" width="150"/></p>
<p align="center"><img src="https://cdn.pixabay.com/photo/2018/03/11/08/47/dog-3216207_1280.png" alt="Image 2" width="150"/></p>
<p align="right"><img src="https://cdn.pixabay.com/photo/2018/03/11/08/47/dog-3216207_1280.png" alt="Image 3" width="150"/></p>

Example image from: pixabay.com

4. Link

note

If you want to align single link(center/right), wrap it inside paragraph and use align attribute.

<a href="https://trolit.github.io/EzGitDoc">Link to EzGitDoc</a>

5. List

5.1. Iconic

note

By adding extra linebreak before description, you can put it's text below title.

:smiley: <strong>Note 1</strong>: Blabla 1<br/><br/>
:smiley: <strong>Note 2</strong>: Blabla 2<br/><br/>
:smiley: <strong>Note 3</strong>: Blabla 3<br/><br/>
:smiley: <strong>Note 4</strong>: Blabla 4<br/><br/>
:smiley: <strong>Note 5</strong>: Blabla 5

5.2. Normal

- List item 1
- List item 2
- List item 3
- List item 4
- List item 5

5.3. Link

- <a href="https://#to_do:add_href">Link 1</a>
- <a href="https://#to_do:add_href">Link 2</a>
- <a href="https://#to_do:add_href">Link 3</a>
- <a href="https://#to_do:add_href">Link 4</a>
- <a href="https://#to_do:add_href">Link 5</a>

6. Table

6.1 Text

| Name | Age | Country |
| :---: | :---: | :---: |
| Adam | 23 | Poland |
| Adrian | 23 | Poland |

6.2 Image

| | |
| :---: | :---: |
| <img src="https://place-hold.it/150x100" alt="#toadd" width="150" height="100"/> | <img src="https://place-hold.it/150x100" alt="#toadd" width="150" height="100"/> |
| <img src="https://place-hold.it/150x100" alt="#toadd" width="150" height="100"/> | <img src="https://place-hold.it/150x100" alt="#toadd" width="150" height="100"/> |

6.3 Kbd / Linked Kbd

note

Use kbd table to display images and when someone click's them they will appear in fullscreen. Linked kbd can be useful if you want to redirect user to repository or different page.

<p align="center">
<kbd><img src="https://place-hold.it/150x130" alt="alt text" width="150" height="130"/></kbd>
<kbd><img src="https://place-hold.it/150x130" alt="alt text" width="150" height="130"/></kbd>
<br/>
<kbd><img src="https://place-hold.it/150x130" alt="alt text" width="150" height="130"/></kbd>
<kbd><img src="https://place-hold.it/150x130" alt="alt text" width="150" height="130"/></kbd>
</p>

Difference between kbd and linked kbd

kbd single element
<kbd><img src="https://place-hold.it/100x100" alt="alt text" width="100" height="100"/></kbd>
linked kbd single element
<a href="https://addurl/"><kbd><img src="https://place-hold.it/100x100" alt="alt text" width="100" height="100"/></kbd></a>

7. Text

note

In the text element you can use HTML tags to extend it like anchor(a), header(h), emphasis(em) etc.

<p>Here it comes! Lorem ipsum!</p>
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure do
lor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Exc
epteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit a
nim id est laborum.</p>

8. Badge

note

Labels are great to give short information. EzGitDoc allows to make static badges but you can make dynamic ones by yourself or use predefined. Visit Shields.io to learn more.

note

To give between badges some space you can use for e.g. HTML character code&nbsp;(result shown in fixed preview tab) or linebreaks(br).

<img src="https://img.shields.io/badge/Badge-N1-red?color=9B2BE2" alt="to do: add alt text"/>
<img src="https://img.shields.io/badge/Badge-N2-red?color=2B95E2&style=plastic" alt="to do: add alt text"/>
<img src="https://img.shields.io/badge/Badge-N3-red?color=2BE29B&style=flat-square" alt="to do: add alt text"/>
<img src="https://img.shields.io/badge/Badge-N4-red?color=A7E22B&style=for-the-badge" alt="to do: add alt text"/>
<img src="https://img.shields.io/badge/Badge-N5-red?color=E2A32B&style=social" alt="to do: add alt text"/>

9. Details

note

Details-summary is handy element to make documentation more compact by hiding specific problems or explanations under title which then can be expanded by user to see details.

<details>
<summary>This is my summary</summary>
First thing:<br/>
<a href="https://trolit.github.io/EzGitDoc">EzGitDoc</a><br/>
Second thing:<br/>
<a href="https://trolit.github.io/EzGitDoc-documentation/">Documentation</a>
</details>
Edit this page