Highlight: As per PR comments - preview becomes static (back-end rendered), edit more dynamic. No hooks.

resources/edit.html

@@ -6,11 +6,11 @@
   <meta charset="UTF-8" />
   <meta content="width=device-width, initial-scale=1.0" name="viewport" />
   <link href="/style.css" rel="stylesheet" type="text/css" />
+  <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/default.min.css" rel="stylesheet" type="text/css" />
   <script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js" type="text/javascript"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-md5/1.0.1/js/md5.min.js" type="text/javascript"></script>
-  <script src="/js/events.js" type="text/javascript"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js" type="text/javascript"></script>
   <script src="/js/publishing.js" type="text/javascript"></script>
-  <script src="/js/highlight.js" type="text/javascript"></script>
   <base target="_blank">
 </head>
 

resources/public/js/events.js

@@ -1,62 +0,0 @@
-/**
- * Simple Event Bus
- *
- * Allows to easily hook into various page rendering / markdown parsing stages with custom modules
- *
- *
- * High Level API:
- *
- *   // Subscribe
- *   events.subscribe(eventName:String, eventHandler:Function)
- *
- *   // Publish
- *   events.publish(eventName:String, optionalArgument1, optionalArgument2, ..., optionalArgumentN);
- *
- *
- * Sample Usage:
- *
- *   event.subscribe('markdown:parsed', function () {
- *     console.log('Markdown Parsed');
- *   });
- *
- *   event.subscribe('markdown:parsed', function (title) {
- *     console.log('Markdown Parsed For Document: ' + title);
- *   });
- *
- *   events.publish('markdown:parsed', 'SampleDocument.md');
- *   // Markdown Parsed
- *   // Markdown Parsed For Document: SampleDocument.md
- *
- */
-(function (global) {
-
-  var eventBus = {
-    subscribers: [],
-  };
-
-  global.events = global.events || {
-
-    subscribe: function (eventName, eventHandler) {
-      // Initialize an array of event listeners if doesn't exist already
-      eventBus.subscribers[eventName] = eventBus.subscribers[eventName] || [];
-
-      eventBus.subscribers[eventName].push(eventHandler);
-    },
-
-    publish: function (eventName /*, arg1, arg2, ..., argN */) {
-      var eventArguments = [].slice.call(arguments, 1);
-
-      if (eventArguments.length) {
-        console.log('[Hooks] "%s" with args %O', eventName, eventArguments);
-      } else {
-        console.log('[Hooks] "%s"', eventName);
-      }
-
-      // Call event handlers with given attributes
-      (eventBus.subscribers[eventName] || []).forEach(function (eventHandler) {
-        eventHandler.apply(null, eventArguments);
-      });
-    },
-
-  };
-}(window));

resources/public/js/highlight.js

@@ -1,67 +0,0 @@
-// jscs:disable maximumLineLength
-
-/**
- * Highlight Module
- *
- *
- * High Level API:
- *
- *   api.init()
- *
- *
- * Hooks To:
- *
- *  'document:loaded' ~> highlight.init();
- *
- */
-(function (global) {
-
-  function loadInitialScriptsAndStyles() {
-    var link =
-      document.createElement('link');
-
-    var mainScript =
-      document.createElement('script');
-
-    link.rel =
-      'stylesheet';
-
-    link.href =
-      'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/zenburn.min.css';
-
-    mainScript.src =
-      'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js';
-
-    // On main script load, configure marked
-    mainScript.addEventListener('load', function () {
-      marked.setOptions({
-        langPrefix: 'hljs lang-',
-        highlight: function (code) {
-          return hljs.highlightAuto(code).value;
-        },
-      });
-
-    });
-
-    // Extend marked.js on edit page only
-    if ('marked' in global) {
-      document.body.appendChild(mainScript);
-    }
-
-    // Preview page requires scripts only
-    document.head.appendChild(link);
-  }
-
-  // High Level API
-  var api = {
-    init: function () {
-      loadInitialScriptsAndStyles();
-    },
-  };
-
-  // Hooks
-  if ('events' in global) {
-    events.subscribe('document:loaded', api.init);
-  }
-
-}(window));

resources/public/js/publishing.js

@@ -7,6 +7,15 @@ var timerDelay = iosDetected ? 800 : 400;
 var $note, $action, $preview, $plain_password, $tableau;
 var backendTimer;
 
+document.addEventListener('DOMContentLoaded', function () {
+  marked.setOptions({
+    langPrefix: 'hljs lang-',
+    highlight: function (code) {
+      return hljs.highlightAuto(code).value;
+    },
+  });
+});
+
 function md2html(input) {
   return marked(input);
 }
@@ -24,11 +33,6 @@ function enableButton() {
   button.disabled = !checkbox.checked;
 }
 
-document.addEventListener('DOMContentLoaded', function () {
-  // Hook point
-  events.publish('document:loaded');
-});
-
 function onLoad() {
   $note = $("note");
   $action = $("action").value;
@@ -42,9 +46,6 @@ function onLoad() {
     timer = setTimeout(function() {
       $preview.innerHTML = md2html(content);
       $tableau.innerHTML = content.split(/\s+/).length + " words";
-
-      // Hook point
-      events.publish('content:rendered');
     }, delay);
   };
   if ($action == "UPDATE") updatePreview();

resources/template.html

@@ -5,6 +5,7 @@
 	<meta charset="UTF-8" />
 	<meta content="width=device-width, initial-scale=1.0" name="viewport" />
 	<link href="/style.css" rel="stylesheet" type="text/css" />
+	<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/default.min.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
     %HEADER%
@@ -12,12 +13,5 @@
 		%CONTENT%
 	</article>
 	%FOOTER%
-
-	<script src="/js/events.js"></script>
-	<script src="/js/highlight.js"></script>
-	<script>
-	  events.publish('document:loaded');
-	</script>
-
 </body>
 </html>