Add Prism.js syntax highlighting for Elixir

.babelrc

@@ -3,5 +3,6 @@
     ["es2015", {"modules": false}],
     "es2016",
     "es2017"
-  ]
+  ],
+  "ignore": "node_modules"
 }

lib/mebe_engine/parser.ex

@@ -10,6 +10,10 @@ defmodule MebeEngine.Parser do
 
   @time_re ~R/(?<hours>\d\d):(?<minutes>\d\d)(?: (?<timezone>.*))?/
 
+  @earmark_opts %Earmark.Options{
+    code_class_prefix: "language-"
+  }
+
   def parse(pagedata, filename) do
     split_lines(pagedata)
     |> parse_raw(%PageData{filename: filename})
@@ -45,7 +49,7 @@ defmodule MebeEngine.Parser do
 
 
   def render_content(pagedata) do
-    %{pagedata | content: Earmark.as_html!(pagedata.content)}
+    %{pagedata | content: Earmark.as_html!(pagedata.content, @earmark_opts)}
   end
 
 

package.json

@@ -18,7 +18,10 @@
     "rollup": "~0.41.6",
     "rollup-plugin-sourcemaps": "~0.4.1",
     "rollup-watch": "~3.2.2",
-    "uglify-js": "~2.8.15",
+    "uglify-js": "~2.8.15"
+  },
+  "dependencies": {
+    "prismjs": "~1.6.0",
     "purecss": "~0.6.2"
   }
 }

web/static/css/app.scss

@@ -4,6 +4,9 @@
 @import '../../../node_modules/purecss/build/buttons';
 @import '../../../node_modules/purecss/build/menus';
 
+// Prism syntax highlighting
+@import '../../../node_modules/prismjs/themes/prism';
+
 $linkcolor: rgb(61, 146, 201);
 
 * {
@@ -225,10 +228,6 @@ pre {
   line-height: 120%;
 }
 
-pre, code {
-  background-color: #eee;
-}
-
 pre>code {
   white-space: pre-wrap;
 }

web/static/js/app.js

@@ -1,4 +1,5 @@
 import checkForLaineHash from './old_hash_redirector';
+import './syntaxhighlight';
 
 // Check hash even before site is loaded since it doesn't need to
 // wait for loading

web/static/js/syntaxhighlight.js

@@ -0,0 +1,3 @@
+// Import Prism's files for syntax highlighting Elixir
+import '../../../node_modules/prismjs/prism.js';
+import '../../../node_modules/prismjs/components/prism-elixir.js';