Skip to content

Commit fa118f2

Browse files
A1GardA1Gard
committed
add syntax highlighter :-P
1 parent 434dfc9 commit fa118f2

File tree

9 files changed

+379
-0
lines changed

9 files changed

+379
-0
lines changed

‎assets/css/hljs/atom-one-dark-reasonable.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/*
2+
3+
Atom One Dark With support for ReasonML by Gidi Morris, based off work by Daniel Gamage
4+
5+
Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
6+
7+
*/
8+
.hljs {
9+
display: block;
10+
overflow-x: auto;
11+
padding: 0.5em;
12+
line-height: 1.3em;
13+
color: #abb2bf;
14+
background: #282c34;
15+
border-radius: 5px;
16+
}
17+
.hljs-keyword, .hljs-operator {
18+
color: #F92672;
19+
}
20+
.hljs-pattern-match {
21+
color: #F92672;
22+
}
23+
.hljs-pattern-match .hljs-constructor {
24+
color: #61aeee;
25+
}
26+
.hljs-function {
27+
color: #61aeee;
28+
}
29+
.hljs-function .hljs-params {
30+
color: #A6E22E;
31+
}
32+
.hljs-function .hljs-params .hljs-typing {
33+
color: #FD971F;
34+
}
35+
.hljs-module-access .hljs-module {
36+
color: #7e57c2;
37+
}
38+
.hljs-constructor {
39+
color: #e2b93d;
40+
}
41+
.hljs-constructor .hljs-string {
42+
color: #9CCC65;
43+
}
44+
.hljs-comment, .hljs-quote {
45+
color: #b18eb1;
46+
font-style: italic;
47+
}
48+
.hljs-doctag, .hljs-formula {
49+
color: #c678dd;
50+
}
51+
.hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst {
52+
color: #e06c75;
53+
}
54+
.hljs-literal {
55+
color: #56b6c2;
56+
}
57+
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string {
58+
color: #98c379;
59+
}
60+
.hljs-built_in, .hljs-class .hljs-title {
61+
color: #e6c07b;
62+
}
63+
.hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number {
64+
color: #d19a66;
65+
}
66+
.hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title {
67+
color: #61aeee;
68+
}
69+
.hljs-emphasis {
70+
font-style: italic;
71+
}
72+
.hljs-strong {
73+
font-weight: bold;
74+
}
75+
.hljs-link {
76+
text-decoration: underline;
77+
}

‎assets/css/hljs/atom-one-dark.css‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/*
2+
3+
Atom One Dark by Daniel Gamage
4+
Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
5+
6+
base: #282c34
7+
mono-1: #abb2bf
8+
mono-2: #818896
9+
mono-3: #5c6370
10+
hue-1: #56b6c2
11+
hue-2: #61aeee
12+
hue-3: #c678dd
13+
hue-4: #98c379
14+
hue-5: #e06c75
15+
hue-5-2: #be5046
16+
hue-6: #d19a66
17+
hue-6-2: #e6c07b
18+
19+
*/
20+
21+
.hljs {
22+
display: block;
23+
overflow-x: auto;
24+
padding: 0.5em;
25+
color: #abb2bf;
26+
background: #282c34;
27+
}
28+
29+
.hljs-comment,
30+
.hljs-quote {
31+
color: #5c6370;
32+
font-style: italic;
33+
}
34+
35+
.hljs-doctag,
36+
.hljs-keyword,
37+
.hljs-formula {
38+
color: #c678dd;
39+
}
40+
41+
.hljs-section,
42+
.hljs-name,
43+
.hljs-selector-tag,
44+
.hljs-deletion,
45+
.hljs-subst {
46+
color: #e06c75;
47+
}
48+
49+
.hljs-literal {
50+
color: #56b6c2;
51+
}
52+
53+
.hljs-string,
54+
.hljs-regexp,
55+
.hljs-addition,
56+
.hljs-attribute,
57+
.hljs-meta-string {
58+
color: #98c379;
59+
}
60+
61+
.hljs-built_in,
62+
.hljs-class .hljs-title {
63+
color: #e6c07b;
64+
}
65+
66+
.hljs-attr,
67+
.hljs-variable,
68+
.hljs-template-variable,
69+
.hljs-type,
70+
.hljs-selector-class,
71+
.hljs-selector-attr,
72+
.hljs-selector-pseudo,
73+
.hljs-number {
74+
color: #d19a66;
75+
}
76+
77+
.hljs-symbol,
78+
.hljs-bullet,
79+
.hljs-link,
80+
.hljs-meta,
81+
.hljs-selector-id,
82+
.hljs-title {
83+
color: #61aeee;
84+
}
85+
86+
.hljs-emphasis {
87+
font-style: italic;
88+
}
89+
90+
.hljs-strong {
91+
font-weight: bold;
92+
}
93+
94+
.hljs-link {
95+
text-decoration: underline;
96+
}

‎assets/css/hljs/atom-one-light.css‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/*
2+
3+
Atom One Light by Daniel Gamage
4+
Original One Light Syntax theme from https://github.com/atom/one-light-syntax
5+
6+
base: #fafafa
7+
mono-1: #383a42
8+
mono-2: #686b77
9+
mono-3: #a0a1a7
10+
hue-1: #0184bb
11+
hue-2: #4078f2
12+
hue-3: #a626a4
13+
hue-4: #50a14f
14+
hue-5: #e45649
15+
hue-5-2: #c91243
16+
hue-6: #986801
17+
hue-6-2: #c18401
18+
19+
*/
20+
21+
.hljs {
22+
display: block;
23+
overflow-x: auto;
24+
padding: 0.5em;
25+
color: #383a42;
26+
background: #fafafa;
27+
}
28+
29+
.hljs-comment,
30+
.hljs-quote {
31+
color: #a0a1a7;
32+
font-style: italic;
33+
}
34+
35+
.hljs-doctag,
36+
.hljs-keyword,
37+
.hljs-formula {
38+
color: #a626a4;
39+
}
40+
41+
.hljs-section,
42+
.hljs-name,
43+
.hljs-selector-tag,
44+
.hljs-deletion,
45+
.hljs-subst {
46+
color: #e45649;
47+
}
48+
49+
.hljs-literal {
50+
color: #0184bb;
51+
}
52+
53+
.hljs-string,
54+
.hljs-regexp,
55+
.hljs-addition,
56+
.hljs-attribute,
57+
.hljs-meta-string {
58+
color: #50a14f;
59+
}
60+
61+
.hljs-built_in,
62+
.hljs-class .hljs-title {
63+
color: #c18401;
64+
}
65+
66+
.hljs-attr,
67+
.hljs-variable,
68+
.hljs-template-variable,
69+
.hljs-type,
70+
.hljs-selector-class,
71+
.hljs-selector-attr,
72+
.hljs-selector-pseudo,
73+
.hljs-number {
74+
color: #986801;
75+
}
76+
77+
.hljs-symbol,
78+
.hljs-bullet,
79+
.hljs-link,
80+
.hljs-meta,
81+
.hljs-selector-id,
82+
.hljs-title {
83+
color: #4078f2;
84+
}
85+
86+
.hljs-emphasis {
87+
font-style: italic;
88+
}
89+
90+
.hljs-strong {
91+
font-weight: bold;
92+
}
93+
94+
.hljs-link {
95+
text-decoration: underline;
96+
}

‎assets/css/hljs/default.css‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
/*
2+
3+
Original highlight.js style (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
4+
5+
*/
6+
7+
.hljs {
8+
display: block;
9+
overflow-x: auto;
10+
padding: 0.5em;
11+
background: #F0F0F0;
12+
}
13+
14+
15+
/* Base color: saturation 0; */
16+
17+
.hljs,
18+
.hljs-subst {
19+
color: #444;
20+
}
21+
22+
.hljs-comment {
23+
color: #888888;
24+
}
25+
26+
.hljs-keyword,
27+
.hljs-attribute,
28+
.hljs-selector-tag,
29+
.hljs-meta-keyword,
30+
.hljs-doctag,
31+
.hljs-name {
32+
font-weight: bold;
33+
}
34+
35+
36+
/* User color: hue: 0 */
37+
38+
.hljs-type,
39+
.hljs-string,
40+
.hljs-number,
41+
.hljs-selector-id,
42+
.hljs-selector-class,
43+
.hljs-quote,
44+
.hljs-template-tag,
45+
.hljs-deletion {
46+
color: #880000;
47+
}
48+
49+
.hljs-title,
50+
.hljs-section {
51+
color: #880000;
52+
font-weight: bold;
53+
}
54+
55+
.hljs-regexp,
56+
.hljs-symbol,
57+
.hljs-variable,
58+
.hljs-template-variable,
59+
.hljs-link,
60+
.hljs-selector-attr,
61+
.hljs-selector-pseudo {
62+
color: #BC6060;
63+
}
64+
65+
66+
/* Language color: hue: 90; */
67+
68+
.hljs-literal {
69+
color: #78A960;
70+
}
71+
72+
.hljs-built_in,
73+
.hljs-bullet,
74+
.hljs-code,
75+
.hljs-addition {
76+
color: #397300;
77+
}
78+
79+
80+
/* Meta color: hue: 200 */
81+
82+
.hljs-meta {
83+
color: #1f7199;
84+
}
85+
86+
.hljs-meta-string {
87+
color: #4d99bf;
88+
}
89+
90+
91+
/* Misc effects */
92+
93+
.hljs-emphasis {
94+
font-style: italic;
95+
}
96+
97+
.hljs-strong {
98+
font-weight: bold;
99+
}

‎assets/css/style.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import url(../../node_modules/semantic-ui-css/semantic.min.css);
22
@import url(../../node_modules/vazir-font/dist/font-face.css);
3+
@import url(hljs/atom-one-dark.css);
34

45
* {
56
font-family: Vazir;

‎assets/js/engine.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,9 @@ var app = new Vue({
158158
out += `</form>`;
159159

160160
$("#code").text(out);
161+
document.querySelectorAll('#code').forEach((block) => {
162+
hljs.highlightBlock(block);
163+
});
161164
},
162165
addField: function () {
163166
this.flds.push(clone(this.raw));

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<script src="node_modules/jquery/dist/jquery.min.js"></script>
88
<script src="node_modules/vue/dist/vue.min.js"></script>
99
<script src="node_modules/semantic-ui-css/semantic.min.js"></script>
10+
<script src="node_modules/highlightjs/highlight.pack.min.js"></script>
1011
<link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon">
1112
</head>
1213
<body>

0 commit comments

Comments
 (0)