diff --git a/canvas.html b/canvas.html
index a4c02dc..f527b5e 100644
--- a/canvas.html
+++ b/canvas.html
@@ -4,9 +4,17 @@
     <meta charset="UTF-8">
     <title>Title</title>
     <script type="text/javascript" src="./static/js/terminal/index.js"></script>
+    <style type="text/css">
+      #term {
+        color: #fff;
+        background-color: #181818;
+        font: 13px/1.5 Consolas, sans-serif;
+      }
+    </style>
   </head>
   <body>
     <canvas id="canvas" width="300" height="200"></canvas>
+    <div id="term"></div>
     <script>
       // var font = '13px Consolas';
       var font = '13px 微软雅黑';
@@ -94,7 +102,12 @@
       ].forEach(function (line){ xterm.write(line + '\r\n'); });
 
       xterm.write('\033[41;32m红底绿字\033[0m');
-      console.log(xterm.toString('html'));
+
+      var html = xterm.toString('html');
+
+      console.log(html);
+
+      document.getElementById('term').innerHTML = html;
     </script>
   </body>
 </html>
\ No newline at end of file
diff --git a/static/js/terminal/index.js b/static/js/terminal/index.js
index c0338b5..24ab100 100644
--- a/static/js/terminal/index.js
+++ b/static/js/terminal/index.js
@@ -1030,6 +1030,7 @@ AnsiTerminal.prototype.toString = function (type){
   var rows = this.screen.buffer.length;
 
   if (type === 'html') {
+    var style = '';
     var styleBuffer;
     var attrCache;
     var stylesBuffer = this.stylesBuffer || [];
@@ -1053,15 +1054,39 @@ AnsiTerminal.prototype.toString = function (type){
         }
 
         if (j === 0) {
-          s += '<span>';
+          style = '';
           attrCache = node.attr;
+
+          if (styleBuffer.foreground) {
+            style += 'color:' + styleBuffer.foreground + ';';
+          }
+
+          if (styleBuffer.background) {
+            style += 'background-color:' + styleBuffer.background + ';';
+          }
+
+          if (styleBuffer.bold) {
+            style += 'font-weight:bold;';
+          }
+
+          if (styleBuffer.italic) {
+            style += 'font-style: italic;';
+          }
+
+          if (styleBuffer.underline) {
+            style += 'text-decoration: underline;';
+          }
+
+          s += '<span' + (style ? ' style="' + style + '"' : '') + '>';
         } else if (j === cols - 1) {
           s += '</span>';
         }
 
         if (node.value) {
           if (node.attr !== attrCache) {
-            s += '</span><span>';
+            s += '</span><span' + (style ? ' style="' + style + '"' : '') + '>';
+
+            style = '';
             attrCache = node.attr;
           }
 
@@ -2687,10 +2712,7 @@ function styles(node){
   var background = attributes.background;
   var styles = { wide: node.width === 2 };
 
-  [
-    'bold', 'italic', 'underline',
-    'blink', 'inverse', 'conceal'
-  ].forEach(function (key){
+  ['bold', 'italic', 'underline', 'blink', 'conceal'].forEach(function (key){
     styles[key] = attributes[key];
   });
 
