From 5b36d75b5157e6732d54d3d8b814ecd2ed5aad43 Mon Sep 17 00:00:00 2001 From: Marcin Kulik Date: Sat, 19 Mar 2011 20:30:25 +0100 Subject: [PATCH] Add suport for 256 color SGR codes --- public/javascripts/terminal.js | 6 + public/stylesheets/main.css | 516 ++++++++++++++++++++++++++++++--- 2 files changed, 487 insertions(+), 35 deletions(-) diff --git a/public/javascripts/terminal.js b/public/javascripts/terminal.js index ac862e6..4354ee7 100644 --- a/public/javascripts/terminal.js +++ b/public/javascripts/terminal.js @@ -111,6 +111,12 @@ SP.Terminal.prototype = { this.fg = n - 30; } else if (n >= 40 && n <= 47) { this.bg = n - 40; + } else if (n == 38) { + this.fg = codes[i+2]; + i += 2; + } else if (n == 48) { + this.bg = codes[i+2]; + i += 2; } } }, diff --git a/public/stylesheets/main.css b/public/stylesheets/main.css index a8ce0f6..6379e02 100644 --- a/public/stylesheets/main.css +++ b/public/stylesheets/main.css @@ -113,11 +113,11 @@ h2 { /* margin: 0;*/ } -.line .cursor { +.line span.cursor, .line .cursor > span { background-color: #D3D7CF; } -.line span.cursor.inverted { +.line span.cursor.inverted, .line .cursor.inverted > span { background-color: inherit; } @@ -137,41 +137,487 @@ h2 { display: block; } - .fg0 { color: #000000 } - .fg1 { color: #CC0000 } - .fg2 { color: #4E9A06 } - .fg3 { color: #C4A000 } - .fg4 { color: #3465A4 } - .fg5 { color: #75507B } - .fg6 { color: #06989A } - .fg7 { color: #D3D7CF } - .fg8 { color: #555753; font-weight: bold } - .fg9 { color: #EF2929; font-weight: bold } -.fg10 { color: #8AE234; font-weight: bold } -.fg11 { color: #FCE94F; font-weight: bold } -.fg12 { color: #729FCF; font-weight: bold } -.fg13 { color: #AD7FA8; font-weight: bold } -.fg14 { color: #34E2E2; font-weight: bold } -.fg15 { color: #EEEEEC; font-weight: bold } - .bright { font-weight: bold } - .bg0 { background-color: #000000 } - .bg1 { background-color: #CC0000 } - .bg2 { background-color: #4E9A06 } - .bg3 { background-color: #C4A000 } - .bg4 { background-color: #3465A4 } - .bg5 { background-color: #75507B } - .bg6 { background-color: #06989A } - .bg7 { background-color: #D3D7CF } - .bg8 { background-color: #555753 } - .bg9 { background-color: #EF2929 } -.bg10 { background-color: #8AE234 } -.bg11 { background-color: #FCE94F } -.bg12 { background-color: #729FCF } -.bg13 { background-color: #AD7FA8 } -.bg14 { background-color: #34E2E2 } -.bg15 { background-color: #EEEEEC } +/* Foregrounds: */ + +/* ansi colors */ + + .fg0 { color: #000000 } + .fg1 { color: #CC0000 } + .fg2 { color: #4E9A06 } + .fg3 { color: #C4A000 } + .fg4 { color: #3465A4 } + .fg5 { color: #75507B } + .fg6 { color: #06989A } + .fg7 { color: #D3D7CF } + .fg8 { color: #555753; font-weight: bold } + .fg9 { color: #EF2929; font-weight: bold } + .fg10 { color: #8AE234; font-weight: bold } + .fg11 { color: #FCE94F; font-weight: bold } + .fg12 { color: #729FCF; font-weight: bold } + .fg13 { color: #AD7FA8; font-weight: bold } + .fg14 { color: #34E2E2; font-weight: bold } + .fg15 { color: #EEEEEC; font-weight: bold } + +/* rgb 256 colors */ + + .fg16 { color: #000000 } + .fg17 { color: #000033 } + .fg18 { color: #000066 } + .fg19 { color: #000099 } + .fg20 { color: #0000cc } + .fg21 { color: #0000ff } + .fg22 { color: #003300 } + .fg23 { color: #003333 } + .fg24 { color: #003366 } + .fg25 { color: #003399 } + .fg26 { color: #0033cc } + .fg27 { color: #0033ff } + .fg28 { color: #006600 } + .fg29 { color: #006633 } + .fg30 { color: #006666 } + .fg31 { color: #006699 } + .fg32 { color: #0066cc } + .fg33 { color: #0066ff } + .fg34 { color: #009900 } + .fg35 { color: #009933 } + .fg36 { color: #009966 } + .fg37 { color: #009999 } + .fg38 { color: #0099cc } + .fg39 { color: #0099ff } + .fg40 { color: #00cc00 } + .fg41 { color: #00cc33 } + .fg42 { color: #00cc66 } + .fg43 { color: #00cc99 } + .fg44 { color: #00cccc } + .fg45 { color: #00ccff } + .fg46 { color: #00ff00 } + .fg47 { color: #00ff33 } + .fg48 { color: #00ff66 } + .fg49 { color: #00ff99 } + .fg50 { color: #00ffcc } + .fg51 { color: #00ffff } + .fg52 { color: #330000 } + .fg53 { color: #330033 } + .fg54 { color: #330066 } + .fg55 { color: #330099 } + .fg56 { color: #3300cc } + .fg57 { color: #3300ff } + .fg58 { color: #333300 } + .fg59 { color: #333333 } + .fg60 { color: #333366 } + .fg61 { color: #333399 } + .fg62 { color: #3333cc } + .fg63 { color: #3333ff } + .fg64 { color: #336600 } + .fg65 { color: #336633 } + .fg66 { color: #336666 } + .fg67 { color: #336699 } + .fg68 { color: #3366cc } + .fg69 { color: #3366ff } + .fg70 { color: #339900 } + .fg71 { color: #339933 } + .fg72 { color: #339966 } + .fg73 { color: #339999 } + .fg74 { color: #3399cc } + .fg75 { color: #3399ff } + .fg76 { color: #33cc00 } + .fg77 { color: #33cc33 } + .fg78 { color: #33cc66 } + .fg79 { color: #33cc99 } + .fg80 { color: #33cccc } + .fg81 { color: #33ccff } + .fg82 { color: #33ff00 } + .fg83 { color: #33ff33 } + .fg84 { color: #33ff66 } + .fg85 { color: #33ff99 } + .fg86 { color: #33ffcc } + .fg87 { color: #33ffff } + .fg88 { color: #660000 } + .fg89 { color: #660033 } + .fg90 { color: #660066 } + .fg91 { color: #660099 } + .fg92 { color: #6600cc } + .fg93 { color: #6600ff } + .fg94 { color: #663300 } + .fg95 { color: #663333 } + .fg96 { color: #663366 } + .fg97 { color: #663399 } + .fg98 { color: #6633cc } + .fg99 { color: #6633ff } +.fg100 { color: #666600 } +.fg101 { color: #666633 } +.fg102 { color: #666666 } +.fg103 { color: #666699 } +.fg104 { color: #6666cc } +.fg105 { color: #6666ff } +.fg106 { color: #669900 } +.fg107 { color: #669933 } +.fg108 { color: #669966 } +.fg109 { color: #669999 } +.fg110 { color: #6699cc } +.fg111 { color: #6699ff } +.fg112 { color: #66cc00 } +.fg113 { color: #66cc33 } +.fg114 { color: #66cc66 } +.fg115 { color: #66cc99 } +.fg116 { color: #66cccc } +.fg117 { color: #66ccff } +.fg118 { color: #66ff00 } +.fg119 { color: #66ff33 } +.fg120 { color: #66ff66 } +.fg121 { color: #66ff99 } +.fg122 { color: #66ffcc } +.fg123 { color: #66ffff } +.fg124 { color: #990000 } +.fg125 { color: #990033 } +.fg126 { color: #990066 } +.fg127 { color: #990099 } +.fg128 { color: #9900cc } +.fg129 { color: #9900ff } +.fg130 { color: #993300 } +.fg131 { color: #993333 } +.fg132 { color: #993366 } +.fg133 { color: #993399 } +.fg134 { color: #9933cc } +.fg135 { color: #9933ff } +.fg136 { color: #996600 } +.fg137 { color: #996633 } +.fg138 { color: #996666 } +.fg139 { color: #996699 } +.fg140 { color: #9966cc } +.fg141 { color: #9966ff } +.fg142 { color: #999900 } +.fg143 { color: #999933 } +.fg144 { color: #999966 } +.fg145 { color: #999999 } +.fg146 { color: #9999cc } +.fg147 { color: #9999ff } +.fg148 { color: #99cc00 } +.fg149 { color: #99cc33 } +.fg150 { color: #99cc66 } +.fg151 { color: #99cc99 } +.fg152 { color: #99cccc } +.fg153 { color: #99ccff } +.fg154 { color: #99ff00 } +.fg155 { color: #99ff33 } +.fg156 { color: #99ff66 } +.fg157 { color: #99ff99 } +.fg158 { color: #99ffcc } +.fg159 { color: #99ffff } +.fg160 { color: #cc0000 } +.fg161 { color: #cc0033 } +.fg162 { color: #cc0066 } +.fg163 { color: #cc0099 } +.fg164 { color: #cc00cc } +.fg165 { color: #cc00ff } +.fg166 { color: #cc3300 } +.fg167 { color: #cc3333 } +.fg168 { color: #cc3366 } +.fg169 { color: #cc3399 } +.fg170 { color: #cc33cc } +.fg171 { color: #cc33ff } +.fg172 { color: #cc6600 } +.fg173 { color: #cc6633 } +.fg174 { color: #cc6666 } +.fg175 { color: #cc6699 } +.fg176 { color: #cc66cc } +.fg177 { color: #cc66ff } +.fg178 { color: #cc9900 } +.fg179 { color: #cc9933 } +.fg180 { color: #cc9966 } +.fg181 { color: #cc9999 } +.fg182 { color: #cc99cc } +.fg183 { color: #cc99ff } +.fg184 { color: #cccc00 } +.fg185 { color: #cccc33 } +.fg186 { color: #cccc66 } +.fg187 { color: #cccc99 } +.fg188 { color: #cccccc } +.fg189 { color: #ccccff } +.fg190 { color: #ccff00 } +.fg191 { color: #ccff33 } +.fg192 { color: #ccff66 } +.fg193 { color: #ccff99 } +.fg194 { color: #ccffcc } +.fg195 { color: #ccffff } +.fg196 { color: #ff0000 } +.fg197 { color: #ff0033 } +.fg198 { color: #ff0066 } +.fg199 { color: #ff0099 } +.fg200 { color: #ff00cc } +.fg201 { color: #ff00ff } +.fg202 { color: #ff3300 } +.fg203 { color: #ff3333 } +.fg204 { color: #ff3366 } +.fg205 { color: #ff3399 } +.fg206 { color: #ff33cc } +.fg207 { color: #ff33ff } +.fg208 { color: #ff6600 } +.fg209 { color: #ff6633 } +.fg210 { color: #ff6666 } +.fg211 { color: #ff6699 } +.fg212 { color: #ff66cc } +.fg213 { color: #ff66ff } +.fg214 { color: #ff9900 } +.fg215 { color: #ff9933 } +.fg216 { color: #ff9966 } +.fg217 { color: #ff9999 } +.fg218 { color: #ff99cc } +.fg219 { color: #ff99ff } +.fg220 { color: #ffcc00 } +.fg221 { color: #ffcc33 } +.fg222 { color: #ffcc66 } +.fg223 { color: #ffcc99 } +.fg224 { color: #ffcccc } +.fg225 { color: #ffccff } +.fg226 { color: #ffff00 } +.fg227 { color: #ffff33 } +.fg228 { color: #ffff66 } +.fg229 { color: #ffff99 } +.fg230 { color: #ffffcc } +.fg231 { color: #ffffff } + +/* Backgrounds: */ + +/* ansi colors */ + + .bg0 { background-color: #000000 } + .bg1 { background-color: #CC0000 } + .bg2 { background-color: #4E9A06 } + .bg3 { background-color: #C4A000 } + .bg4 { background-color: #3465A4 } + .bg5 { background-color: #75507B } + .bg6 { background-color: #06989A } + .bg7 { background-color: #D3D7CF } + .bg8 { background-color: #555753 } + .bg9 { background-color: #EF2929 } + .bg10 { background-color: #8AE234 } + .bg11 { background-color: #FCE94F } + .bg12 { background-color: #729FCF } + .bg13 { background-color: #AD7FA8 } + .bg14 { background-color: #34E2E2 } + .bg15 { background-color: #EEEEEC } + +/* rgb 256 colors */ + + .bg16 { background-color: #000000 } + .bg17 { background-color: #000033 } + .bg18 { background-color: #000066 } + .bg19 { background-color: #000099 } + .bg20 { background-color: #0000cc } + .bg21 { background-color: #0000ff } + .bg22 { background-color: #003300 } + .bg23 { background-color: #003333 } + .bg24 { background-color: #003366 } + .bg25 { background-color: #003399 } + .bg26 { background-color: #0033cc } + .bg27 { background-color: #0033ff } + .bg28 { background-color: #006600 } + .bg29 { background-color: #006633 } + .bg30 { background-color: #006666 } + .bg31 { background-color: #006699 } + .bg32 { background-color: #0066cc } + .bg33 { background-color: #0066ff } + .bg34 { background-color: #009900 } + .bg35 { background-color: #009933 } + .bg36 { background-color: #009966 } + .bg37 { background-color: #009999 } + .bg38 { background-color: #0099cc } + .bg39 { background-color: #0099ff } + .bg40 { background-color: #00cc00 } + .bg41 { background-color: #00cc33 } + .bg42 { background-color: #00cc66 } + .bg43 { background-color: #00cc99 } + .bg44 { background-color: #00cccc } + .bg45 { background-color: #00ccff } + .bg46 { background-color: #00ff00 } + .bg47 { background-color: #00ff33 } + .bg48 { background-color: #00ff66 } + .bg49 { background-color: #00ff99 } + .bg50 { background-color: #00ffcc } + .bg51 { background-color: #00ffff } + .bg52 { background-color: #330000 } + .bg53 { background-color: #330033 } + .bg54 { background-color: #330066 } + .bg55 { background-color: #330099 } + .bg56 { background-color: #3300cc } + .bg57 { background-color: #3300ff } + .bg58 { background-color: #333300 } + .bg59 { background-color: #333333 } + .bg60 { background-color: #333366 } + .bg61 { background-color: #333399 } + .bg62 { background-color: #3333cc } + .bg63 { background-color: #3333ff } + .bg64 { background-color: #336600 } + .bg65 { background-color: #336633 } + .bg66 { background-color: #336666 } + .bg67 { background-color: #336699 } + .bg68 { background-color: #3366cc } + .bg69 { background-color: #3366ff } + .bg70 { background-color: #339900 } + .bg71 { background-color: #339933 } + .bg72 { background-color: #339966 } + .bg73 { background-color: #339999 } + .bg74 { background-color: #3399cc } + .bg75 { background-color: #3399ff } + .bg76 { background-color: #33cc00 } + .bg77 { background-color: #33cc33 } + .bg78 { background-color: #33cc66 } + .bg79 { background-color: #33cc99 } + .bg80 { background-color: #33cccc } + .bg81 { background-color: #33ccff } + .bg82 { background-color: #33ff00 } + .bg83 { background-color: #33ff33 } + .bg84 { background-color: #33ff66 } + .bg85 { background-color: #33ff99 } + .bg86 { background-color: #33ffcc } + .bg87 { background-color: #33ffff } + .bg88 { background-color: #660000 } + .bg89 { background-color: #660033 } + .bg90 { background-color: #660066 } + .bg91 { background-color: #660099 } + .bg92 { background-color: #6600cc } + .bg93 { background-color: #6600ff } + .bg94 { background-color: #663300 } + .bg95 { background-color: #663333 } + .bg96 { background-color: #663366 } + .bg97 { background-color: #663399 } + .bg98 { background-color: #6633cc } + .bg99 { background-color: #6633ff } +.bg100 { background-color: #666600 } +.bg101 { background-color: #666633 } +.bg102 { background-color: #666666 } +.bg103 { background-color: #666699 } +.bg104 { background-color: #6666cc } +.bg105 { background-color: #6666ff } +.bg106 { background-color: #669900 } +.bg107 { background-color: #669933 } +.bg108 { background-color: #669966 } +.bg109 { background-color: #669999 } +.bg110 { background-color: #6699cc } +.bg111 { background-color: #6699ff } +.bg112 { background-color: #66cc00 } +.bg113 { background-color: #66cc33 } +.bg114 { background-color: #66cc66 } +.bg115 { background-color: #66cc99 } +.bg116 { background-color: #66cccc } +.bg117 { background-color: #66ccff } +.bg118 { background-color: #66ff00 } +.bg119 { background-color: #66ff33 } +.bg120 { background-color: #66ff66 } +.bg121 { background-color: #66ff99 } +.bg122 { background-color: #66ffcc } +.bg123 { background-color: #66ffff } +.bg124 { background-color: #990000 } +.bg125 { background-color: #990033 } +.bg126 { background-color: #990066 } +.bg127 { background-color: #990099 } +.bg128 { background-color: #9900cc } +.bg129 { background-color: #9900ff } +.bg130 { background-color: #993300 } +.bg131 { background-color: #993333 } +.bg132 { background-color: #993366 } +.bg133 { background-color: #993399 } +.bg134 { background-color: #9933cc } +.bg135 { background-color: #9933ff } +.bg136 { background-color: #996600 } +.bg137 { background-color: #996633 } +.bg138 { background-color: #996666 } +.bg139 { background-color: #996699 } +.bg140 { background-color: #9966cc } +.bg141 { background-color: #9966ff } +.bg142 { background-color: #999900 } +.bg143 { background-color: #999933 } +.bg144 { background-color: #999966 } +.bg145 { background-color: #999999 } +.bg146 { background-color: #9999cc } +.bg147 { background-color: #9999ff } +.bg148 { background-color: #99cc00 } +.bg149 { background-color: #99cc33 } +.bg150 { background-color: #99cc66 } +.bg151 { background-color: #99cc99 } +.bg152 { background-color: #99cccc } +.bg153 { background-color: #99ccff } +.bg154 { background-color: #99ff00 } +.bg155 { background-color: #99ff33 } +.bg156 { background-color: #99ff66 } +.bg157 { background-color: #99ff99 } +.bg158 { background-color: #99ffcc } +.bg159 { background-color: #99ffff } +.bg160 { background-color: #cc0000 } +.bg161 { background-color: #cc0033 } +.bg162 { background-color: #cc0066 } +.bg163 { background-color: #cc0099 } +.bg164 { background-color: #cc00cc } +.bg165 { background-color: #cc00ff } +.bg166 { background-color: #cc3300 } +.bg167 { background-color: #cc3333 } +.bg168 { background-color: #cc3366 } +.bg169 { background-color: #cc3399 } +.bg170 { background-color: #cc33cc } +.bg171 { background-color: #cc33ff } +.bg172 { background-color: #cc6600 } +.bg173 { background-color: #cc6633 } +.bg174 { background-color: #cc6666 } +.bg175 { background-color: #cc6699 } +.bg176 { background-color: #cc66cc } +.bg177 { background-color: #cc66ff } +.bg178 { background-color: #cc9900 } +.bg179 { background-color: #cc9933 } +.bg180 { background-color: #cc9966 } +.bg181 { background-color: #cc9999 } +.bg182 { background-color: #cc99cc } +.bg183 { background-color: #cc99ff } +.bg184 { background-color: #cccc00 } +.bg185 { background-color: #cccc33 } +.bg186 { background-color: #cccc66 } +.bg187 { background-color: #cccc99 } +.bg188 { background-color: #cccccc } +.bg189 { background-color: #ccccff } +.bg190 { background-color: #ccff00 } +.bg191 { background-color: #ccff33 } +.bg192 { background-color: #ccff66 } +.bg193 { background-color: #ccff99 } +.bg194 { background-color: #ccffcc } +.bg195 { background-color: #ccffff } +.bg196 { background-color: #ff0000 } +.bg197 { background-color: #ff0033 } +.bg198 { background-color: #ff0066 } +.bg199 { background-color: #ff0099 } +.bg200 { background-color: #ff00cc } +.bg201 { background-color: #ff00ff } +.bg202 { background-color: #ff3300 } +.bg203 { background-color: #ff3333 } +.bg204 { background-color: #ff3366 } +.bg205 { background-color: #ff3399 } +.bg206 { background-color: #ff33cc } +.bg207 { background-color: #ff33ff } +.bg208 { background-color: #ff6600 } +.bg209 { background-color: #ff6633 } +.bg210 { background-color: #ff6666 } +.bg211 { background-color: #ff6699 } +.bg212 { background-color: #ff66cc } +.bg213 { background-color: #ff66ff } +.bg214 { background-color: #ff9900 } +.bg215 { background-color: #ff9933 } +.bg216 { background-color: #ff9966 } +.bg217 { background-color: #ff9999 } +.bg218 { background-color: #ff99cc } +.bg219 { background-color: #ff99ff } +.bg220 { background-color: #ffcc00 } +.bg221 { background-color: #ffcc33 } +.bg222 { background-color: #ffcc66 } +.bg223 { background-color: #ffcc99 } +.bg224 { background-color: #ffcccc } +.bg225 { background-color: #ffccff } +.bg226 { background-color: #ffff00 } +.bg227 { background-color: #ffff33 } +.bg228 { background-color: #ffff66 } +.bg229 { background-color: #ffff99 } +.bg230 { background-color: #ffffcc } +.bg231 { background-color: #ffffff } .description { color: #666;