Add syntax highlighting (#26)

* feat: Add syntax highlighting * refact: Replace syntax highlighter to highlight.js * fix: Use a custom highlight.js pack and add theme * Adjust style of pre * chore: Change highlight.js theme to monokai-sublime
crystal-community · Aug 8, 2017 · 40c8c8f · 40c8c8f
1 parent 27f7feb
commit 40c8c8f
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 2 deletions.
diff --git a/public/javascripts/highlight.pack.js b/public/javascripts/highlight.pack.js
diff --git a/public/javascripts/main.js b/public/javascripts/main.js
@@ -1,6 +1,7 @@
 document.addEventListener("DOMContentLoaded", (event) => {
   toggleSecondary();
   signoutListener();
+  runPrettify();
 });
 
 function toggleSecondary() {
@@ -39,3 +40,7 @@ function signoutListener() {
     });
   }
 }
+
+function runPrettify() {
+  hljs.initHighlightingOnLoad();
+}
diff --git a/public/stylesheets/main.css b/public/stylesheets/main.css
@@ -291,9 +291,8 @@ pre {
 	margin-bottom: 1.6em;
 	max-width: 100%;
 	overflow: auto;
-	padding: 0.8em;
+	padding: 0.25em;
 	white-space: pre;
-	white-space: pre-wrap;
 	word-wrap: break-word;
 }
 

diff --git a/public/stylesheets/monokai-sublime.min.css b/public/stylesheets/monokai-sublime.min.css
diff --git a/src/views/layouts/application.slang b/src/views/layouts/application.slang
@@ -7,6 +7,7 @@ html
     meta name="viewport" content="width=device-width, initial-scale=1.0"
 
     link rel="stylesheet" href="/stylesheets/main.css"
+    link rel="stylesheet" href="/stylesheets/monokai-sublime.min.css"
     link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
 
   body.home
@@ -35,5 +36,6 @@ html
         == render_template "layouts/_footer.slang"
 
     script src="/javascripts/main.js"
+    script src="/javascripts/highlight.pack.js"
 
     == render_template "layouts/_ga.slang"