Skip to content

Terminal Color Supportยค

Normal fenced code blocks can 'only' highlight per language - but cannot "understand" terminal output and their color escape sequences.

Therefore during the mkdocs build we include xtermjs and a helper script into your assets, which renders the escape codes correctly within HTML.

This is far more efficient than using svg or png formats.

Demo Script

$ cat /tmp/colordemo.sh
echo -e '<attribute background foreground>'
echo -e "\nSpecifying the background color"
for bg in 40 41 42 43 44 45 46 47
do
  for att in 0 1 2 5 7 4
  do
    for fg in 30 31 32 33 34 35 36 37
    do
      # -n option is not valid here.  Instead, \c is used.
      echo -e "\x1b[${att};${bg};${fg}m<${att} ${bg} ${fg}> \x1b[0m\c"
    done
    echo -e " "
  done
  echo -e " "
done

echo -e '\nNot specifying the background color'
for att in 0 1 2 5 7 4
do
  for fg in 30 31 32 33 34 35 36 37
  do
    echo -e "\x1b[${att};${fg}m<${att} NA ${fg}> \x1b[0m\c"
  done
  echo -e " "
done

echo -e "\nTesting 256 colors"

i=0
while [ $i -lt 16 ]
do
  j=0
  while [ $j -lt 16 ]
  do
    n=$(( i * 16 + j))
    ns=$(printf "%03d" $n)
    echo -e "\x1b[48;5;${n}m ${ns} \x1b[0m\c"
    j=$(( j + 1 ))
  done
  i=$(( i + 1))
  echo -e " "
done

echo -e "   *   *   *   *"
i=0
while [ $i -lt 16 ]
do
  j=0
  while [ $j -lt 16 ]
  do
    n=$(( i * 16 + j))
    ns=$(printf "%03d" $n)
    echo -e "\x1b[4;38;5;${n}m ${ns} \x1b[0m\c"
    j=$(( j + 1 ))
  done
  i=$(( i + 1))
  echo -e " "
done

echo -e "Bye!"

$ bash -c /tmp/colordemo.sh
<attribute background foreground>

Specifying the background color
<0 40 30> <0 40 31> <0 40 32> <0 40 33> <0 40 34> <0 40 35> <0 40 36> <0 40 37>  
<1 40 30> <1 40 31> <1 40 32> <1 40 33> <1 40 34> <1 40 35> <1 40 36> <1 40 37>  
<2 40 30> <2 40 31> <2 40 32> <2 40 33> <2 40 34> <2 40 35> <2 40 36> <2 40 37>  
<5 40 30> <5 40 31> <5 40 32> <5 40 33> <5 40 34> <5 40 35> <5 40 36> <5 40 37>  
<7 40 30> <7 40 31> <7 40 32> <7 40 33> <7 40 34> <7 40 35> <7 40 36> <7 40 37>  
<4 40 30> <4 40 31> <4 40 32> <4 40 33> <4 40 34> <4 40 35> <4 40 36> <4 40 37> 

<0 41 30> <0 41 31> <0 41 32> <0 41 33> <0 41 34> <0 41 35> <0 41 36> <0 41 37>  
<1 41 30> <1 41 31> <1 41 32> <1 41 33> <1 41 34> <1 41 35> <1 41 36> <1 41 37>  
<2 41 30> <2 41 31> <2 41 32> <2 41 33> <2 41 34> <2 41 35> <2 41 36> <2 41 37>  
<5 41 30> <5 41 31> <5 41 32> <5 41 33> <5 41 34> <5 41 35> <5 41 36> <5 41 37>  
<7 41 30> <7 41 31> <7 41 32> <7 41 33> <7 41 34> <7 41 35> <7 41 36> <7 41 37>  
<4 41 30> <4 41 31> <4 41 32> <4 41 33> <4 41 34> <4 41 35> <4 41 36> <4 41 37> 

<0 42 30> <0 42 31> <0 42 32> <0 42 33> <0 42 34> <0 42 35> <0 42 36> <0 42 37>  
<1 42 30> <1 42 31> <1 42 32> <1 42 33> <1 42 34> <1 42 35> <1 42 36> <1 42 37>  
<2 42 30> <2 42 31> <2 42 32> <2 42 33> <2 42 34> <2 42 35> <2 42 36> <2 42 37>  
<5 42 30> <5 42 31> <5 42 32> <5 42 33> <5 42 34> <5 42 35> <5 42 36> <5 42 37>  
<7 42 30> <7 42 31> <7 42 32> <7 42 33> <7 42 34> <7 42 35> <7 42 36> <7 42 37>  
<4 42 30> <4 42 31> <4 42 32> <4 42 33> <4 42 34> <4 42 35> <4 42 36> <4 42 37> 

<0 43 30> <0 43 31> <0 43 32> <0 43 33> <0 43 34> <0 43 35> <0 43 36> <0 43 37>  
<1 43 30> <1 43 31> <1 43 32> <1 43 33> <1 43 34> <1 43 35> <1 43 36> <1 43 37>  
<2 43 30> <2 43 31> <2 43 32> <2 43 33> <2 43 34> <2 43 35> <2 43 36> <2 43 37>  
<5 43 30> <5 43 31> <5 43 32> <5 43 33> <5 43 34> <5 43 35> <5 43 36> <5 43 37>  
<7 43 30> <7 43 31> <7 43 32> <7 43 33> <7 43 34> <7 43 35> <7 43 36> <7 43 37>  
<4 43 30> <4 43 31> <4 43 32> <4 43 33> <4 43 34> <4 43 35> <4 43 36> <4 43 37> 

<0 44 30> <0 44 31> <0 44 32> <0 44 33> <0 44 34> <0 44 35> <0 44 36> <0 44 37>  
<1 44 30> <1 44 31> <1 44 32> <1 44 33> <1 44 34> <1 44 35> <1 44 36> <1 44 37>  
<2 44 30> <2 44 31> <2 44 32> <2 44 33> <2 44 34> <2 44 35> <2 44 36> <2 44 37>  
<5 44 30> <5 44 31> <5 44 32> <5 44 33> <5 44 34> <5 44 35> <5 44 36> <5 44 37>  
<7 44 30> <7 44 31> <7 44 32> <7 44 33> <7 44 34> <7 44 35> <7 44 36> <7 44 37>  
<4 44 30> <4 44 31> <4 44 32> <4 44 33> <4 44 34> <4 44 35> <4 44 36> <4 44 37> 

<0 45 30> <0 45 31> <0 45 32> <0 45 33> <0 45 34> <0 45 35> <0 45 36> <0 45 37>  
<1 45 30> <1 45 31> <1 45 32> <1 45 33> <1 45 34> <1 45 35> <1 45 36> <1 45 37>  
<2 45 30> <2 45 31> <2 45 32> <2 45 33> <2 45 34> <2 45 35> <2 45 36> <2 45 37>  
<5 45 30> <5 45 31> <5 45 32> <5 45 33> <5 45 34> <5 45 35> <5 45 36> <5 45 37>  
<7 45 30> <7 45 31> <7 45 32> <7 45 33> <7 45 34> <7 45 35> <7 45 36> <7 45 37>  
<4 45 30> <4 45 31> <4 45 32> <4 45 33> <4 45 34> <4 45 35> <4 45 36> <4 45 37> 

<0 46 30> <0 46 31> <0 46 32> <0 46 33> <0 46 34> <0 46 35> <0 46 36> <0 46 37>  
<1 46 30> <1 46 31> <1 46 32> <1 46 33> <1 46 34> <1 46 35> <1 46 36> <1 46 37>  
<2 46 30> <2 46 31> <2 46 32> <2 46 33> <2 46 34> <2 46 35> <2 46 36> <2 46 37>  
<5 46 30> <5 46 31> <5 46 32> <5 46 33> <5 46 34> <5 46 35> <5 46 36> <5 46 37>  
<7 46 30> <7 46 31> <7 46 32> <7 46 33> <7 46 34> <7 46 35> <7 46 36> <7 46 37>  
<4 46 30> <4 46 31> <4 46 32> <4 46 33> <4 46 34> <4 46 35> <4 46 36> <4 46 37> 

<0 47 30> <0 47 31> <0 47 32> <0 47 33> <0 47 34> <0 47 35> <0 47 36> <0 47 37>  
<1 47 30> <1 47 31> <1 47 32> <1 47 33> <1 47 34> <1 47 35> <1 47 36> <1 47 37>  
<2 47 30> <2 47 31> <2 47 32> <2 47 33> <2 47 34> <2 47 35> <2 47 36> <2 47 37>  
<5 47 30> <5 47 31> <5 47 32> <5 47 33> <5 47 34> <5 47 35> <5 47 36> <5 47 37>  
<7 47 30> <7 47 31> <7 47 32> <7 47 33> <7 47 34> <7 47 35> <7 47 36> <7 47 37>  
<4 47 30> <4 47 31> <4 47 32> <4 47 33> <4 47 34> <4 47 35> <4 47 36> <4 47 37> 


Not specifying the background color
<0 NA 30> <0 NA 31> <0 NA 32> <0 NA 33> <0 NA 34> <0 NA 35> <0 NA 36> <0 NA 37>  
<1 NA 30> <1 NA 31> <1 NA 32> <1 NA 33> <1 NA 34> <1 NA 35> <1 NA 36> <1 NA 37>  
<2 NA 30> <2 NA 31> <2 NA 32> <2 NA 33> <2 NA 34> <2 NA 35> <2 NA 36> <2 NA 37>  
<5 NA 30> <5 NA 31> <5 NA 32> <5 NA 33> <5 NA 34> <5 NA 35> <5 NA 36> <5 NA 37>  
<7 NA 30> <7 NA 31> <7 NA 32> <7 NA 33> <7 NA 34> <7 NA 35> <7 NA 36> <7 NA 37>  
<4 NA 30> <4 NA 31> <4 NA 32> <4 NA 33> <4 NA 34> <4 NA 35> <4 NA 36> <4 NA 37> 

Testing 256 colors
 000  001  002  003  004  005  006  007  008  009  010  011  012  013  014  015  
 016  017  018  019  020  021  022  023  024  025  026  027  028  029  030  031  
 032  033  034  035  036  037  038  039  040  041  042  043  044  045  046  047  
 048  049  050  051  052  053  054  055  056  057  058  059  060  061  062  063  
 064  065  066  067  068  069  070  071  072  073  074  075  076  077  078  079  
 080  081  082  083  084  085  086  087  088  089  090  091  092  093  094  095  
 096  097  098  099  100  101  102  103  104  105  106  107  108  109  110  111  
 112  113  114  115  116  117  118  119  120  121  122  123  124  125  126  127  
 128  129  130  131  132  133  134  135  136  137  138  139  140  141  142  143  
 144  145  146  147  148  149  150  151  152  153  154  155  156  157  158  159  
 160  161  162  163  164  165  166  167  168  169  170  171  172  173  174  175  
 176  177  178  179  180  181  182  183  184  185  186  187  188  189  190  191  
 192  193  194  195  196  197  198  199  200  201  202  203  204  205  206  207  
 208  209  210  211  212  213  214  215  216  217  218  219  220  221  222  223  
 224  225  226  227  228  229  230  231  232  233  234  235  236  237  238  239  
 240  241  242  243  244  245  246  247  248  249  250  251  252  253  254  255  
   *   *   *   *
 000  001  002  003  004  005  006  007  008  009  010  011  012  013  014  015  
 016  017  018  019  020  021  022  023  024  025  026  027  028  029  030  031  
 032  033  034  035  036  037  038  039  040  041  042  043  044  045  046  047  
 048  049  050  051  052  053  054  055  056  057  058  059  060  061  062  063  
 064  065  066  067  068  069  070  071  072  073  074  075  076  077  078  079  
 080  081  082  083  084  085  086  087  088  089  090  091  092  093  094  095  
 096  097  098  099  100  101  102  103  104  105  106  107  108  109  110  111  
 112  113  114  115  116  117  118  119  120  121  122  123  124  125  126  127  
 128  129  130  131  132  133  134  135  136  137  138  139  140  141  142  143  
 144  145  146  147  148  149  150  151  152  153  154  155  156  157  158  159  
 160  161  162  163  164  165  166  167  168  169  170  171  172  173  174  175  
 176  177  178  179  180  181  182  183  184  185  186  187  188  189  190  191  
 192  193  194  195  196  197  198  199  200  201  202  203  204  205  206  207  
 208  209  210  211  212  213  214  215  216  217  218  219  220  221  222  223  
 224  225  226  227  228  229  230  231  232  233  234  235  236  237  238  239  
 240  241  242  243  244  245  246  247  248  249  250  251  252  253  254  255  
Bye!