Merge pull request #37 from maciejsmolinski/master

Hooks and Code Highlighting

package.json

@@ -25,6 +25,7 @@
   "dependencies": {
     "body-parser": "^1.15.0",
     "express": "^4.13.4",
+    "highlight.js": "^9.5.0",
     "lru-cache": "^4.0.0",
     "marked": "^0.3.5",
     "md5": "^2.1.0",

resources/edit.html

@@ -8,6 +8,7 @@
   <link href="/style.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="//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>
   <base target="_blank">
 </head>

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);
 }
@@ -21,7 +30,7 @@ function saveDraft() {
 function enableButton() {
   var checkbox = $('tos');
   var button = $('publish-button');
-  button.disabled = !checkbox.checked; 
+  button.disabled = !checkbox.checked;
 }
 
 function onLoad() {

resources/public/style.css

@@ -185,18 +185,6 @@ blockquote {
 	margin-bottom: 7em;
 }
 
-code, pre {
-	font-size: 1.05em;
-	background: #efefef;
-	font-family: monospace;
-}
-
-pre {
-	border: 1px solid #aaa;
-	padding: 0.5em;
-	border-radius: 3px;
-}
-
 *:focus {
 	outline: 0px none transparent;
 }
@@ -222,7 +210,7 @@ td {
 	padding: 0.5em;
 }
 
-/* MEDIA QUERIES */ 
+/* MEDIA QUERIES */
 
 @media screen and (min-width: 1024px) {
 	article, .central-element {
@@ -308,4 +296,92 @@ fieldset {
 
 #plain-password {
 	width: 10em;
-}
+}
+
+/* SYNTAX HIGHLIGHTING */
+
+/* Theme: default, source: http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/default.min.css */
+.hljs {
+	display:block;
+	overflow-x:auto;
+	padding:0.5em;
+	background:#F0F0F0
+}
+.hljs,
+.hljs-subst {
+	color:#444
+}
+.hljs-comment {
+	color:#888888
+}
+.hljs-keyword,
+.hljs-attribute,
+.hljs-selector-tag,
+.hljs-meta-keyword,
+.hljs-doctag,
+.hljs-name {
+	font-weight:bold
+}
+.hljs-type,
+.hljs-string,
+.hljs-number,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-quote,
+.hljs-template-tag,
+.hljs-deletion {
+	color:#880000
+}
+.hljs-title,
+.hljs-section {
+	color:#880000;
+	font-weight:bold
+}
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+	color:#BC6060
+}
+.hljs-literal {
+	color:#78A960
+}
+.hljs-built_in,
+.hljs-bullet,
+.hljs-code,
+.hljs-addition {
+	color:#397300
+}
+.hljs-meta {
+	color:#1f7199
+}
+.hljs-meta-string {
+	color:#4d99bf
+}
+.hljs-emphasis {
+	font-style:italic
+}
+.hljs-strong {
+	font-weight:bold
+}
+
+
+pre, code, code.hljs {
+	font-family: monospace;
+	border-radius: 3px;
+	background: #f0f0f0;
+	font-size: 1.05em;
+}
+
+/* Don't increase the size of code in pre tag, pre tag already did it.
+   Otherwise code size would be even bigger (1.05em * 1.05em = 1.1025em) */
+pre code {
+	font-size: 1em;
+}
+
+code.hljs {
+	padding: 1em;
+}

src/view.js

@@ -1,5 +1,6 @@
 var marked = require("marked");
 var fs = require("fs");
+var hljs = require("highlight.js");
 
 var TOS = fs.readFileSync("resources/TOS.md", "utf-8");
 var pageTemplate = fs.readFileSync("resources/template.html", "utf-8");
@@ -17,7 +18,12 @@ var renderPage = (id, title, content, footer, blackList) => pageTemplate
   .replace("%TITLE%", title)
   .replace("%CONTENT%", content.replace(/<meta.*?>/gi, "").replace(/<script[\s\S.]*?\/script>/gi, ""))
   .replace("%FOOTER%", footer || "");
-  
+
+marked.setOptions({
+  langPrefix: "hljs lang-",
+  highlight: code => hljs.highlightAuto(code).value,
+});
+
 module.exports.renderPage = renderPage;
 
 module.exports.renderStats = note => renderPage(note.id, deriveTitle(note.text),