PICO-8 Wiki
Advertisement

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/*
   are you here to fix syntax highlighting? is something the wrong color?
   you're in the right place.
   especially if something is turning up bright magenta.
   that means I couldn't figure out some syntax tag's meaning and thus assign it the appropriate color.
   use the inspector to find out which tag the magenta/wrong-color thing is and change/add it below.
   if you find a tag we're missing but don't know what it means, set it to #FF00FF until you can see it in context.

   and if EVERYTHING is the wrong color, then they've probably changed the syntax highlighter AGAIN.
   you'll need to reverse-engineer the appropriate classes and tags and set their css properties here.

   ---

   (leaving this palette here for syntax-highlighting reference)

   The extended PICO-8 palette in web format, confirmed via capture
   names as suggested by https://www.romanzolotarev.com/pico-8-color-palette/
   
      0 #000000 black
      1 #1D2B53 dark-blue
      2 #7E2553 dark-purple
      3 #008751 dark-green
      4 #AB5236 brown
      5 #5F574F dark-gray
      6 #C2C3C7 light-gray
      7 #FFF1E8 white
      8 #FF004D red
      9 #FFA300 orange
     10 #FFEC27 yellow
     11 #00E436 green
     12 #29ADFF blue
     13 #83769C indigo
     14 #FF77A8 pink
     15 #FFCCAA peach
     :
    128 #291814 (name?)
    129 #111D35 (name?)
    130 #422136 (name?)
    131 #125359 (name?)
    132 #742F29 (name?)
    133 #49333B (name?)
    134 #A28879 (name?)
    135 #F3EF7D (name?)
    136 #BE1250 (name?)
    137 #FF6C24 (name?)
    138 #A8E72E (name?)
    139 #00B543 (name?)
    140 #065AB5 (name?)
    141 #754665 (name?)
    142 #FF6E59 (name?)
    143 #FF9D81 (name?)
*/


/* ----------------------------------------------------------------
     <syntaxhighlight lang="lua">
   ---------------------------------------------------------------- */

.mw-highlight
{
    font-family: Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace;
    font-style: normal; 
    font-weight: bold;
    line-height: 1.05em;
    tab-size: 2;
    -o-tab-size: 2;
    -moz-tab-size: 2;

    background-color: #1D2B53;
}

div.mw-highlight
{
    border-top: 1px solid #FF004D;
    border-left: 1px solid #141e39;
    border-right: 1px solid #141e39;
    border-bottom: 1px solid #FF004D;
}

.mw-highlight pre
{
    padding: 4px 2px 7px 4px;
    overflow: auto;
    word-wrap: normal;
    border-width: 0px;

    font-family: Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace;
    font-style: normal; 
    font-weight: bold;
    line-height: 1.05em;

    background-color: #1D2B53;
}

/* breakpoint?           */ .mw-highlight .bp   { color: #FF00FF }

/* comment               */ .mw-highlight .c    { color: #83769C; font-style: normal }
/* comment (1 line)      */ .mw-highlight .c1   { color: #83769C; font-style: normal }
/* comment (h?)          */ .mw-highlight .ch   { color: #FF00FF; font-style: normal }
/* comment (multi-line)  */ .mw-highlight .cm   { color: #83769C; font-style: normal }
/* comment (pf?)         */ .mw-highlight .cpf  { color: #FF00FF; font-style: normal }
/* comment (s?)          */ .mw-highlight .cs   { color: #FF00FF; font-style: normal }

/* c preprocessor?       */ .mw-highlight .cp   { color: #FFA300; font-style: normal }

/* d? (l?)               */ .mw-highlight .dl   { color: #FF00FF }

/* f? (m?)               */ .mw-highlight .fm   { color: #FF00FF }

/* g? (h?)               */ .mw-highlight .gh   { color: #FF00FF }
/* g? (p?)               */ .mw-highlight .gp   { color: #FF00FF }

/* g? (d?)               */ .mw-highlight .gd   { color: #FF00FF }
/* g? (e?)               */ .mw-highlight .ge   { color: #FF00FF; font-style: normal }
/* g? (i?)               */ .mw-highlight .gi   { color: #FF00FF }
/* g? (o?)               */ .mw-highlight .go   { color: #FF00FF }
/* g? (r?)               */ .mw-highlight .gr   { color: #FF00FF }
/* g? (s?)               */ .mw-highlight .gs   { color: #FF00FF }
/* g? (t?)               */ .mw-highlight .gt   { color: #FF00FF }
/* g? (u?)               */ .mw-highlight .gu   { color: #FF00FF }

/* i? (l?)               */ .mw-highlight .il   { color: #FF00FF }

/* keyword               */ .mw-highlight .k    { color: #FF77A8 }
/* keyword (declaration) */ .mw-highlight .kd   { color: #FF77A8 }
/* keyword (n?)          */ .mw-highlight .kn   { color: #FF00FF }
/* keyword (p?)          */ .mw-highlight .kp   { color: #FF00FF }
/* keyword (reserved)    */ .mw-highlight .kr   { color: #FF77A8 }

/* keyword (constant)    */ .mw-highlight .kc   { color: #29ADFF }
/* keyword (uniTs)       */ .mw-highlight .kt   { color: #29ADFF }

/* nuMeric               */ .mw-highlight .m    { color: #29ADFF }
/* nuMeric (binary)      */ .mw-highlight .mb   { color: #29ADFF }
/* nuMeric (float)       */ .mw-highlight .mf   { color: #29ADFF }
/* nuMeric (hex)         */ .mw-highlight .mh   { color: #29ADFF }
/* nuMeric (int)         */ .mw-highlight .mi   { color: #29ADFF }
/* nuMeric (octal)       */ .mw-highlight .mo   { color: #29ADFF }

/* name                  */ .mw-highlight .n    { color: #C2C3C7 }
/* name (a?)             */ .mw-highlight .na   { color: #FF00FF }
/* name (built-in)       */ .mw-highlight .nb   { color: #00E436 }
/* name (class)          */ .mw-highlight .nc   { color: #C2C3C7 }
/* name (d?)             */ .mw-highlight .nd   { color: #FF00FF }
/* name (e?)             */ .mw-highlight .ne   { color: #FF00FF }
/* name (function)       */ .mw-highlight .nf   { color: #C2C3C7 }
/* name (l?)             */ .mw-highlight .nl   { color: #FF00FF }
/* name (o?)             */ .mw-highlight .no   { color: #FF00FF }
/* name (type?)          */ .mw-highlight .nt   { color: #29ADFF }
/* name (v?)             */ .mw-highlight .nv   { color: #FF00FF }

/* operator              */ .mw-highlight .o    { color: #FFF1E8 }
/* operator (word)       */ .mw-highlight .ow   { color: #FF77A8 }

/* parens                */ .mw-highlight .p    { color: #FFF1E8 }

/* string                */ .mw-highlight .s    { color: #29ADFF }
/* string (single quote) */ .mw-highlight .s1   { color: #29ADFF }
/* string (double quote) */ .mw-highlight .s2   { color: #29ADFF }
/* string (a?)           */ .mw-highlight .sa   { color: #FF00FF }
/* string (b?)           */ .mw-highlight .sb   { color: #FF00FF }
/* string (c?)           */ .mw-highlight .sc   { color: #FF00FF }
/* string (d?)           */ .mw-highlight .sd   { color: #FF00FF; font-style: normal }
/* string (h?)           */ .mw-highlight .sh   { color: #FF00FF }
/* string (multi-line)   */ .mw-highlight .sm   { color: #29ADFF }

/* string (escaped)      */ .mw-highlight .se   { color: #29ADFF }
/* string (i?)           */ .mw-highlight .si   { color: #FF00FF }
/* string (r?)           */ .mw-highlight .sr   { color: #FF00FF }

/* string (s?)           */ .mw-highlight .ss   { color: #FF00FF }

/* string (x?)           */ .mw-highlight .sx   { color: #FF00FF }

/* v? (c?)               */ .mw-highlight .vc   { color: #FF00FF }
/* v? (g?)               */ .mw-highlight .vg   { color: #FF00FF }
/* v? (i?)               */ .mw-highlight .vi   { color: #FF00FF }
/* v? (m?)               */ .mw-highlight .vm   { color: #FF00FF }

/* v?                    */ .mw-highlight .w    { color: #FF00FF }

/* ----------------------------------------------------------------
     <pre class="p8sh"> (for shell/console examples)
   ---------------------------------------------------------------- */

.p8sh
{
    font-family: Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace;
    font-style: normal; 
    font-weight: bold;
    line-height: 1.05em;
}

pre.p8sh
{
    background-color: #000000;
    padding: 4px 2px 7px 4px;
    overflow: auto;
    word-wrap: normal;
    border-width: 0px;

    font-family: Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace;
    font-style: normal; 
    font-weight: bold;
    line-height: 1.05em;

    color: #C2C3C7;
    font-style: normal;
}


/* ----------------------------------------------------------------
     <syntaxhighlight lang="lua"> (OBSOLETE?)
   ---------------------------------------------------------------- */

.lua.source-lua
{
    font-family: Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace;
    font-style: normal; 
    font-weight: bold;
    line-height: 1.05em;
    tab-size: 2;
    -o-tab-size: 2;
    -moz-tab-size: 2;
}

.lua.source-lua .de1
{
    color: #D5D4D4;
    border-top: 1px solid #FF004D;
    border-left: 1px solid #141e39;
    border-right: 1px solid #141e39;
    border-bottom: 1px solid #FF004D;

    font-family: Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace;
    font-style: normal; 
    font-weight: bold;
    line-height: 1.05em;
}
.lua.source-lua .de2
{
    color: #D5D4D4;
    border-top: 1px solid #FF004D;
    border-left: 1px solid #141e39;
    border-right: 1px solid #141e39;
    border-bottom: 1px solid #FF004D;

    font-family: Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace;
    font-style: normal; 
    font-weight: bold;
    line-height: 1.05em;
}

.lua.source-lua pre.de1
{
    background-color: #1D2B53;
    padding: 4px 2px 7px 4px;
    overflow: auto;
    word-wrap: normal;

    font-family: Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace;
    font-style: normal; 
    font-weight: bold;
    line-height: 1.05em;
}
.lua.source-lua pre.de2
{
    background-color: #1D2B53;
    padding: 4px 2px 7px 4px;
    overflow: auto;
    word-wrap: normal;

    font-family: Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace;
    font-style: normal; 
    font-weight: bold;
    line-height: 1.05em;
}

/* brackets   */ .lua.source-lua span.br0    { color: #FFF1E8; } 
/* comments   */ .lua.source-lua span.co0    { color: #83769C; font-style: normal; } 
/* comments   */ .lua.source-lua span.co1    { color: #83769C; font-style: normal; } 
/* comments   */ .lua.source-lua span.co2    { color: #83769C; font-style: normal; } 
/* comments   */ .lua.source-lua span.coMULTI{ color: #83769C; font-style: normal; } 
/* esc-seqs0  */ .lua.source-lua span.es0    { color: #29ADFF; }
/* keywords1  */ .lua.source-lua span.kw1    { color: #FF77A8; } 
/* keywords2  */ .lua.source-lua span.kw2    { color: #FF77A8; } 
/* keywords3  */ .lua.source-lua span.kw3    { color: #00E436; }
/* keywords4  */ .lua.source-lua span.kw4    { color: #29ADFF; }
/* methods0   */ .lua.source-lua span.me0    { color: #C2C3C7; } 
/* methods1   */ .lua.source-lua span.me1    { color: #C2C3C7; } 
/* methods2   */ .lua.source-lua span.me2    { color: #C2C3C7; } 
/* numbers    */ .lua.source-lua span.nu0    { color: #29ADFF; }
/* variables0 */ .lua.source-lua span.re0    { color: #C2C3C7; }
/* variables1 */ .lua.source-lua span.re0    { color: #C2C3C7; }
/* variables2 */ .lua.source-lua span.re0    { color: #C2C3C7; }
/* variables3 */ .lua.source-lua span.re0    { color: #C2C3C7; }
/* variables4 */ .lua.source-lua span.re0    { color: #C2C3C7; }
/* variables5 */ .lua.source-lua span.re0    { color: #C2C3C7; }
/* operators  */ .lua.source-lua span.sy0    { color: #FFF1E8; } 
/* strings    */ .lua.source-lua span.st0    { color: #29ADFF; }
/* strings?   */ .lua.source-lua span.st_h   { color: #29ADFF; }

/* ----------------------------------------------------------------
     <syntaxhighlight lang="io"> (OBSOLETE?)

     literally just cut-and-pasted lua and changed "lua" to "io",
     with colors set to light gray on black, so we can use "io"
     to create similar formatting in examples at the shell prompt
   ---------------------------------------------------------------- */

.io.source-io
{
    font-family: Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace;
    font-style: normal; 
    font-weight: bold;
    line-height: 1.05em;
}

.io.source-io .de1
{
    color: #C2C3C7;
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;

    font-family: Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace;
    font-style: normal; 
    font-weight: bold;
    line-height: 1.05em;
}
.io.source-io .de2
{
    color: #C2C3C7;
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;

    font-family: Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace;
    font-style: normal; 
    font-weight: bold;
    line-height: 1.05em;
}

.io.source-io pre.de1
{
    background-color: #000000;
    padding: 4px 2px 7px 4px;
    overflow: auto;
    word-wrap: normal;

    font-family: Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace;
    font-style: normal; 
    font-weight: bold;
    line-height: 1.05em;
}
.io.source-io pre.de2
{
    background-color: #000000;
    padding: 4px 2px 7px 4px;
    overflow: auto;
    word-wrap: normal;

    font-family: Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace;
    font-style: normal; 
    font-weight: bold;
    line-height: 1.05em;
}

/* brackets   */ .io.source-io span.br0    { color: #C2C3C7; } 
/* comments   */ .io.source-io span.co0    { color: #C2C3C7; font-style: normal; } 
/* comments   */ .io.source-io span.co1    { color: #C2C3C7; font-style: normal; } 
/* comments   */ .io.source-io span.co2    { color: #C2C3C7; font-style: normal; } 
/* comments   */ .io.source-io span.coMULTI{ color: #C2C3C7; font-style: normal; } 
/* esc-seqs0 */ .io.source-io span.es0    { color: #C2C3C7; }
/* keywords1  */ .io.source-io span.kw1    { color: #C2C3C7; } 
/* keywords2  */ .io.source-io span.kw2    { color: #C2C3C7; } 
/* keywords3  */ .io.source-io span.kw3    { color: #C2C3C7; }
/* keywords4  */ .io.source-io span.kw4    { color: #C2C3C7; }
/* methods0   */ .io.source-io span.me0    { color: #C2C3C7; } 
/* methods1   */ .io.source-io span.me1    { color: #C2C3C7; } 
/* methods2   */ .io.source-io span.me2    { color: #C2C3C7; } 
/* numbers    */ .io.source-io span.nu0    { color: #C2C3C7; }
/* variables0 */ .io.source-io span.re0    { color: #C2C3C7; }
/* variables1 */ .io.source-io span.re0    { color: #C2C3C7; }
/* variables2 */ .io.source-io span.re0    { color: #C2C3C7; }
/* variables3 */ .io.source-io span.re0    { color: #C2C3C7; }
/* variables4 */ .io.source-io span.re0    { color: #C2C3C7; }
/* variables5 */ .io.source-io span.re0    { color: #C2C3C7; }
/* operators  */ .io.source-io span.sy0    { color: #C2C3C7; } 
/* strings    */ .io.source-io span.st0    { color: #C2C3C7; }
/* strings?   */ .io.source-io span.st_h   { color: #C2C3C7; }

/* ----------------------------------------------------------------
     <syntaxhighlight lang="JavaScript"> (OBSOLETE?)
   ---------------------------------------------------------------- */

.javascript.source-javascript pre.de1 {
    color: #D5D4D4;
    
    background-color: #1D2B53;
    border: 1px solid #595959;
    line-height: 1.05em;
    overflow: auto;
    padding: 12px;
    word-wrap: normal;
    font-family: Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace;
}

.javascript.source-javascript span.kw1 { color: #FF77A8; }
.javascript.source-javascript span.kw2 { color: #FF77A8; }
.javascript.source-javascript span.br0 { color: #FFF1E8; }
.javascript.source-javascript span.sy0 { color: #FFF1E8; }
.javascript.source-javascript span.kw3 { color: #00E436; }
.javascript.source-javascript span.nu0 { color: #29ADFF; }
.javascript.source-javascript span.kw4 { color: #29ADFF; }
.javascript.source-javascript span.st0 { color: #29ADFF; }

/* ----------------------------------------------------------------
     <code>
   ---------------------------------------------------------------- */

code {
    /* color: #C2C3C7; have to settle for default color, or links turn gray too */
    /* TODO: make sure <code></code> surround links, not the link label, and the gray links won't be a problem. */
    font-family: Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace;
    font-style: normal; 
    font-weight: bold;
    background-color: #00000020;
}

/* ----------------------------------------------------------------
     <var>
   ---------------------------------------------------------------- */

var {
    /* color: #C2C3C7; have to settle for default color, or links turn gray too */
    font-family: Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace;
    font-style: normal; 
    font-weight: bold;
    background-color: #00000020;
}

/* ----------------------------------------------------------------
     <kbd>
   ---------------------------------------------------------------- */

kbd {
    border: 1px solid #aaa;
    -moz-border-radius: 0.2em;
    -webkit-border-radius: 0.2em;
    border-radius: 0.2em;
    -moz-box-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.1);
    -webkit-box-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.1);
    box-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.1);
    background-color: #f9f9f9;
    background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee);
    background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee);
    background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee);
    background-image: linear-gradient(to bottom, #eee, #f9f9f9, #eee);
    padding: 0.1em 0.3em;
    font-family: inherit;
    font-size: 0.85em;
    color: #232323;
}

/* an experiment that isn't working, pay it no mind */
.tablebit {
    font-family: Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace;
    font-style: normal; 
    font-weight: bold;
    padding-left: 0;
    padding-right: 0;
}

/* make edit links less obtrusive, just use middle gray */
.mw-editsection > a {
	color: #808080;
}
Advertisement