Add syntax to task page

app/app/templates/layout.html

@@ -46,14 +46,16 @@
     </div>
 {% endif %}
 
-<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
-        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
-        crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
-        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
-        crossorigin="anonymous"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
-        integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
-        crossorigin="anonymous"></script>
+{% block scripts %}
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+            crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
+            integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
+            crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
+            integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
+            crossorigin="anonymous"></script>
+{% endblock %}
 </body>
 </html>

app/app/templates/task.html

@@ -1,4 +1,9 @@
 {% extends "layout.html" %}
+{% block head %}
+    {{ super() }}
+    <link rel="stylesheet"
+          href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
+{% endblock %}
 {% block body %}
     <div class="jumbotron jumbotron-fluid mb-0">
         <div class="container">
@@ -31,7 +36,7 @@
     </div>
     <div class="container-fluid">
         {% if log %}
-            <div class="row log">
+            <div class="row">
                 <div class="col">
                     <div class="container">
                         <h1 class="display-4 mt-3 mb-3">Automation Log</h1>
@@ -41,14 +46,19 @@
             </div>
         {% endif %}
         {% if record %}
-            <div class="row rec">
+            <div class="row">
                 <div class="col">
                     <div class="container">
                         <h1 class="display-4 mt-3 mb-3">Automation HTTP Record</h1>
-                        <pre><code>{{ record }}</code></pre>
+                        <pre><code class="yml">{{ record }}</code></pre>
                     </div>
                 </div>
             </div>
         {% endif %}
     </div>
+{% endblock %}
+{% block scripts %}
+    {{ super() }}
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
+    <script>hljs.initHighlightingOnLoad();</script>
 {% endblock %}