Include highlight js

mdrachuk · Sep 29, 2019 · d350434 · d350434
1 parent 2cc2c8f
commit d350434
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 7 deletions.
diff --git a/examples/markdown-blog/js/highlight.pack.js b/examples/markdown-blog/js/highlight.pack.js
diff --git a/examples/markdown-blog/styles/hljs-ocean.css b/examples/markdown-blog/styles/hljs-ocean.css
@@ -0,0 +1,74 @@
+/* Ocean Dark highlight.js 9.15.10 Theme */
+/* https://github.com/gavsiu */
+/* Original theme - https://github.com/chriskempson/base16 */
+
+/* Ocean Comment */
+.hljs-comment,
+.hljs-quote {
+    color: #65737e;
+}
+
+/* Ocean Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-deletion {
+    color: #bf616a;
+}
+
+/* Ocean Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-meta,
+.hljs-link {
+    color: #d08770;
+}
+
+/* Ocean Yellow */
+.hljs-attribute {
+    color: #ebcb8b;
+}
+
+/* Ocean Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+    color: #a3be8c;
+}
+
+/* Ocean Blue */
+.hljs-title,
+.hljs-section {
+    color: #8fa1b3;
+}
+
+/* Ocean Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+    color: #b48ead;
+}
+
+.hljs {
+    display: block;
+    overflow-x: auto;
+    background: #2b303b;
+    color: #c0c5ce;
+    padding: 0.5em;
+}
+
+.hljs-emphasis {
+    font-style: italic;
+}
+
+.hljs-strong {
+    font-weight: bold;
+}
diff --git a/examples/markdown-blog/styles/lightweight.scss b/examples/markdown-blog/styles/lightweight.scss
@@ -1,3 +1,5 @@
+@import "./hljs-ocean";
+
 $accent: rgb(250, 160, 0);
 $black: #000000;
 $black-alt: #010101; // A workaround for Safari issue with underline and hover.

diff --git a/examples/markdown-blog/templates/base.html b/examples/markdown-blog/templates/base.html
@@ -5,9 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 
     <link type="text/css" rel="stylesheet" href="/styles/lightweight.css" media="screen,projection">
-    <link type="text/css" rel="stylesheet"
-          href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/ocean.min.css"
-          media="none" onload="media='all'"> <!-- aka "do not block load"  -->
 
     <link rel="alternate" type="application/rss+xml" title="New Posts" href="/posts.rss.xml"/>
     <link rel="alternate" type="application/atom+xml" title="New Posts" href="/posts.atom.xml"/>
@@ -50,10 +47,7 @@
     <p>© <a href="https://drach.uk"><span>Misha Drachuk</span></a> 2019</p>
 </footer>
 
-<script async
-        charset="UTF-8"
-        src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"
-        onload="hljs.initHighlightingOnLoad()"></script>
+<script async charset="UTF-8" src="/js/highlight.pack.js" onload="hljs.initHighlightingOnLoad()"></script>
 
 {% if DEV_ENVIRONMENT %}
     <script type="application/javascript" src="/js/dev-reload.js"></script>