dynamic css loading

markdown-preview-mode.el

@@ -37,6 +37,7 @@
 (defvar mdpm:local-client nil)
 (defvar mdpm:remote-clients nil)
 (defvar mdpm:preview-url (concat (file-name-directory load-file-name) "preview.html"))
+(defvar mdpm:style "http://thomasf.github.io/solarized-css/solarized-dark.min.css")
 
 (defun mdpm:open-browser-preview ()
   (browse-url mdpm:preview-url))
@@ -85,9 +86,20 @@
   (mdpm:sent-preview-to mdpm:local-client))
 
 (defun mdpm:sent-preview-to (websocket)
-  (markdown markdown-output-buffer-name)
+  (when markdown-preview-mode
+    (markdown markdown-output-buffer-name))
   (with-current-buffer (get-buffer markdown-output-buffer-name)
-    (websocket-send-text websocket (buffer-substring-no-properties (point-min) (point-max)))))
+    (websocket-send-text websocket
+                         (concat
+                          "<div>"
+                          "<span id='style'>"
+                          mdpm:style
+                          "</span>"
+                          "<div id='content'>"
+                          (buffer-substring-no-properties (point-min) (point-max))
+                          "</div>"
+                          "</div>")
+                         )))
 
 (defun mdpm:start ()
   (mdpm:start-websocket-server)

preview.html

@@ -21,11 +21,18 @@
              console.log('Code: ' + event.code + ' reason: ' + event.reason);
          };
          socket.onmessage = function(event) {
-             $("#markdown-body").html(event.data);
+             loadCSS($(event.data).find("#style").text());
+             $("#markdown-body").html($(event.data).find("#content").html());
          };
          socket.onerror = function(error) {
              alert("Error: " + error.message);
          };
+
+         loadCSS = function(href) {
+             var cssLink = $("<link rel='stylesheet' type='text/css' href='"+href+"'>");
+             $("link[type='text/css']").remove();
+             $("head").append(cssLink);
+         };
      })(jQuery);
     </script>
   </head>