feat(syntax): use Gruvbox syntax highlighting theme

Pelican-Elegant · Feb 2, 2020 · 0b50ab1 · 0b50ab1
1 parent ad1bcea
commit 0b50ab1
Show file tree

Hide file tree

Showing 5 changed files with 304 additions and 132 deletions.
diff --git a/documentation/content/Components/code-style.md b/documentation/content/Components/code-style.md
@@ -8,12 +8,91 @@ authors: Talha Mansoor
 Category: Components
 ---
 
-Elegant uses [Solarized](http://ethanschoonover.com/solarized) theme for syntax
-highlighting. Line numbers have a different background color so that they
-appear distinct from the code. Here is an example
+Elegant uses [Pygment's port](https://github.com/daveyarwood/gruvbox-pygments)
+of [Gruvbox](https://github.com/morhetz/gruvbox) theme for syntax highlighting.
 
     #!c
     int sample_function (void) {
         printf ("This is a sample function");
         return 0
     }
+
+## HTML Example
+
+```html
+<div
+  class="photoswipe-gallery"
+  itemscope
+  itemtype="http://schema.org/ImageGallery"
+>
+  <figure
+    itemprop="associatedMedia"
+    itemscope
+    itemtype="http://schema.org/ImageObject"
+  >
+    <a
+      href="https://i.picsum.photos/id/1019/5472/3648.jpg"
+      itemprop="contentUrl"
+      data-size="5472x3648"
+    >
+      <img
+        src="https://i.picsum.photos/id/1019/100/100.jpg"
+        itemprop="thumbnail"
+        alt="Image description"
+      />
+    </a>
+    <figcaption itemprop="caption description">
+      Placeholder image from Unsplash
+    </figcaption>
+  </figure>
+
+  <figure
+    itemprop="associatedMedia"
+    itemscope
+    itemtype="http://schema.org/ImageObject"
+  >
+    <a
+      href="https://i.picsum.photos/id/101/2621/1747.jpg"
+      itemprop="contentUrl"
+      data-size="2621x1747"
+    >
+      <img
+        src="https://i.picsum.photos/id/101/100/100.jpg"
+        itemprop="thumbnail"
+        alt="Image description"
+      />
+    </a>
+    <figcaption itemprop="caption description">
+      You can write anything in the caption
+    </figcaption>
+  </figure>
+</div>
+```
+## C++ example
+
+```cpp
+#include <algorithm>
+#include <iostream>
+#include <vector>
+
+int main() {
+  std::vector<int> eg = {0,  1,  1,  2,  3,   5,   8,   13,
+                         21, 34, 55, 89, 144, 233, 377, 610};
+  eg.erase(std::remove_if(
+              eg.begin(),
+              eg.end(),
+              [](int x) {
+                  return x > 99;
+              }),
+           eg.end());
+
+  // Print result
+  std::for_each(eg.begin(),
+                eg.end(),
+                [](const int &e) {
+                    std::cout << e << " ";
+                });
+}
+```
+
+
diff --git a/static/bootstrap/code.less b/static/bootstrap/code.less
@@ -32,10 +32,6 @@ pre {
   word-wrap: break-word;
   white-space: pre;
   white-space: pre-wrap;
-  background-color: #f5f5f5;
-  border: 1px solid #ccc; // fallback for IE7-8
-  border: 1px solid rgba(0,0,0,.15);
-  .border-radius(@baseBorderRadius);
 
   // Make prettyprint styles more spaced out for readability
   &.prettyprint {

diff --git a/static/css/code.css b/static/css/code.css
@@ -0,0 +1,51 @@
+div.highlight {
+  margin-bottom: 20px;
+  border-radius: var(--borderRadius);
+}
+pre {
+  overflow: auto;
+  white-space: pre;
+  word-break: normal;
+  word-wrap: normal;
+  color: #ebdbb2; /* This is needed due to bug in Pygments. It does not wraps some part of the code of some lagauges, like reST. This is for fallback. */
+}
+table {
+  table-layout: fixed;
+  width: 100%;
+}
+td {
+  vertical-align: top;
+}
+@media (max-width: 979px) {
+  .linenos {
+    display: none !important;
+  }
+}
+.linenos {
+  width: 30px;
+}
+.linenos div pre {
+  text-align: right;
+  overflow: hidden;
+}
+td.code .highlight pre {
+  border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
+}
+td.code {
+  width: 100%;
+}
+.linenodiv pre {
+  border-radius: var(--borderRadius) 0 0 var(--borderRadius);
+  color: #ebdbb2;
+  background-color: #282828;
+}
+table.highlighttable {
+  border: none;
+}
+table.highlighttable td {
+  border: none;
+}
+table.highlighttable tbody > tr:nth-child(odd) > td {
+  background-color: transparent;
+}
+
diff --git a/static/css/elegant.css b/static/css/elegant.css
@@ -69,55 +69,6 @@ hr {
   padding-left: 10px;
   padding-right: 10px;
 }
-/* Syntax Highlight */
-table {
-  table-layout: fixed;
-  width: 100%;
-}
-td {
-  vertical-align: top;
-}
-@media (max-width: 979px) {
-  .linenos {
-    display: none !important;
-  }
-}
-.linenos {
-  width: 30px;
-}
-.linenos div pre {
-  text-align: right;
-  overflow: hidden;
-}
-pre {
-  overflow: auto;
-  white-space: pre;
-  word-break: normal;
-  word-wrap: normal;
-}
-td.code .highlight pre {
-  border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
-}
-td.code {
-  width: 100%;
-}
-.linenodiv pre {
-  background-color: #eee8d5;
-  border-radius: var(--borderRadius) 0 0 var(--borderRadius);
-  color: #657b83;
-}
-div.highlight {
-  margin-bottom: 20px;
-}
-table.highlighttable {
-  border: none;
-}
-table.highlighttable td {
-  border: none;
-}
-table.highlighttable tbody > tr:nth-child(odd) > td {
-  background-color: transparent;
-}
 /* Tags */
 ul.list-projects,
 .list-of-tags {