Better syntax highlighting in tutorial.

Author: amirrajan

tutorial.css

@@ -27,7 +27,7 @@ body {
     width: 480px;
     background-color: rgb(40, 44, 52);
     font-family: 'firacode';
-    font-size: 16px;
+    font-size: 14px;
     color: #ffffff;
     line-height: 1.2em;
 }
@@ -90,13 +90,13 @@ pre code {
     padding: 0.5em;
     background-color: rgb(50, 54, 62) !important;
     color: rgb(50, 54, 62);
-    font-size: 16px;
+    font-size: 14px;
 }
 
 .hljs {
     background-color: rgb(50, 54, 62) !important;
     color: rgb(252, 253, 252) !important;
-    font-size: 16px;
+    font-size: 14px;
 }
 
 .hljs-keyword {
@@ -107,6 +107,29 @@ pre code {
     color: rgb(250, 220, 100) !important;
 }
 
+.hljs-string {
+    color: rgb(255, 100, 100) !important;
+}
+
 .hljs-number {
     color: rgb(255, 100, 100) !important;
 }
+
+.hljs-drgtk {
+    color: rgb(220, 220, 220) !important;
+    font-weight: 900;
+}
+
+.hljs-comment {
+    color :rgb(180, 255, 200) !important;
+}
+
+a {
+    background-color: rgb(50, 180, 180);
+    padding-left: 5px;
+    padding-right: 5px;
+    border-radius: 5px;
+    font-weight: 900;
+    color: #151515;
+}
+a:visited { color: #151515; }

tutorial.js

@@ -1,6 +1,10 @@
 var styleElement = document.createElement('style');
 document.getElementsByTagName("head")[0].appendChild(styleElement);
 
+document.addEventListener('load', () => {
+  hljs.getLanguage('ruby').keywords += ' args tick ';
+})
+
 document.addEventListener("animationstart", e => {
   if (e.animationName == "node-ready") {
     var code = e.target.innerHTML.replace(/^\n/, "");
@@ -12,6 +16,12 @@ document.addEventListener("animationstart", e => {
       code = code.split('\n').map(l => l.replace(new RegExp('^' + whiteSpace + ''), '')).join('\n');
     }
 
+    code = code.replace(/args\.outputs\.sprites/g, '<span class="hljs-drgtk">args.outputs.sprites</span>')
+    code = code.replace(/args\.outputs\.labels/g, '<span class="hljs-drgtk">args.outputs.labels</span>')
+    code = code.replace(/args\.state\.tick_count/g, '<span class="hljs-drgtk">args.state.</span><span class="hljs-drgtk">tick_count</span>')
+    code = code.replace(/args\.state\./g, '<span class="hljs-drgtk">args.state</span>.')
+    code = code.replace(/args\.inputs\.keyboard/g, '<span class="hljs-drgtk">args.inputs.keyboard</span>')
+
     e.target.innerHTML = code;
     hljs.highlightBlock(e.target);
     e.target.classList.add("fade-in");