DEV Community

Cover image for How to show diff in Markdown file
Zied Ghalleb
Zied Ghalleb

Posted on

5

How to show diff in Markdown file

In software development, accurately communicating code changes is crucial for collaboration. Markdown is a lightweight markup language widely used for documentation, including README files.
One powerful feature of Markdown is its ability to display code differences using the diff syntax.

🔄 What is Markdown diff ?
Markdown diff is a syntax used to represent the difference between two pieces of code by highlighting additions, deletions within the code, making it easier for software engineers to see the changes.

✨ How to Use Markdown diff ?
Very simple

  1. Identify changes: Determine the changes you want to showcase.
  2. Format changes: Use the diff syntax to format your code differences.
  3. Prefix the line: Use a minus sign (-) to indicate deletions and a plus sign (+) to indicate additions.

Diff in Markdown

Join me on this learning journey for more software engineering tips and tricks 🙌 🚀

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (1)

Collapse
 
johannes_k_rexx profile image
johnblommers

Thanks for posting this. I'm a daily and frequent user of Markdown and never realized this feature existed. It's a GitHub Flavored Markdown (GFM) feature. Typora supports it too. As does MindForger.

What seems to be missing is a good way to diff two Markdown files and highlight the additions and deletions by striking/underlining and colorizing in red/green right in the text, not that aweful way the normal diff displays them.

But hold! I just found Markdown-diff which works when used with marked but breaks down when entire sentences are added or removed.

The learning journey continues ...

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more