Markdown Cheat Sheet with Shields.io
Markdown is a lightweight markup language that helps structure text. It’s widely used for documentation, especially in README files on GitHub, to give clear information about your project. This cheat sheet will guide you through the basics of Markdown and introduce you to Shields.io, which lets you add attractive badges to enhance your project’s presentation.
1. What is Markdown?
Markdown allows developers to write structured text quickly and easily. It turns plain text into rich formatted text using simple symbols. It is commonly used for README files on GitHub, wikis, and other documentation.
2. Markdown Basics
Headers
Use #
for headings. The more #
symbols you use, the smaller the heading size becomes.
# H1 - Main Title
## H2 - Section Title
### H3 - Subsection
Emphasis
Italic:
*This text is italic.*
Bold:
**This text is bold.**
Bold and Italic:
***This text is bold and italic.***
Lists
Unordered List:
- Item 1 - Item 2 - Subitem 1
Ordered List:
1. Step 1 2. Step 2
Links and Images
Link:
[Visit GitHub](https://github.com)
Image:
![Alt Text](https://example.com/image.png)
Code Blocks
Inline Code:
`This is inline code.`
Multi-line Code Block:
function hello() { console.log("Hello, World!"); }
Blockquotes
> This is a quote block.
Tables
| Feature | Description |
|----------|-------------|
| Markdown | Easy syntax |
| GitHub | Collaboration platform |
Task Lists
- [x] Completed task
- [ ] Incomplete task
3. Enhancing Your README with Shields.io Badges
Shields.io lets you add customizable badges to display important information (like version, build status, or license) on your project. This improves readability and makes your project stand out.
Adding a Basic Badge
The basic syntax for adding a badge is:
![Badge Text](https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>)
LABEL: Describes the badge (e.g., "Build")
MESSAGE: Information (e.g., "Passing")
COLOR: Badge color (e.g., "brightgreen")
Example:
![Build Status](https://img.shields.io/badge/Build-Passing-brightgreen)
Rendered:
Common Shields.io Badges
Here are some frequently used badges:
Version Badge:
![Version](https://img.shields.io/badge/version-1.0.0-blue)
License Badge:
![License](https://img.shields.io/badge/license-MIT-green)
GitHub Issues Badge:
![GitHub Issues](https://img.shields.io/github/issues/owner/repository)
Replace
owner/repository
with your GitHub repository details.
Customizing Shields.io Badges
Style Variants:
Change the style to match your theme. Useflat
,plastic
, orfor-the-badge
styles:https://img.shields.io/badge/Build-Passing-brightgreen?style=for-the-badge
Adding Logos:
Add a logo to your badge for better visualization:https://img.shields.io/badge/Code-GitHub-blue?logo=github
Dynamic Values:
Shields.io supports dynamic badges like GitHub stars or downloads. Example:![GitHub Stars](https://img.shields.io/github/stars/owner/repository?style=social)
4. Example README Using Markdown and Shields.io
Here’s an example of how a README.md file might look using Markdown and badges:
# My Awesome Project
![Build Status](https://img.shields.io/badge/Build-Passing-brightgreen)
![Version](https://img.shields.io/badge/version-1.0.0-blue)
![License](https://img.shields.io/badge/license-MIT-green)
## Overview
This project is an example of how to use Markdown and Shields.io to create a neat and professional README.
## Features
- Easy to use
- Clean documentation
## Getting Started
1. Clone the repository:
```bash
git clone https://github.com/owner/repository.git
Install dependencies:
npm install
Contributing
We welcome contributions! Please open an issue or submit a pull request.
License
This project is licensed under the MIT License.
---
## **Conclusion**
With Markdown, you can structure text efficiently, and Shields.io badges bring polish to your documentation. Together, they help create engaging and informative README files for your projects. Start using these tools today to showcase your projects like a pro!
---
Let me know if this article is good to go or if you need any more tweaks!
Subscribe to my newsletter
Read articles from sathwik ada directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by