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>

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.