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>

Blockquotes with inline HTML and inline HTML with Markdown syntax.

Blockquotes with inline HTML are Markdown elements that allow you to quote external sources or emphasize important passages. They are denoted by the > character at the beginning of a line, followed by the quoted text. In this case, the blockquotes are used to highlight warnings and notes.

Inline HTML with Markdown syntax is used to add HTML elements directly into the Markdown text. In this case, the ! symbol is used to indicate that the following text is a note or warning. The [!NOTE] and [!WARNING] syntax is a way to add a note or warning to the text, and the > symbol is used to create a blockquote.

Usage examples

Warning

Even though the credentials directory is listed in .gitignore to prevent accidental uploads of credential keys, do not push the cloned repo unless you are certain there are no settings that could lead to credential leakage!

Note

GCP Settings

The bucket <your-bucket-name> and the dataset <your-dataset-id> will be created as the pipeline runs. You don't need to create them manually. However,

1. The bucket name should be globally unique, so we add a random number after the bucket name.
2. The dataset id does not allow hyphens, so we have to use underscores instead.

under maintenance

Converting Markdown to Jupyter Notebook

This guide explains how to convert a Markdown file to a Jupyter notebook using the nbconvert library in Python.

To convert a markdown file to a Jupyter notebook while keeping the markdown intact, you can use the nbconvert library in Python. Here’s a step-by-step guide to help you:

1. Install nbconvert if you haven’t already:

   pip install nbconvert

2. Create a Markdown File: Make sure you have your markdown file ready. Let’s call it example.md.

3. Convert the Markdown File to a Jupyter Notebook: You can use the following command to convert your markdown file to a Jupyter notebook:

   jupyter nbconvert --to notebook --execute example.md

Here's a more detailed example using Python:

1. Install the required libraries:

   pip install nbformat nbconvert

2. Use the following Python script:

   import nbformat
   from nbconvert import MarkdownExporter
   
   # Read the markdown file
   with open('example.md', 'r', encoding='utf-8') as md_file:
       md_content = md_file.read()
   
   # Create a new Jupyter notebook
   notebook = nbformat.v4.new_notebook()
   
   # Add the markdown content as a markdown cell in the notebook
   notebook.cells.append(nbformat.v4.new_markdown_cell(md_content))
   
   # Save the notebook
   with open('example.ipynb', 'w', encoding='utf-8') as nb_file:
       nbformat.write(notebook, nb_file)

This will create a Jupyter notebook file named example.ipynb that includes your markdown content.

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.