Client javascript support: fixes #18

Fix issue #15

.gitignore

@@ -3,3 +3,5 @@
 
 # Packaging
 .cask
+
+.markdown-preview.html

README.md

@@ -1,6 +1,7 @@
 Markdown preview mode
 ===========================
 
+
 [![MELPA Stable](http://stable.melpa.org/packages/markdown-preview-mode-badge.svg)](http://stable.melpa.org/#/markdown-preview-mode)
 [![MELPA](http://melpa.org/packages/markdown-preview-mode-badge.svg)](http://melpa.org/#/markdown-preview-mode)
 
@@ -34,6 +35,19 @@ Select your browser from `Value menu`. If it's not there, follow [EmacsWiki: Bro
 In order to change preview styling, run `M-x customize-option` -> `markdown-preview-style`
 and specify a URL to your favourite markdown css file.
 
+## Client javascript
+
+If you'd like to include additional javascript for the preview, add this to your init:
+
+```lisp
+(add-to-list 'markdown-preview-javascript "http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML")
+```
+or, to make it async:
+
+```lisp
+(add-to-list 'markdown-preview-javascript '("http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML" . async))
+```
+
 ## Websocket port
 
 Adjustable by `M-x customize-option` -> `markdown-preview-port`.

markdown-preview-mode.el

@@ -5,7 +5,7 @@
 ;; Author: Igor Shymko <igor.shimko@gmail.com>
 ;; URL: https://github.com/ancane/markdown-preview-mode
 ;; Keywords: markdown, preview
-;; Version: 0.4
+;; Version: 0.7
 ;; Package-Requires: ((websocket "1.6") (markdown-mode "2.1") (cl-lib "0.5"))
 
 ;; This file is not part of GNU Emacs.
@@ -40,6 +40,11 @@
   :prefix "markdown-preview-"
   :link '(url-link "https://github.com/ancane/markdown-preview-mode"))
 
+(defcustom markdown-preview-host "localhost"
+  "Markdown preview websocket server address."
+  :group 'markdown-preview
+  :type 'string)
+
 (defcustom markdown-preview-port 7379
   "Markdown preview websocket server port."
   :group 'markdown-preview
@@ -51,6 +56,14 @@
   :group 'markdown-preview
   :type 'string)
 
+(defcustom markdown-preview-file-name ".markdown-preview.html"
+  "Markdown preview file name."
+  :group 'markdown-preview
+  :type 'string)
+
+(defvar markdown-preview-javascript (list "http://code.jquery.com/jquery-1.11.0.min.js")
+  "List of javascript libs for preview.")
+
 (defvar markdown-preview--websocket-server nil
   "`markdown-preview' Websocket server.")
 
@@ -60,9 +73,9 @@
 (defvar markdown-preview--remote-clients nil
   "List of `markdown-preview' websocket remote clients.")
 
-(defvar markdown-preview--preview-url
+(defvar markdown-preview--preview-template
   (concat (file-name-directory load-file-name) "preview.html")
-  "Location of `markdown-preview' html.")
+  "Location of `markdown-preview' html template file.")
 
 (defvar markdown-preview--idle-timer nil
   "Preview idle timer.")
@@ -74,7 +87,25 @@
 
 (defun markdown-preview--open-browser-preview ()
   "Open the markdown preview in the browser."
-  (browse-url markdown-preview--preview-url))
+  (let* ((dir-of-buffer-to-preview (file-name-directory (buffer-file-name)))
+         (preview-file (concat dir-of-buffer-to-preview markdown-preview-file-name)))
+    (with-temp-file preview-file
+      (insert-file-contents markdown-preview--preview-template)
+      (if (search-forward "${MD_STYLE}" nil t)
+	  (replace-match markdown-preview-style t))
+      (if (search-forward "${MD_JS}" nil t)
+	  (replace-match
+	   (mapconcat (lambda (x)
+			(concat "<script src=\"" (if (consp x) (car x) x) "\"" (if (consp x) (format " %s" (cdr x))) "></script>" ))
+		      markdown-preview-javascript
+		      "\n")
+	   t))
+      (if (search-forward "${WS_HOST}" nil t)
+	  (replace-match markdown-preview-host t))
+      (if (search-forward "${WS_PORT}" nil t)
+	  (replace-match (format "%s" markdown-preview-port) t))
+      (buffer-string))
+    (browse-url preview-file)))
 
 (defun markdown-preview--stop-websocket-server ()
   "Stop the `markdown-preview' websocket server."
@@ -96,6 +127,7 @@
     (setq markdown-preview--websocket-server
           (websocket-server
            markdown-preview-port
+           :host markdown-preview-host
            :on-message (lambda (websocket frame)
                          (mapc (lambda (ws) (websocket-send ws frame))
                                markdown-preview--remote-clients))
@@ -137,9 +169,6 @@
       (websocket-send-text websocket
                            (concat
                             "<div>"
-                            "<span id='style'>"
-                            markdown-preview-style
-                            "</span>"
                             "<span id='position-percentage'>"
                             mark-position-percent
                             "</span>"
@@ -160,7 +189,10 @@
 (defun markdown-preview--stop ()
   "Stop `markdown-preview' mode."
   (remove-hook 'after-save-hook 'markdown-preview--send-preview t)
-  (markdown-preview--stop-idle-timer))
+  (markdown-preview--stop-idle-timer)
+  (let ((preview-file (concat (file-name-directory (buffer-file-name)) markdown-preview-file-name)))
+    (if (file-exists-p preview-file)
+        (delete-file preview-file))))
 
 ;;;###autoload
 (defun markdown-preview-open-browser ()

preview.html

@@ -4,16 +4,16 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
     <title>Markdown preview</title>
-    <link href="http://thomasf.github.io/solarized-css/solarized-dark.min.css" rel="stylesheet"></link>
+    <link href="${MD_STYLE}" rel="stylesheet"></link>
     <style>
      code.json {
          line-height: 1.2em;
      }
     </style>
-    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
+    ${MD_JS}
     <script>
      (function($, undefined) {
-         var socket = new WebSocket("ws://localhost:7379");
+         var socket = new WebSocket("ws://${WS_HOST}:${WS_PORT}");
          socket.onopen = function() {
              console.log("Connection established.");
          };
@@ -26,7 +26,6 @@
              console.log('Code: ' + event.code + ' reason: ' + event.reason);
          };
          socket.onmessage = function(event) {
-             loadCSS($(event.data).find("#style").text());
              $("#markdown-body").html($(event.data).find("#content").html());
              var scroll = $(document).height() * ($(event.data).find("#position-percentage").html() / 100);
              $("html, body").animate({ scrollTop: scroll }, 600);
@@ -34,17 +33,11 @@
          socket.onerror = function(error) {
              alert("Error: " + error.message);
          };
-
-         loadCSS = function(href) {
-             var cssLink = $("<link rel='stylesheet' type='text/css' href='"+href+"'>");
-             $("link[rel='stylesheet']").remove();
-             $("head").append(cssLink);
-         };
      })(jQuery);
     </script>
   </head>
   <body>
-    <article id="markdown-body">
+    <article id="markdown-body" class="markdown-body">
       <p>Markdown preview</p>
     </article>
   </body>