Skip to content

Commit 4bec8a9

Browse files
miharekarmiharekar
committed
Switch to highlight.js
1 parent a4a90e3 commit 4bec8a9

File tree

8 files changed

+314
-9
lines changed

8 files changed

+314
-9
lines changed

‎app/assets/stylesheets/hljs.css

Lines changed: 299 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,299 @@
1+
/* https://raw.githubusercontent.com/highlightjs/highlight.js/main/src/styles/nord.css */
2+
3+
.hljs {
4+
background: #2e3440;
5+
}
6+
7+
.hljs,
8+
.hljs-subst {
9+
color: #d8dee9;
10+
}
11+
12+
.hljs-selector-tag {
13+
color: #81a1c1;
14+
}
15+
16+
.hljs-selector-id {
17+
color: #8fbcbb;
18+
font-weight: bold;
19+
}
20+
21+
.hljs-selector-class {
22+
color: #8fbcbb;
23+
}
24+
25+
.hljs-selector-attr {
26+
color: #8fbcbb;
27+
}
28+
29+
.hljs-property {
30+
color: #88c0d0;
31+
}
32+
33+
.hljs-selector-pseudo {
34+
color: #88c0d0;
35+
}
36+
37+
.hljs-addition {
38+
background-color: rgba(163, 190, 140, 0.5);
39+
}
40+
41+
.hljs-deletion {
42+
background-color: rgba(191, 97, 106, 0.5);
43+
}
44+
45+
.hljs-built_in,
46+
.hljs-type {
47+
color: #8fbcbb;
48+
}
49+
50+
.hljs-class {
51+
color: #8fbcbb;
52+
}
53+
54+
.hljs-function {
55+
color: #88c0d0;
56+
}
57+
58+
.hljs-title.hljs-function,
59+
.hljs-function > .hljs-title {
60+
color: #88c0d0;
61+
}
62+
63+
.hljs-keyword,
64+
.hljs-literal,
65+
.hljs-symbol {
66+
color: #81a1c1;
67+
}
68+
69+
.hljs-number {
70+
color: #b48ead;
71+
}
72+
73+
.hljs-regexp {
74+
color: #ebcb8b;
75+
}
76+
77+
.hljs-string {
78+
color: #a3be8c;
79+
}
80+
81+
.hljs-title {
82+
color: #8fbcbb;
83+
}
84+
85+
.hljs-params {
86+
color: #d8dee9;
87+
}
88+
89+
.hljs-bullet {
90+
color: #81a1c1;
91+
}
92+
93+
.hljs-code {
94+
color: #8fbcbb;
95+
}
96+
97+
.hljs-emphasis {
98+
font-style: italic;
99+
}
100+
101+
.hljs-formula {
102+
color: #8fbcbb;
103+
}
104+
105+
.hljs-strong {
106+
font-weight: bold;
107+
}
108+
109+
.hljs-link:hover {
110+
text-decoration: underline;
111+
}
112+
113+
.hljs-quote {
114+
color: #4c566a;
115+
}
116+
117+
.hljs-comment {
118+
color: #4c566a;
119+
}
120+
121+
.hljs-doctag {
122+
color: #8fbcbb;
123+
}
124+
125+
.hljs-meta,
126+
.hljs-meta .hljs-keyword {
127+
color: #5e81ac;
128+
}
129+
130+
.hljs-meta .hljs-string {
131+
color: #a3be8c;
132+
}
133+
134+
.hljs-attr {
135+
color: #8fbcbb;
136+
}
137+
138+
.hljs-attribute {
139+
color: #d8dee9;
140+
}
141+
142+
.hljs-name {
143+
color: #81a1c1;
144+
}
145+
146+
.hljs-section {
147+
color: #88c0d0;
148+
}
149+
150+
.hljs-tag {
151+
color: #81a1c1;
152+
}
153+
154+
.hljs-variable {
155+
color: #d8dee9;
156+
}
157+
158+
.hljs-template-variable {
159+
color: #d8dee9;
160+
}
161+
162+
.hljs-template-tag {
163+
color: #5e81ac;
164+
}
165+
166+
/* per language customizations */
167+
168+
.language-abnf .hljs-attribute {
169+
color: #88c0d0;
170+
}
171+
172+
.language-abnf .hljs-symbol {
173+
color: #ebcb8b;
174+
}
175+
176+
.language-apache .hljs-attribute {
177+
color: #88c0d0;
178+
}
179+
180+
.language-apache .hljs-section {
181+
color: #81a1c1;
182+
}
183+
184+
.language-arduino .hljs-built_in {
185+
color: #88c0d0;
186+
}
187+
188+
.language-aspectj .hljs-meta {
189+
color: #d08770;
190+
}
191+
192+
.language-aspectj > .hljs-title {
193+
color: #88c0d0;
194+
}
195+
196+
.language-bnf .hljs-attribute {
197+
color: #8fbcbb;
198+
}
199+
200+
.language-clojure .hljs-name {
201+
color: #88c0d0;
202+
}
203+
204+
.language-clojure .hljs-symbol {
205+
color: #ebcb8b;
206+
}
207+
208+
.language-coq .hljs-built_in {
209+
color: #88c0d0;
210+
}
211+
212+
.language-cpp .hljs-meta .hljs-string {
213+
color: #8fbcbb;
214+
}
215+
216+
.language-css .hljs-built_in {
217+
color: #88c0d0;
218+
}
219+
220+
.language-css .hljs-keyword {
221+
color: #d08770;
222+
}
223+
224+
.language-diff .hljs-meta {
225+
color: #8fbcbb;
226+
}
227+
228+
.language-ebnf .hljs-attribute {
229+
color: #8fbcbb;
230+
}
231+
232+
.language-glsl .hljs-built_in {
233+
color: #88c0d0;
234+
}
235+
236+
.language-groovy .hljs-meta:not(:first-child) {
237+
color: #d08770;
238+
}
239+
240+
.language-haxe .hljs-meta {
241+
color: #d08770;
242+
}
243+
244+
.language-java .hljs-meta {
245+
color: #d08770;
246+
}
247+
248+
.language-ldif .hljs-attribute {
249+
color: #8fbcbb;
250+
}
251+
252+
.language-lisp .hljs-name {
253+
color: #88c0d0;
254+
}
255+
256+
.language-lua .hljs-built_in {
257+
color: #88c0d0;
258+
}
259+
260+
.language-moonscript .hljs-built_in {
261+
color: #88c0d0;
262+
}
263+
264+
.language-nginx .hljs-attribute {
265+
color: #88c0d0;
266+
}
267+
268+
.language-nginx .hljs-section {
269+
color: #5e81ac;
270+
}
271+
272+
.language-pf .hljs-built_in {
273+
color: #88c0d0;
274+
}
275+
276+
.language-processing .hljs-built_in {
277+
color: #88c0d0;
278+
}
279+
280+
.language-scss .hljs-keyword {
281+
color: #81a1c1;
282+
}
283+
284+
.language-stylus .hljs-keyword {
285+
color: #81a1c1;
286+
}
287+
288+
.language-swift .hljs-meta {
289+
color: #d08770;
290+
}
291+
292+
.language-vim .hljs-built_in {
293+
color: #88c0d0;
294+
font-style: italic;
295+
}
296+
297+
.language-yaml .hljs-meta {
298+
color: #d08770;
299+
}

‎app/assets/stylesheets/prism.css

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎app/javascript/custom/hljs.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import hljs from "highlight.js"
2+
3+
document.addEventListener("turbo:load", hljs.highlightAll)

‎app/javascript/custom/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import "custom/prism"
1+
import "custom/hljs"
22
import "custom/skin"
33
import "custom/time"
44
import "custom/upload"

‎app/javascript/custom/prism.js

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎app/views/layouts/application.html.erb

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<link href="/site.webmanifest?v=4" rel="manifest">
1515
<link color="#000000" href="/safari-pinned-tab.svg?v=4" rel="mask-icon">
1616
<link href="/favicon.ico?v=4" rel="shortcut icon">
17-
<%= stylesheet_link_tag "tailwind", "prism", "fonts", "data-turbo-track": "reload" %>
17+
<%= stylesheet_link_tag "tailwind", "hljs", "fonts", "data-turbo-track": "reload" %>
1818
<%= javascript_importmap_tags %>
1919
</head>
2020
<body class="flex flex-col h-full overflow-y-scroll <%= @skin %>">

‎config/importmap.rb

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
pin "el-transition", to: "https://cdn.skypack.dev/pin/[email protected]/mode=imports/optimized/el-transition.js" # source: https://cdn.skypack.dev/el-transition
1313
pin "highcharts", to: "https://cdn.skypack.dev/pin/[email protected]/mode=imports/unoptimized/es-modules/masters/highcharts.src.js" # source: https://cdn.skypack.dev/highcharts/es-modules/masters/highcharts.src.js
1414
pin "highcharts-annotations", to: "https://cdn.skypack.dev/pin/[email protected]/mode=imports/unoptimized/es-modules/masters/modules/annotations.src.js" # source: https://cdn.skypack.dev/highcharts/es-modules/masters/modules/annotations.src.js
15-
pin "prismjs", to: "https://cdn.skypack.dev/pin/[email protected].0-tsFxawAKDjgdZ80OeL0T/mode=imports/optimized/prismjs.js" # source: https://cdn.skypack.dev/prismjs/prism.js
15+
pin "highlight.js", to: "https://cdn.skypack.dev/pin/[email protected].0-bSUFWqJEEn57ytKpUEAb/mode=imports/optimized/highlightjs.js" # source: https://cdn.skypack.dev/highlight.js
1616

1717
pin_all_from "app/javascript/channels", under: "channels"
1818
pin_all_from "app/javascript/controllers", under: "controllers"

‎config/tailwind.config.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,15 @@ module.exports = {
6060
"inner-sm": "inset 0 1px 2px 0 rgb(0 0 0 / 0.05)",
6161
"inner-lg": "inset 0 4px 4px 0 rgb(0 0 0 / 0.05)",
6262
},
63+
typography: {
64+
DEFAULT: {
65+
css: {
66+
pre: {
67+
backgroundColor: "#2e3440",
68+
},
69+
},
70+
},
71+
},
6372
},
6473
},
6574
plugins: [

0 commit comments

Comments
 (0)