add a default style option.

example/index.html

@@ -10,6 +10,7 @@
     font: 20px/1.5 sans-serif;
   }
 
+/*
   .terminal {
     float: left;
     border: #000 solid 5px;
@@ -23,6 +24,7 @@
     color: #000;
     background: #f0f0f0;
   }
+*/
 </style>
 <h1>term.js</h1>
 <script src="/socket.io/socket.io.js"></script>
@@ -34,7 +36,8 @@
     socket.on('connect', function() {
       var term = new Terminal({
         cols: 80,
-        rows: 24
+        rows: 24,
+        style: true
       });
 
       term.on('data', function(data) {

lib/term.js

@@ -146,7 +146,7 @@ function Terminal(options) {
     };
   }
 
-  this._options = options || {};
+  this.options = options || {};
 
   // this.context = options.context || window;
   // this.document = options.document || document;
@@ -402,19 +402,31 @@ Terminal.prototype.blur = function() {
   Terminal.focus = null;
 };
 
+/**
+ * Initialize global behavior
+ */
+
+Terminal.prototype.initGlobal = function() {
+  var document = this.document;
+
+  Terminal._boundDocs = Terminal._boundDocs || [];
+  if (~indexOf(Terminal._boundDocs, document)) {
+    return;
+  }
+  Terminal._boundDocs.push(document);
+
+  Terminal.bindKeys(document);
+
+  if (this.options.style) {
+    Terminal.insertStyle(document);
+  }
+};
+
 /**
  * Global Events for key handling
  */
 
 Terminal.bindKeys = function(document) {
-  Terminal._boundDocs = Terminal._boundDocs || [];
-
-  if (~indexOf(Terminal._boundDocs, document)) {
-    return;
-  }
-
-  Terminal._boundDocs.push(document);
-
   // We could put an "if (Terminal.focus)" check
   // here, but it shouldn't be necessary.
   on(document, 'keydown', function(ev) {
@@ -461,6 +473,39 @@ Terminal.bindKeys = function(document) {
   });
 };
 
+/**
+ * Insert a default style
+ */
+
+Terminal.insertStyle = function(document) {
+  var style = document.getElementById('termjs-style');
+  if (style) return;
+
+  var head = document.getElementsByTagName('head')[0];
+  if (!head) return;
+
+  var style = document.createElement('style');
+  style.id = 'termjs-style';
+
+  // textContent doesn't work well with IE for <style> elements.
+  style.innerHTML = ''
+    + '.terminal {\n'
+    + '  float: left;\n'
+    + '  border: ' + Terminal.defaultColors.bg + ' solid 5px;\n'
+    + '  font-family: "DejaVu Sans Mono", "Liberation Mono", monospace;\n'
+    + '  font-size: 11px;\n'
+    + '  color: ' + Terminal.defaultColors.fg + ';\n'
+    + '  background: ' + Terminal.defaultColors.bg + ';\n'
+    + '}\n'
+    + '\n'
+    + '.terminal-cursor {\n'
+    + '  color: ' + Terminal.defaultColors.bg + ';\n'
+    + '  background: ' + Terminal.defaultColors.fg + ';\n'
+    + '}\n';
+
+  head.insertBefore(style, head.firstChild);
+};
+
 /**
  * Open Terminal
  */
@@ -496,7 +541,7 @@ Terminal.prototype.open = function(parent) {
 
   this.refresh(0, this.rows - 1);
 
-  Terminal.bindKeys(this.document);
+  this.initGlobal();
 
   this.focus();
 
@@ -550,7 +595,8 @@ Terminal.prototype.open = function(parent) {
 
   this.bindMouse();
 
-  // XXX - hack, move this somewhere else.
+  // Figure out whether boldness affects
+  // the character width of monospace fonts.
   if (Terminal.brokenBold == null) {
     Terminal.brokenBold = isBoldBroken(this.document);
   }

test/index.html

@@ -5,20 +5,6 @@
     margin-bottom: 20px;
     font: 20px/1.5 sans-serif;
   }
-
-  .terminal {
-    float: left;
-    border: #000 solid 5px;
-    font-family: "DejaVu Sans Mono", "Liberation Mono", monospace;
-    font-size: 11px;
-    color: #f0f0f0;
-    background: #000;
-  }
-
-  .terminal-cursor {
-    color: #000;
-    background: #f0f0f0;
-  }
 </style>
 <h1>term.js test</h1>
 <script src="term.js"></script>
@@ -33,7 +19,8 @@
 
   var term = new Terminal({
     cols: 80,
-    rows: 30
+    rows: 30,
+    style: true
   });
 
   window.onload = function() {