Skip to content
Permalink
Browse files
feat(syntax): use Gruvbox syntax highlighting theme
  • Loading branch information
talha131 committed Feb 2, 2020
1 parent ad1bcea commit 0b50ab1565dd1fa700cea9e4c6cb963bd9591b9f
Show file tree
Hide file tree
Showing 5 changed files with 304 additions and 132 deletions.
@@ -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 << " ";
});
}
```


@@ -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 {
@@ -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;
}

@@ -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 {

0 comments on commit 0b50ab1

Please sign in to comment.