Added static from mathics.

.gitignore

@@ -0,0 +1,6 @@
+build/*
+bin/*
+dist/*
+mathicsnotebook.egg-info/*
+*.pyc
+tests/.ipynb_checkpoints/*

mathicsnotebook/kernel.py

@@ -18,12 +18,56 @@ class MathicsNotebookKernel(Kernel):
     }
 
     name = 'MathicsNotebook'
-
+
+    """
+    Clear mathics output.
+    """
+    def clear_output(self, data):
+        data = re.sub(r"<math><mglyph width=\"(.*)\" height=\"(.*)\" src=\"(.*)\"/></math>", "<img width=\"\\1\" height=\"\\2\" src=\"\\3\" />", data, 0)
+        return data
+
+    def initialize_javascript_if_needed(self):
+        if self.execution_count == 1:
+            inject_javascript_code = """
+<script type="text/javascript">
+            function loadScript(url, callback){
+
+    var script = document.createElement("script")
+    script.type = "text/javascript";
+
+    if (script.readyState){  //IE
+        script.onreadystatechange = function(){
+            if (script.readyState == "loaded" ||
+                    script.readyState == "complete"){
+                script.onreadystatechange = null;
+                callback();
+            }
+        };
+    } else {  //Others
+        script.onload = function(){
+            callback();
+        };
+    }
+
+    script.src = url;
+    document.getElementsByTagName("head")[0].appendChild(script);
+}
+</script>
+            """
+
+            display_data = {
+                'data' : {'text/html' : inject_javascript_code},
+                'metadata' : {},
+            }
+
+            self.send_response(self.iopub_socket, 'display_data', display_data)
     """
     Handle jupyter connections.
     """
     def do_execute(self, code, silent, store_history=True,
                    user_expressions=None, allow_stdin=False):
+        self.initialize_javascript_if_needed()
+
         if not silent:
             from mathics.core.parser import MultiLineFeeder
 
@@ -46,21 +90,22 @@ def do_execute(self, code, silent, store_history=True,
                 raise
 
             for result in results:
-
-                html = result.get_data()['result']
-                html = re.sub(r"<math><mglyph width=\"(.*)\" height=\"(.*)\" src=\"(.*)\"/></math>", "<img width=\"\\1\" height=\"\\2\" src=\"\\3\" />", html, 0)
+                result_data = result.get_data()
+
+                result_html = self.clear_output(result_data['result'])
 
                 display_data = {
-                    'data' : {'text/html' : html},
+                    'data' : {'text/html' : result_html},
                     'metadata' : {},
                 }
 
                 self.send_response(self.iopub_socket, 'display_data', display_data)
 
-        return {'status': 'ok',
-                'execution_count': self.execution_count,
-                'payload': [],
-                'user_expressions': {},
+        return {
+            'status': 'ok',
+            'execution_count': self.execution_count,
+            'payload': [],
+            'user_expressions': {},
         }
 
 if __name__ == '__main__':

tests/Untitled.ipynb

@@ -2,9 +2,18 @@
  "cells": [
   {
    "cell_type": "code",
-   "execution_count": 1,
+   "execution_count": 2,
    "metadata": {},
    "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<script>console.log(\"hola mundo 2\");</script>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
     {
      "data": {
       "text/html": [
@@ -21,11 +30,24 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 2,
+   "execution_count": 3,
    "metadata": {},
    "outputs": [
     {
-     "data": {},
+     "data": {
+      "text/html": [
+       "<script>console.log(\"hola mundo 3\");</script>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
+    {
+     "data": {
+      "text/html": [
+       "<math><mn>124</mn></math>"
+      ]
+     },
      "metadata": {},
      "output_type": "display_data"
     }

web/media/css/documentation.css

@@ -0,0 +1,112 @@
+#docContent h1,
+#docContent h2 {
+	margin-top: 0.2em;
+	margin-bottom: 0.5em;
+	font-family: sans-serif;
+}
+
+#docContent #navigation {
+  list-style-type: none;
+  float: right;
+  margin: 0 0 1em;
+}
+#docContent #navigation span {
+  font-family: Arial, sans-serif;
+}
+
+a img {
+  border: none;
+}
+
+@media print {
+  #docContent #navigation {
+    display: none;
+  }
+
+  #breadcrumbs {
+    display: none;
+  }
+}
+
+#docContent h1 {
+}
+
+#docContent h2 {
+	margin-top: 0.5em;
+	font-size: 1.1em;
+}
+
+#docContent p {
+	margin-top: 1em;
+	margin-bottom: 0.2em;
+}
+
+#docContent a {
+	text-decoration: none;
+	color: #00f;
+}
+
+#docContent a:hover {
+	color: #33f;
+}
+
+#docContent dl {
+	border-top: 1px solid #ccc;
+	border-bottom: 1px solid #ccc;
+	padding: 0.2em 0.5em;
+  background-color: rgb(96%, 96%, 94%);
+}
+
+#docContent dl dt {
+	margin-top: 0.2em;
+}
+
+#docContent ul {
+	list-style-type: circle;
+	margin-top: 1em;
+  margin-bottom: 0;
+  margin-left: 0;
+}
+
+#docContent ul.tests {
+	padding: 0;
+	list-style-type: none;
+	margin: 0;
+}
+
+#docContent div.test {
+	position: relative;
+	padding-left: 10px;
+}
+
+#docContent span.move {
+	cursor: default;
+	left: 0;
+}
+#docContent span.move:hover {
+	background-color: white;
+	width: 3px;
+}
+
+#docContent ul.test {
+	padding: 0;
+	list-style-type: none;
+	margin-top: 5px;
+}
+
+#docContent ul.test li.test {
+	color: navy;
+}
+
+#docContent .console {
+  font-family: monospace;
+}
+
+#docContent div.console {
+  margin: 0.5em 1em 0.5em;
+}
+
+#docContent pre {
+  margin: 0;
+  padding: 0;
+}

web/media/css/message.css

@@ -0,0 +1,51 @@
+div.dark {
+	z-index: 1;
+	position: absolute;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	overflow: hidden;
+	text-align: center;
+}
+
+div.popupContainer,
+div.popupFrameContainer {
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	text-align: center;
+}
+
+div.popupContainer {
+	z-index: 10;
+}
+
+div.popupFrameContainer {
+	z-index: 2;
+}
+
+div.popup,
+iframe.popupFrame {
+	width: 400px;
+	min-height: 60px;
+	margin-top: 100px;
+	padding: 16px;
+	margin-left: auto;
+	margin-right: auto;
+  background-color: white;
+  border: 1px solid #cccecb;
+  box-shadow: 0px 1px 1px 0px #cccecb;
+  border-radius: 3px;
+}
+
+iframe.popupFrame {
+	padding: 0;
+	border: none;
+	background-color: white;
+	z-index: 0;
+}