Search code examples
githubmarkdowngithub-flavored-markdownansi-colors

Show ANSI colors on Github README.md


I want to convert this ugly string...

"\e[0;92;49mGroup::Item\e[0m | \e[0;35;49mgender\e[0m\n  \e[0;92;49mGroup::SubItem\e[0m | \e[0;36;49mage=22 \e[0m\e[0;94;49mfirst_name=\"Juan Manuel\" \e[0m\e[0;36;49msite_id=1 \e[0m\e[0;94;49mstore_id=1 \e[0m\e[0;36;49mgender=\"M\" \e[0m\e[0;94;49msavings=20.5 \e[0m\n    \e[0;93;49mSource::Item\e[0m | \e[0;36;49mage=22 \e[0m\e[0;94;49mfirst_name=\"Juan Manuel\" \e[0m\e[0;36;49msite_id=1 \e[0m\e[0;94;49mstore_id=1 \e[0m\e[0;36;49mgender=\"M\" \e[0m\e[0;94;49msavings=20.5 \e[0m\n    \e[0;93;49mSource::Item\e[0m | \e[0;36;49mage=31 \e[0m\e[0;94;49mfirst_name=\"Leandro\" \e[0m\e[0;36;49msite_id=1 \e[0m\e[0;94;49mstore_id=1 \e[0m\e[0;36;49mgender=\"M\" \e[0m\e[0;94;49msavings=15.5 \e[0m\n    \e[0;93;49mSource::Item\e[0m | \e[0;36;49mage=65 \e[0m\e[0;94;49mfirst_name=\"Rodolfo\" \e[0m\e[0;36;49msite_id=2 \e[0m\e[0;94;49mstore_id=2 \e[0m\e[0;36;49mgender=\"M\" \e[0m\e[0;94;49msavings=50.2 \e[0m\n    \e[0;93;49mSource::Item\e[0m | \e[0;36;49mage=8 \e[0m\e[0;94;49mfirst_name=\"Francisco\" \e[0m\e[0;36;49msite_id=2 \e[0m\e[0;94;49mstore_id=3 \e[0m\e[0;36;49mgender=\"M\" \e[0m\e[0;94;49msavings=2.5 \e[0m\n    \e[0;93;49mSource::Item\e[0m | \e[0;36;49mage=31 \e[0m\e[0;94;49mfirst_name=\"Gustavo\" \e[0m\e[0;36;49msite_id=3 \e[0m\e[0;94;49mstore_id=4 \e[0m\e[0;36;49mgender=\"M\" \e[0m\e[0;94;49msavings=40.5 \e[0m\n    \e[0;93;49mSource::Item\e[0m | \e[0;36;49mage=35 \e[0m\e[0;94;49mfirst_name=\"Javier\" \e[0m\e[0;36;49msite_id=3 \e[0m\e[0;94;49mstore_id=5 \e[0m\e[0;36;49mgender=\"M\" \e[0m\e[0;94;49msavings=25.5 \e[0m\n  \e[0;92;49mGroup::SubItem\e[0m | \e[0;36;49mage=64 \e[0m\e[0;94;49mfirst_name=\"Susana\" \e[0m\e[0;36;49msite_id=2 \e[0m\e[0;94;49mstore_id=2 \e[0m\e[0;36;49mgender=\"F\" \e[0m\e[0;94;49msavings=30.0 \e[0m\n    \e[0;93;49mSource::Item\e[0m | \e[0;36;49mage=64 \e[0m\e[0;94;49mfirst_name=\"Susana\" \e[0m\e[0;36;49msite_id=2 \e[0m\e[0;94;49mstore_id=2 \e[0m\e[0;36;49mgender=\"F\" \e[0m\e[0;94;49msavings=30.0 \e[0m\n    \e[0;93;49mSource::Item\e[0m | \e[0;36;49mage=33 \e[0m\e[0;94;49mfirst_name=\"Virginia\" \e[0m\e[0;36;49msite_id=2 \e[0m\e[0;94;49mstore_id=3 \e[0m\e[0;36;49mgender=\"F\" \e[0m\e[0;94;49msavings=70.1 \e[0m\n    \e[0;93;49mSource::Item\e[0m | \e[0;36;49mage=33 \e[0m\e[0;94;49mfirst_name=\"Gabriela\" \e[0m\e[0;36;49msite_id=3 \e[0m\e[0;94;49mstore_id=4 \e[0m\e[0;36;49mgender=\"F\" \e[0m\e[0;94;49msavings=45.5 \e[0m\n"

into this beautiful and shiny table

enter image description here

Obviously, I don't want to use images...

How can I do this?


Solution

  • This is not possible. GitHub Markup uses html-pipeline to sanitize any HTML, removing anything that you might use to color text, including:

    • style elements
    • style attributes
    • font elements

    Note that the color attribute is still available, however this is not much good because it requires the font element.

    If you wish to add color support, voice your support for the open issue at the html-pipeline repo.