Methods to center a clickable hyperlink in Markdown.

TIL_20230227_HowTo_Markdown.md

How to Center a Clickable Hyperlink in Markdown

Method 1

One way to center a clickable hyperlink in HTML is to use the tag inside a

tag with “text-align:center” style1.

For example:

<p style="text-align: center;">
  <a href="https://www.bing.com">This is a centered clickable link</a>
</p>

Method 2

Another way is to use a list of links and style them with “text-align:center” and "display:inline-block"2.

For example:

<ul style="list-style-type:none;">
  <li style="text-align:center; display:inline-block;">
    <a href="https://www.bing.com">This is a centered clickable link</a>
  </li>
</ul>

Method 3 (Works best for GitHub)

This one worked and tested in GitHub README.md:

<p align="center">
<a href="https://github.com/Pizofreude/github-profile-views-counter">
    <img src="https://komarev.com/ghpvc/?username=Pizofreude">
</a>
</p>

Creating Tables in Markdown

This will render as a large, bold heading at the top of the page.

| Column 1 | Column 2 | Column 3 |
| --- | --- | --- |
| Item 1 left-aligned | Item 2 centred | Item 3 right-aligned |

This will be rendered as:

Column 1	Column 2	Column 3
Item 1 left-aligned	Item 2 centred	Item 3 right-aligned

Toggle list

<details> </details>

Usage Example 1

• Dimension modelling for better understanding the dataset
  Click to view the entity–relationship diagram (powered by dbdiagram.io)

  
  

Usage Example 2

We summarize how the components in the data pipeline are set up and where you can find these configurations in this repo.

Usage Example 3

Free Falasteen

This will resize the image to 30% of the available width and height.

GitHub-flavored Markdown (GFM) supports a variety of features for formatting README files, including some special callouts like "Warning" and "Note". Below is a list of commonly used Markdown features in GitHub READMEs that help you provide context, highlight important information, or organize your documentation:

1. Basic Formatting

• Headings: #, ##, ###, etc.
• Bold: **bold** or __bold__
• Italic: *italic* or _italic_
• Strikethrough: ~~strikethrough~~
• Blockquotes: > blockquote
• Lists:
  • Unordered: -, *, +
  • Ordered: 1., 2., etc.
• Code:
  • Inline: `code`
  • Block:

    language<br>code<br>

• Links: [link text](url)
• Images: ![alt text](image_url)

2. Tables

| Column 1 | Column 2 |
|----------|----------|
| Row 1    | Data     |

3. Task Lists

- [x] Task 1
- [ ] Task 2

4. Emoji

:smile:, :warning:, etc.

5. Mentioning Users/Teams/Issues/PRs

@username, #123, owner/repo#456

6. HTML Elements

HTML tags like <details>, <summary>, <kbd>, <sup>, <sub>, <br>, etc., are supported for advanced formatting.

7. Admonitions (Notes, Warnings, Tips, etc.)

GitHub does not natively support Markdown admonitions (e.g., "note", "warning") like some other platforms (such as Docsify, MkDocs, or Docusaurus).
However, you can manually create these using:

• Blockquotes with emoji or bolded text:

  > **Note:** This is a note.
  > **Warning:** Be careful!
  > :warning: This is a warning.
  > :bulb: Tip: Try this!

• Custom HTML blocks:
  You can use raw HTML for custom callout formatting:

  <div style="background: #ffeeba; border: 1px solid #f5c26b; padding: 8px;">
    <strong>Warning:</strong> This is a warning box.
  </div>

8. Collapsible Sections

<details>
  <summary>Click to expand!</summary>
  Hidden content here.
</details>

9. Footnotes

GitHub supports footnotes:

Here is a footnote reference[^1].

[^1]: This is the footnote.

10. Syntax Highlighting

Code blocks with language identifiers for syntax highlighting, e.g.:

```python
print("Hello")
```

---

In summary:

• GitHub READMEs support many Markdown and some HTML features.
• For "Warning", "Note", etc., use blockquotes with bold/emoji or custom HTML—there’s no native admonition syntax.
• Some extended features (like admonitions with special formatting) require external tools or site generators.