Skip to content

Instantly share code, notes, and snippets.

@luigiMinardi
Last active April 19, 2024 19:20
Show Gist options
  • Star 27 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save luigiMinardi/4574708d404cdf4fe0da7ac6fe2314db to your computer and use it in GitHub Desktop.
Save luigiMinardi/4574708d404cdf4fe0da7ac6fe2314db to your computer and use it in GitHub Desktop.
Github markdown colors (Using Tex and the github MathJax support)

Small warning for everyone that are thinking if using Tex colors is a good idea or not

  • 2023-05-02 - Since a few days ago \colorbox and \fcolorbox are broken and Github did't talk about if it's a temporary thing or if it will not be added back.
    • 2024-01-04 - Since it has not being added back I deduce that it will never be so I removed all mentions to it on the rest of the gist.
  • 2023-09-29 - Tex seems to not work on h1 to h6 anymore (markdown #'s)
    • 2024-01-04 - Now it works again, I'll keep the message for a while to remember that it may change again in the future

As you can se with the above message(s) Tex may not be very stable and may not be an option to you as of the dates expressed above. You can also check other tex problems here.

Github released Tex support and colors* to the markdown and you din't realized

*You can use Tex to produce colors, but the real objective of it is to write math so it is more of a workaround that works good enough.

$\color{#58A6FF}\textsf{\largeⓘ\kern{0.2cm}\normalsize Note}$ Somethings are different here on gist and on the actual markdown of README's on github or the markdown of issues, etc.

Table of contents

Warnings and Notes

To do the warning and note on the github markdown is that way:

__Warning__
__Note__

Warning Note

On the gist markdown you need to use the Tex syntax this way:

$\color{#D29922}\textsf{\Large\⚠\kern{0.2cm}\normalsize Warning}$ 
$\color{#58A6FF}\textsf{\Large\ⓘ\kern{0.2cm}\normalsize Note}$

$\color{#D29922}\textsf{\Large⚠\kern{0.2cm}\normalsize Warning}$ $\color{#58A6FF}\textsf{\Largeⓘ\kern{0.2cm}\normalsize Note}$

To learn the syntax of Tex you can look at the Katex docs, you can also check the sorted docs.

Katex are not exacly Tex, but their docs are very well made and easy to understand, also most features of one are in the other. And the syntax is the same.

Tex

To start writting with Tex syntax you need to use $ at the start and end of the text. $foo$.

$foo$

If you want to centralize you can put 2 $. $$foo$$ is a centralized text.

$$foo$$

Text in Tex

I prefer to write text in tex using the \text{foo} but you have other ways to do it as you can see bellow.

Without anything

$lorem ipsum dolor sit amet$

$lorem ipsum dolor sit amet$
With \text alone

$\text lorem ipsum dolor sit amet$

$\text lorem ipsum dolor sit amet$
With \text{}

$\text{lorem ipsum dolor sit amet}$

$\text{lorem ipsum dolor sit amet}$
Using \ to add spaces ( )

$lorem\ ipsum\ dolor\ sit\ amet$

$lorem\ ipsum\ dolor\ sit\ amet$
Using \text without {} and with \ to add spaces

$\text lorem\ ipsum\ dolor\ sit\ amet$

$\text lorem\ ipsum\ dolor\ sit\ amet$

Font Styles

To change the font style you need to add suffixes to the \text.

suffix syntax command result
none \text $\text{lorem ipsum}$ $\text{lorem ipsum}$
\rm \textrm $\textrm{lorem ipsum}$ $\textrm{lorem ipsum}$
\sf \textsf $\textsf{lorem ipsum}$ $\textsf{lorem ipsum}$
\bf \textbf $\textbf{lorem ipsum}$ $\textbf{lorem ipsum}$
\up \textup $\textup{lorem ipsum}$ $\textup{lorem ipsum}$
\tt \texttt $\texttt{lorem ipsum}$ $\texttt{lorem ipsum}$
\it \textit $\textit{lorem ipsum}$ $\textit{lorem ipsum}$

Colors

To use colors you can use \color or \textcolor.

command result
$\color{red}{\textsf{lorem ipsum}}$ $\color{red}{\textsf{lorem ipsum}}$
$\color{#f00}{\textsf{lorem ipsum}}$ $\color{#f00}{\textsf{lorem ipsum}}$
$\color{rgb(255,0,0)}{\textsf{lorem ipsum}}$ $\color{rgb(255,0,0)}{\textsf{lorem ipsum}}$
$\color{rgba(255,0,0, 0.4)}{\textsf{lorem ipsum}}$ $\color{rgba(255,0,0, 0.4)}{\textsf{lorem ipsum}}$
$\color{hsl(0,100%,50%)}{\textsf{lorem ipsum}}$ $\color{hsl(0,100%,50%)}{\textsf{lorem ipsum}}$
$\color{hsla(0,100%,50%, 0.4)}{\textsf{lorem ipsum}}$ $\color{hsla(0,100%,50%, 0.4)}{\textsf{lorem ipsum}}$
$\textcolor{red}{\textsf{lorem ipsum}}$ $\textcolor{red}{\textsf{lorem ipsum}}$

Table with some color examples

$\color{black}{\textsf{Black}}$ $\color{blue}{\textsf{Blue}}$ $\color{brown}{\textsf{Brown}}$ $\color{darkgray}{\textsf{Dark Gray}}$ $\color{gray}{\textsf{Gray}}$
$\color{lightgray}{\textsf{Light Gray}}$ $\color{green}{\textsf{Green}}$ $\color{lightblue}{\textsf{Light Blue}}$ $\color{lime}{\textsf{Lime}}$ $\color{magenta}{\textsf{Magenta}}$
$\color{olive}{\textsf{Olive}}$ $\color{orange}{\textsf{Orange}}$ $\color{pink}{\textsf{Pink}}$ $\color{purple}{\textsf{Purple}}$ $\color{red}{\textsf{Red}}$
$\color{teal}{\textsf{Teal}}$ $\color{violet}{\textsf{Violet}}$ $\color{white}{\textsf{White}}$ $\color{yellow}{\textsf{Yellow}}$ $\color{BurntOrange}{\textsf{Burnt Orange}}$

$\textsf{{\color[rgb]{0.0, 0.0, 1.0}Yo}{\color[rgb]{0.1, 0.0, 0.9}u~ }{\color[rgb]{0.2, 0.0, 0.8}c}{\color[rgb]{0.3, 0.0, 0.7}a}{\color[rgb]{0.4, 0.0, 0.6}n~ }{\color[rgb]{0.5, 0.0, 0.5}do~ }{\color[rgb]{0.6, 0.0, 0.4}th}{\color[rgb]{0.7, 0.0, 0.3}is~ }{\color[rgb]{0.8, 0.0, 0.2}t}{\color[rgb]{0.9, 0.0, 0.1}o}{\color[rgb]{1.0, 0.0, 0.0}o}}$

Font Sizes

command result
$\Huge{\textsf{lorem ipsum}}$ $\Huge{\textsf{lorem ipsum}}$
$\huge{\textsf{lorem ipsum}}$ $\huge{\textsf{lorem ipsum}}$
$\LARGE{\textsf{lorem ipsum}}$ $\LARGE{\textsf{lorem ipsum}}$
$\Large{\textsf{lorem ipsum}}$ $\Large{\textsf{lorem ipsum}}$
$\large{\textsf{lorem ipsum}}$ $\large{\textsf{lorem ipsum}}$
$\normalsize{\textsf{lorem ipsum}}$ $\normalsize{\textsf{lorem ipsum}}$
$\small{\textsf{lorem ipsum}}$ $\small{\textsf{lorem ipsum}}$
$\scriptsize{\textsf{lorem ipsum}}$ $\scriptsize{\textsf{lorem ipsum}}$
$\tiny{\textsf{lorem ipsum}}$ $\tiny{\textsf{lorem ipsum}}$

Tex limitations

Tex can't be selected

$\textsf{Try copying this text.}$

The problem with writting using tex is that tex texts are not searchable (not indexed) nor selectable as you can see with the text above witten with Tex. (You can copy the Tex Commands with the right button of the mouse, but it isn't as good as it could be.)

Tex causes text overflow

You should't write too many characters per line (at least as of today (2023-04-02)) or it'll overflow creating an horizontal scroll as you can see opening the details below.

Example of Tex breaking creating a horizontal bar

$\text{Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.}$

Tex don't work on links

AS you can see, $Tex breaks inside links$ too. (using []() here)

$\textsf{Tex inside an a tag}$

$\textsf{Tex outside an a tag}$

Tex are broken on the mobile app

Tex is still out of the mobile app markdown (2023-04-02)
example of mobile app Tex bug.

Some words don't work inside Tex

As of today this is the list of known words that don't work inside tex:

  • select - $select$ - $\textsf{s.elect}$
  • begin - $begin$ - $\textsf{b.egin}$

I tested a few SQL related words and select is the only that I found that broke Tex, dunno if the reason for it to not work is not SQL related.

Useful links

@kenneth558
Copy link

Great job!!!!!

@xarich
Copy link

xarich commented Apr 3, 2023

Nice 👍, please find hereafter some (minor) suggestions:

  • Section "Tex limitations"

    • Use subtitles (H2 / ##) and update the Table of Content to list limitations from the start (like done for [Learn Tex basic syntax] section)
    • add a dedicated section for "can't select the text" and please add: tex texts are not searchable (not indexed) nor selectable 🤨
  • Typo : "AS you can se" should be "As you can see".

@pavelkornev
Copy link

Do you know what needs to be done to make this work on GitHub Enterprise instance?

@maryjom
Copy link

maryjom commented Apr 3, 2023

Tex can make text a certain color, but is not accessible to screen reader users (blind and low vision users). To me that is a huge limitation - it works for some people, but not everyone. So be careful who the audience for the Tex text is. If you think that someone who is blind or visually impaired is not able to be a programmer or use GitHub created content...think again.

@EasyG0ing1
Copy link

@maryjom

Tex can make text a certain color, but is not accessible to screen reader users (blind and low vision users). To me that is a huge limitation - it works for some people, but not everyone. So be careful who the audience for the Tex text is. If you think that someone who is blind or visually impaired is not able to be a programmer or use GitHub created content...think again.

This is an excellent point. It is most likely problematic because it renders the text as graphics. This is unfortunate though in the context of its main purpose being to provide the ability to generate math equations with their various symbols, it makes sense.

It does make me curious though, how do screen reader users get the information in such things as where math equations are an issue? Or is it that they simply have no options for that (which seems a bit harsh given today's advances in computing)?

@maryjom
Copy link

maryjom commented Apr 4, 2023

@EasyG0ing1 There is markup called MathML that can be used on content intended for rendering math equations. There are browser plugins (or browsers like Firefox) that support the rendering of MathML and then provide the programmatic information to the screen reader technology which then speaks the appropriate information to the blind user. Here's an article about how it works: What is MathML?.

@EasyG0ing1
Copy link

@maryjom OK, that's pretty amazing. This is something that I don't give much thought but when I do think about it after reading your posts, I realize how much I take my eyes for granted and could not imagine how difficult it would be to use a computer not being able to see it. The ability for people to adapt and leverage these tools is nothing short of astounding to me.

@luigiMinardi
Copy link
Author

Nice +1, please find hereafter some (minor) suggestions:

  • Section "Tex limitations"
    ...
  • Typo : "AS you can se" should be "As you can see".

@xarich I think I fixed everything you told me :)

@luigiMinardi
Copy link
Author

There is markup called MathML that can be used on content intended for rendering math equations.

@maryjom The MathJax that github uses theoretically have MathML builtin. Do you know if it actually works? I didn't tested it out here.

@xarich
Copy link

xarich commented Apr 5, 2023

@xarich I think I fixed everything you told me :)

@luigiMinardi => perfect 👍, I have even learnt (thanks 🙏) than there are options available with a right click I didn't know about ...

@San3-Cod3
Copy link

They broke \colorbox and I don't know why - my whole profile and some repos are now ruined...

Someone with some pull, please bug them to restore it

@kenneth558
Copy link

Also broken during this same time frame: my Pushover account no longer sends out alerts. Although not related to Git whatsoever, until I get it troubleshot there remains some remote chance something sinister is going on. Grrrrrrrrrrrrrrrrrr

@luigiMinardi
Copy link
Author

luigiMinardi commented May 2, 2023

troubleshot there remains some remote chance something sinister is going on.

@San3-Cod3 Yeah, it's broken now, sadly. I won't remove \colorbox from the gist until they (github) tell us if they're bringing it back or if it will not be a feature anymore. Just in case.

@San3-Cod3
Copy link

Not entirely accurate but this colorbox change basically changed my stuff that essentially looked something like this before, before GitHub broke colorbox for whatever crazy reason, with the colorbox now manually changed to just color and fbox, so not exactly how it used to appear but close to it, so it went from looking somewhat like this:

ss (2023-05-08 at 02 38 42)

To now looking like this...:

ss (2023-05-08 at 02 39 26)

ss (2023-05-08 at 02 40 16)

Like why...? I just don't understand this, my only way to use colour and make certain projects look better, to me personally anyway, and they just break the only thing we have to circumvent this non-colour bollocks.... Just why...

@San3-Cod3
Copy link

Further examples:

Before/After:

ss (2023-05-08 at 03 15 50)
ss (2023-05-08 at 03 15 26)

ss (2023-05-08 at 03 17 18)
ss (2023-05-08 at 03 17 44)

+Many other Repo/Profile breaking bugs like that...

@Kyros0718
Copy link

Kyros0718 commented Sep 25, 2023

Tex works for mobile if you use the website and not the app


@San3-Cod3
Copy link

Further things have now broken - more and more is being taken away from us.

@luigiMinardi
Copy link
Author

I do not know if it's an update. Or if it's for Android Phone Users. But Tex works for mobile

Which version of the app are you in? I'm on 1.132.0 and can't see the Tex working on mine.

@Kyros0718
Copy link

I found out recently that you meant the app. And after testing it out, you were right, it doesn't work on the app, but images, videos, emotes, (notes,warning, importants) quotes also doesn't work on the app. But it does work on a browser on mobile. So I think the app just hasn't updated quickly enough yet to meet the same version as the website.

@bassamanator
Copy link

bassamanator commented Nov 28, 2023

The word begin also breaks Tex/doesn't work.

${\small{\textcolor{WildStrawberry}{\texttt{Begin}}}}$

${\small{\textcolor{WildStrawberry}{\texttt{B.egin}}}}$

@luigiMinardi
Copy link
Author

The word begin also breaks Tex/doesn't work.

${\small{\textcolor{WildStrawberry}{\texttt{Begin}}}}$

B.egin

Thanks, updated with the added info.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment