Added syntax highlighing for |code| cards.

mnrowe · Feb 26, 2017 · d2bd4fa · d2bd4fa
1 parent c037ddb
commit d2bd4fa
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 3 deletions.
diff --git a/static/highlight-theme-github.css b/static/highlight-theme-github.css
@@ -0,0 +1,99 @@
+/*
+
+github.com style (c) Vasily Polovnyov <[email protected]>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #333;
+  background: #f8f8f8;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #998;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  color: #333;
+  font-weight: bold;
+}
+
+.hljs-number,
+.hljs-literal,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag .hljs-attr {
+  color: #008080;
+}
+
+.hljs-string,
+.hljs-doctag {
+  color: #d14;
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id {
+  color: #900;
+  font-weight: bold;
+}
+
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-type,
+.hljs-class .hljs-title {
+  color: #458;
+  font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-name,
+.hljs-attribute {
+  color: #000080;
+  font-weight: normal;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: #009926;
+}
+
+.hljs-symbol,
+.hljs-bullet {
+  color: #990073;
+}
+
+.hljs-built_in,
+.hljs-builtin-name {
+  color: #0086b3;
+}
+
+.hljs-meta {
+  color: #999;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  background: #fdd;
+}
+
+.hljs-addition {
+  background: #dfd;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/static/highlight.pack.js b/static/highlight.pack.js
diff --git a/templates/cards.html b/templates/cards.html
@@ -57,7 +57,7 @@ <h4>
                     {% if card.type == 1 %}
                         {{ card.back|replace("\n", "<br />")|safe }}
                     {% else %}
-                        <pre>{{ card.back|safe }}</pre>
+                        <pre><code>{{ card.back|safe }}</code></pre>
                     {% endif %}
                 </td>
             </tr>

diff --git a/templates/layout.html b/templates/layout.html
@@ -5,6 +5,8 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
           integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
     <link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}"/>
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='hightlight-theme-github.css') }}" />
+    <script src="{{ url_for('static', filename='highlight.pack.js') }}"></script>
 </head>
 <body>
     <div class="container">

diff --git a/templates/memorize.html b/templates/memorize.html
@@ -47,7 +47,7 @@ <h3 class="text-center">{{ card.front }}</h3>
                                     </div>
                                 {% endif %}
                             {% else %}
-                                <pre>{{ card.back|safe }}</pre>
+                                <pre><code>{{ card.back|safe }}</code></pre>
                             {% endif %}
                         </div>
                     </div>
@@ -100,4 +100,4 @@ <h3 class="text-center">{{ card.front }}</h3>
         </div>
     </div>
 
-{% endblock %}
+{% endblock %}