Search code examples
githubmarkdowngithub-flavored-markdownreadme

markdown github - how to do green code added git and red code deleted in README?

how to do this, coloring lines (like git)?

enter image description here

here is an example where it is used: https://github.com/sveltejs/kit/discussions/7716

in markdown, in GitHub readme.

enter image description here

Solution

  • TLDR

    add the symbol + and - (with diff syntax in markdown)

    symbol + -
    name Addition Deletion
    color Green Red
    what it does do? code that being added or changed code code that being deleted or removed

    how to write it in MD?

    ```diff
    -oldText
    +newText
    ```

    how it will look?

    enter image description here

    real example to copy and paste.

    see here, I created a gist for you: https://gist.github.com/Laaouatni/1f0825dc0c531eb7cfb49ecc9560094c (click raw to copy code)

    now you will be asking me,

    why diff in particular?

    by just going to google and searching: https://www.google.com/search?q=what+diff+means+linux

    enter image description here

    the first thing that came to my mind is the command diff, and I tried to search if diff is actually used in markdown, and it turns out that the info is true so it was real.

    so use diff instead of javascript/python, or whatever...

    https://gist.github.com/Laaouatni/1f0825dc0c531eb7cfb49ecc9560094c (click raw to copy code)

    do I manually need to add the symbols?

    I always suggest little lines... so it will be easier for you to manually add the symbols.

    but if you have a lot of lines,
    then you don't have to manually add + and -,
    since if you have Linux just use the diff command, and will return you the text that you can copy and paste to GitHub.

    by searching for differences in 2 files.

    the command is something like this:

    diff example1.txt example2.txt

    if you are on windows, I am not pretty sure it will work or not, but try to see it here: What is the Windows equivalent of the diff command?, but yeah if it is only for 2 or maximum 10 lines I think writing manually can be time-saving... but you have entire pieces of code then do your research if you think it will worth the time.

    attention:

    by using a diff language name, now you can have this special design.
    also, this works only in GitHub,
    and you can't color highlight for a specified language like python or javascript for example...

    example: enter image description here there isn't any color highlighting


    so use it when necessary to point out a breaking change for example.