Suggest ways to display diff data for code snippets on a timeline

The overall goal of what I am trying to do is, I am trying to allow the visitor to view the 'lifecycle' of how one snippet of code has evolved over time. They should be able to quickly see how the snippet changes each step of the way.

If you are familiar with Git or any version control, just imagine your favorite code snippet in an open-source project and how it evolves commit-to-commit.

To be clear, I am going to show what I have right now for two scenarios:

  • The code snippets by themselves ("vanilla version") on a timeline.
  • The code snippets with the diffs ("diffed version") on a timeline - the diff shows any changes between the two code snippets.

On each snippet, I will show some meta-data (author's avatar, date posted, etc.).

However, I am not fully satisfied with the way I am doing it now and would love any suggestions on how to improve the way I display both the vanilla & diff versions of my data.

I have implemented 2 options so far. A left-aligned & a center-aligned timeline.

Vanilla (no diffs)

Left-Aligned

left-aligned-vanilla-timeline

Center-Aligned

center-aligned-vanilla-timeline

Diffed Versions

Left-Aligned

left-aligned-diff-version

Center-Aligned

center-aligned-diff-version

Notice the red & green bits at the end. Those are the diffs. The red piece on the left shows what has been removed in that snippet of code, the green piece on the right shows what has been added.

For comparison, this is how Github displays similar data.

I would love any suggestions for how I can present this better or accomplish my goal.

Thanks!

Tags: