Github markdown colors (Using Tex and the github MathJax support)

tex-colors.md

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 & Notes
• Learn Tex basic syntax
  $\to$ Text in Tex
  $\to$ Font Styles
  $\to$ Colors
       $\diamond$ Color examples table
  $\to$ Font Sizes
• Tex limitations
  $\to$ It isn't selectable
  $\to$ Causes text overflow
  $\to$ Don't work inside link tags
  $\to$ Are not yet added to the mobile app markdown
  $\to$ Some words don't work on it
• Useful links

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)

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

• MathJax Github
• Github Markup request colors thread (issue 1440)
• LaTex Wiki
• KaTex Wiki
• The TeX Users Group (TUG)

seems the % doesn't show

$\color{green}{\textsf{100.00 %}}$
$\color{green}{\textsf{100.00 \%}}$
$\color{green}{\textsf{100.00 \\%}}$
$\color{green}{\textsf{100.00 \percent}}$
$\color{green}{\textsf{100.00 {\percent}}}$

$\color{green}{\textsf{100.00 %}}$
$\color{green}{\textsf{100.00 %}}$
$\color{green}{\textsf{100.00 \%}}$
$\color{green}{\textsf{100.00 \percent}}$
$\color{green}{\textsf{100.00 {\percent}}}$

seems work with \\%