Skip to content

Commit 0b50ab1

Browse files
talha131talha131
committed
feat(syntax): use Gruvbox syntax highlighting theme
1 parent ad1bcea commit 0b50ab1

File tree

5 files changed

+304
-132
lines changed

5 files changed

+304
-132
lines changed

‎documentation/content/Components/code-style.md

Lines changed: 82 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,91 @@ authors: Talha Mansoor
88
Category: Components
99
---
1010

11-
Elegant uses [Solarized](http://ethanschoonover.com/solarized) theme for syntax
12-
highlighting. Line numbers have a different background color so that they
13-
appear distinct from the code. Here is an example
11+
Elegant uses [Pygment's port](https://github.com/daveyarwood/gruvbox-pygments)
12+
of [Gruvbox](https://github.com/morhetz/gruvbox) theme for syntax highlighting.
1413

1514
#!c
1615
int sample_function (void) {
1716
printf ("This is a sample function");
1817
return 0
1918
}
19+
20+
## HTML Example
21+
22+
```html
23+
<div
24+
class="photoswipe-gallery"
25+
itemscope
26+
itemtype="http://schema.org/ImageGallery"
27+
>
28+
<figure
29+
itemprop="associatedMedia"
30+
itemscope
31+
itemtype="http://schema.org/ImageObject"
32+
>
33+
<a
34+
href="https://i.picsum.photos/id/1019/5472/3648.jpg"
35+
itemprop="contentUrl"
36+
data-size="5472x3648"
37+
>
38+
<img
39+
src="https://i.picsum.photos/id/1019/100/100.jpg"
40+
itemprop="thumbnail"
41+
alt="Image description"
42+
/>
43+
</a>
44+
<figcaption itemprop="caption description">
45+
Placeholder image from Unsplash
46+
</figcaption>
47+
</figure>
48+
49+
<figure
50+
itemprop="associatedMedia"
51+
itemscope
52+
itemtype="http://schema.org/ImageObject"
53+
>
54+
<a
55+
href="https://i.picsum.photos/id/101/2621/1747.jpg"
56+
itemprop="contentUrl"
57+
data-size="2621x1747"
58+
>
59+
<img
60+
src="https://i.picsum.photos/id/101/100/100.jpg"
61+
itemprop="thumbnail"
62+
alt="Image description"
63+
/>
64+
</a>
65+
<figcaption itemprop="caption description">
66+
You can write anything in the caption
67+
</figcaption>
68+
</figure>
69+
</div>
70+
```
71+
## C++ example
72+
73+
```cpp
74+
#include <algorithm>
75+
#include <iostream>
76+
#include <vector>
77+
78+
int main() {
79+
std::vector<int> eg = {0, 1, 1, 2, 3, 5, 8, 13,
80+
21, 34, 55, 89, 144, 233, 377, 610};
81+
eg.erase(std::remove_if(
82+
eg.begin(),
83+
eg.end(),
84+
[](int x) {
85+
return x > 99;
86+
}),
87+
eg.end());
88+
89+
// Print result
90+
std::for_each(eg.begin(),
91+
eg.end(),
92+
[](const int &e) {
93+
std::cout << e << " ";
94+
});
95+
}
96+
```
97+
98+

‎static/bootstrap/code.less

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,6 @@ pre {
3232
word-wrap: break-word;
3333
white-space: pre;
3434
white-space: pre-wrap;
35-
background-color: #f5f5f5;
36-
border: 1px solid #ccc; // fallback for IE7-8
37-
border: 1px solid rgba(0,0,0,.15);
38-
.border-radius(@baseBorderRadius);
3935

4036
// Make prettyprint styles more spaced out for readability
4137
&.prettyprint {

‎static/css/code.css

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
div.highlight {
2+
margin-bottom: 20px;
3+
border-radius: var(--borderRadius);
4+
}
5+
pre {
6+
overflow: auto;
7+
white-space: pre;
8+
word-break: normal;
9+
word-wrap: normal;
10+
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. */
11+
}
12+
table {
13+
table-layout: fixed;
14+
width: 100%;
15+
}
16+
td {
17+
vertical-align: top;
18+
}
19+
@media (max-width: 979px) {
20+
.linenos {
21+
display: none !important;
22+
}
23+
}
24+
.linenos {
25+
width: 30px;
26+
}
27+
.linenos div pre {
28+
text-align: right;
29+
overflow: hidden;
30+
}
31+
td.code .highlight pre {
32+
border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
33+
}
34+
td.code {
35+
width: 100%;
36+
}
37+
.linenodiv pre {
38+
border-radius: var(--borderRadius) 0 0 var(--borderRadius);
39+
color: #ebdbb2;
40+
background-color: #282828;
41+
}
42+
table.highlighttable {
43+
border: none;
44+
}
45+
table.highlighttable td {
46+
border: none;
47+
}
48+
table.highlighttable tbody > tr:nth-child(odd) > td {
49+
background-color: transparent;
50+
}
51+

‎static/css/elegant.css

Lines changed: 0 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -69,55 +69,6 @@ hr {
6969
padding-left: 10px;
7070
padding-right: 10px;
7171
}
72-
/* Syntax Highlight */
73-
table {
74-
table-layout: fixed;
75-
width: 100%;
76-
}
77-
td {
78-
vertical-align: top;
79-
}
80-
@media (max-width: 979px) {
81-
.linenos {
82-
display: none !important;
83-
}
84-
}
85-
.linenos {
86-
width: 30px;
87-
}
88-
.linenos div pre {
89-
text-align: right;
90-
overflow: hidden;
91-
}
92-
pre {
93-
overflow: auto;
94-
white-space: pre;
95-
word-break: normal;
96-
word-wrap: normal;
97-
}
98-
td.code .highlight pre {
99-
border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
100-
}
101-
td.code {
102-
width: 100%;
103-
}
104-
.linenodiv pre {
105-
background-color: #eee8d5;
106-
border-radius: var(--borderRadius) 0 0 var(--borderRadius);
107-
color: #657b83;
108-
}
109-
div.highlight {
110-
margin-bottom: 20px;
111-
}
112-
table.highlighttable {
113-
border: none;
114-
}
115-
table.highlighttable td {
116-
border: none;
117-
}
118-
table.highlighttable tbody > tr:nth-child(odd) > td {
119-
background-color: transparent;
120-
}
12172
/* Tags */
12273
ul.list-projects,
12374
.list-of-tags {

0 commit comments

Comments
 (0)