Search results are now code blocks. Used pygments to parse a block of code into html, and used html styles to highlight the text.

static/js/index.js

@@ -8,6 +8,8 @@ searchBar = $("form#search-bar input[type='text']")[0];
 resultsDiv = $("div#results")[0];
 
 var typingTimer, lastValue;
+//Obtained by parsing python file with pygments
+var codeExample = '<div class="hll"><pre><span class="sd">&quot;&quot;&quot;</span>\n<span class="sd">Module to contain all the project&#39;s Flask server plumbing.</span>\n<span class="sd">&quot;&quot;&quot;</span>\n\n<span class="kn">from</span> <span class="nn">flask</span> <span class="kn">import</span> <span class="n">Flask</span>\n<span class="kn">from</span> <span class="nn">flask</span> <span class="kn">import</span> <span class="n">render_template</span><span class="p">,</span> <span class="n">session</span>\n\n<span class="kn">from</span> <span class="nn">bitshift</span> <span class="kn">import</span> <span class="n">assets</span>\n<span class="c"># from bitshift.database import Database</span>\n<span class="c"># from bitshift.query import parse_query</span>\n\n<span class="n">app</span> <span class="o">=</span> <span class="n">Flask</span><span class="p">(</span><span class="n">__name__</span><span class="p">)</span>\n<span class="n">app</span><span class="o">.</span><span class="n">config</span><span class="o">.</span><span class="n">from_object</span><span class="p">(</span><span class="s">&quot;bitshift.config&quot;</span><span class="p">)</span>\n\n<span class="n">app_env</span> <span class="o">=</span> <span class="n">app</span><span class="o">.</span><span class="n">jinja_env</span>\n<span class="n">app_env</span><span class="o">.</span><span class="n">line_statement_prefix</span> <span class="o">=</span> <span class="s">&quot;=&quot;</span>\n<span class="n">app_env</span><span class="o">.</span><span class="n">globals</span><span class="o">.</span><span class="n">update</span><span class="p">(</span><span class="n">assets</span><span class="o">=</span><span class="n">assets</span><span class="p">)</span>\n\n<span class="c"># database = Database()</span>\n\n<span class="nd">@app.route</span><span class="p">(</span><span class="s">&quot;/&quot;</span><span class="p">)</span>\n<span class="k">def</span> <span class="nf">index</span><span class="p">():</span>\n    <span class="k">return</span> <span class="n">render_template</span><span class="p">(</span><span class="s">&quot;index.html&quot;</span><span class="p">)</span>\n\n<span class="nd">@app.route</span><span class="p">(</span><span class="s">&quot;/search/&lt;query&gt;&quot;</span><span class="p">)</span>\n<span class="k">def</span> <span class="nf">search</span><span class="p">(</span><span class="n">query</span><span class="p">):</span>\n    <span class="c"># tree = parse_query(query)</span>\n    <span class="c"># database.search(tree)</span>\n    <span class="k">pass</span>\n\n<span class="nd">@app.route</span><span class="p">(</span><span class="s">&quot;/about&quot;</span><span class="p">)</span>\n<span class="k">def</span> <span class="nf">about</span><span class="p">():</span>\n    <span class="k">return</span> <span class="n">render_template</span><span class="p">(</span><span class="s">&quot;about.html&quot;</span><span class="p">)</span>\n\n<span class="nd">@app.route</span><span class="p">(</span><span class="s">&quot;/developers&quot;</span><span class="p">)</span>\n<span class="k">def</span> <span class="nf">developers</span><span class="p">():</span>\n    <span class="k">return</span> <span class="n">render_template</span><span class="p">(</span><span class="s">&quot;developers.html&quot;</span><span class="p">)</span>\n\n<span class="k">if</span> <span class="n">__name__</span> <span class="o">==</span> <span class="s">&quot;__main__&quot;</span><span class="p">:</span>\n    <span class="n">app</span><span class="o">.</span><span class="n">run</span><span class="p">(</span><span class="n">debug</span><span class="o">=</span><span class="bp">True</span><span class="p">)</span>\n</pre></div>\n'
 searchBar.onkeyup = typingTimer;
 
 // Enable infinite scrolling down the results page.
@@ -102,11 +104,8 @@ function queryServer(){
     for(var result = 0; result < 20; result++){
         var newDiv = document.createElement("div");
         newDiv.classList.add("result");
-        newDiv.innerHTML = Math.random();
-        newDiv.style.textAlign = "center";
-        newDiv.style.color = "#" + Math.floor(Math.random() *
-                16777215).toString(16);
-        resultDivs.push(newDiv)
+        newDiv.innerHTML = codeExample;
+        resultDivs.push(newDiv);
     }
 
     return resultDivs;

static/sass/index.sass

@@ -5,6 +5,10 @@
 @import mixins
 @import variables
 
+@font-face
+    font-family: "Inconsolata"
+    src: url("../../Inconsolata.otf") format("opentype")
+
 div#search-field
     @extend .t2
 
@@ -46,6 +50,7 @@ div#search-field
             width: 100%
 
         div#advanced-search
+            display: none
             background-color: white
             border: 1px solid $baseColor2
             margin: 0px
@@ -98,7 +103,8 @@ div#results
     width: 80%
 
     div.result
-        background-color: #F8F8F8
+        background-color: none
+        font-family: Arial, "Inconsolata"
         margin-bottom: 10%
         margin-top: 1%
         padding: 1%

templates/index.html

@@ -6,11 +6,12 @@
 
 = block head
   {{ assets.tag("index.css") }}
+  {{ assets.tag("highlight.css") }}
   {{ assets.tag("jquery.min.js") }}
 = endblock
 
 = block body
-  <div id="search-field" class="partly-visible">
+  <div id="search-field">
 
     <div id="title">
       <span id="title-bit">bit</span
@@ -79,7 +80,7 @@
                 <input type="text" name="variables" id="variables"><br>
               </li>
 
-            <u/l>
+            </ul>
           </div>
         </div>
       </div>