Skip to content

Commit 3f57542

Browse files
nktnet1nktnet1
committed
feat(ui): add syntax highlighting for JSON using highlight.js
1 parent eba7f40 commit 3f57542

9 files changed

Lines changed: 352 additions & 3 deletions

File tree

‎web/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,11 @@
2020
},
2121
"dependencies": {
2222
"@gtm-support/vue2-gtm": "^1.3.0",
23+
"@highlightjs/vue-plugin": "^1.0.2",
2324
"core-js": "~2.6.11",
2425
"element-ui": "^2.13.0",
2526
"fs-extra": "^8.1.0",
27+
"highlight.js": "^10.7.3",
2628
"json-bigint": "^1.0.0",
2729
"lodash-id": "^0.14.0",
2830
"lowdb": "^1.0.0",

‎web/src/assets/scss/theme/dark.scss‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,4 +64,59 @@ body.dark {
6464
--color-shadow-sendbtn: #2dc17769;
6565
--color-shadow-card: #00000059;
6666
--color-shadow-message: #1f1f1f;
67+
68+
/*
69+
Dark style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
70+
- https://github.com/highlightjs/highlight.js/blob/main/src/styles/dark.css
71+
*/
72+
73+
.hljs {
74+
color: #ddd;
75+
}
76+
77+
.hljs-keyword,
78+
.hljs-selector-tag,
79+
.hljs-literal,
80+
.hljs-section,
81+
.hljs-link {
82+
color: white;
83+
}
84+
85+
.hljs-string,
86+
.hljs-title,
87+
.hljs-name,
88+
.hljs-type,
89+
.hljs-attribute,
90+
.hljs-symbol,
91+
.hljs-bullet,
92+
.hljs-built_in,
93+
.hljs-addition,
94+
.hljs-variable,
95+
.hljs-template-tag,
96+
.hljs-template-variable {
97+
color: #d88;
98+
}
99+
100+
.hljs-comment,
101+
.hljs-quote,
102+
.hljs-deletion,
103+
.hljs-meta {
104+
color: #979797;
105+
}
106+
107+
.hljs-keyword,
108+
.hljs-selector-tag,
109+
.hljs-literal,
110+
.hljs-title,
111+
.hljs-section,
112+
.hljs-doctag,
113+
.hljs-type,
114+
.hljs-name,
115+
.hljs-strong {
116+
font-weight: bold;
117+
}
118+
119+
.hljs-emphasis {
120+
font-style: italic;
121+
}
67122
}

‎web/src/assets/scss/theme/light.scss‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,4 +64,109 @@ body.light {
6464
--color-shadow-sendbtn: #2dc17769;
6565
--color-shadow-card: #0000001a;
6666
--color-shadow-message: #dcdcdc;
67+
68+
pre code.hljs {
69+
display: block;
70+
overflow-x: auto;
71+
padding: 1em;
72+
}
73+
74+
code.hljs {
75+
padding: 3px 5px;
76+
}
77+
/* end baseline CSS */
78+
79+
.hljs {
80+
color: #444;
81+
}
82+
83+
.hljs-comment {
84+
color: #697070;
85+
}
86+
.hljs-tag,
87+
.hljs-punctuation {
88+
color: #444a;
89+
}
90+
91+
.hljs-tag .hljs-name,
92+
.hljs-tag .hljs-attr {
93+
color: #444;
94+
}
95+
96+
97+
.hljs-keyword,
98+
.hljs-attribute,
99+
.hljs-selector-tag,
100+
.hljs-meta .hljs-keyword,
101+
102+
.hljs-doctag,
103+
.hljs-name {
104+
font-weight: bold;
105+
}
106+
107+
108+
/* User color: hue: 0 */
109+
110+
.hljs-type,
111+
.hljs-string,
112+
.hljs-number,
113+
.hljs-selector-id,
114+
.hljs-selector-class,
115+
.hljs-quote,
116+
.hljs-template-tag,
117+
.hljs-deletion {
118+
color: #880000;
119+
}
120+
121+
.hljs-title,
122+
.hljs-section {
123+
color: #880000;
124+
font-weight: bold;
125+
}
126+
127+
.hljs-regexp,
128+
.hljs-symbol,
129+
.hljs-variable,
130+
.hljs-template-variable,
131+
.hljs-link,
132+
.hljs-selector-attr,
133+
.hljs-operator,
134+
.hljs-selector-pseudo {
135+
color: #ab5656;
136+
}
137+
138+
/* Language color: hue: 90; */
139+
140+
.hljs-literal {
141+
color: #695;
142+
}
143+
144+
.hljs-built_in,
145+
.hljs-bullet,
146+
.hljs-code,
147+
.hljs-addition {
148+
color: #397300;
149+
}
150+
151+
152+
/* Meta color: hue: 200 */
153+
154+
.hljs-meta {
155+
color: #1f7199;
156+
}
157+
158+
.hljs-meta .hljs-string {
159+
color: #38a;
160+
}
161+
162+
163+
/* Misc effects */
164+
165+
.hljs-emphasis {
166+
font-style: italic;
167+
}
168+
169+
.hljs-strong {
170+
font-weight: bold;
171+
}
67172
}

‎web/src/assets/scss/theme/night.scss‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,4 +64,160 @@ body.night {
6464
--color-shadow-sendbtn: #2dc17769;
6565
--color-shadow-card: #00000085;
6666
--color-shadow-message: #151515;
67+
68+
/*
69+
* Night Owl highlight.js theme
70+
* (c) Carl Baxter, MIT License
71+
* Adapted from Sarah Drasner's Night Owl VS Code Theme
72+
* https://github.com/highlightjs/highlight.js/blob/main/src/styles/night-owl.css
73+
*/
74+
.hljs {
75+
color: #d6deeb;
76+
}
77+
78+
/* General Purpose */
79+
.hljs-keyword {
80+
color: #c792ea;
81+
font-style: italic;
82+
}
83+
.hljs-built_in {
84+
color: #addb67;
85+
font-style: italic;
86+
}
87+
.hljs-type {
88+
color: #82aaff;
89+
}
90+
.hljs-literal {
91+
color: #ff5874;
92+
}
93+
.hljs-number {
94+
color: #F78C6C;
95+
}
96+
.hljs-regexp {
97+
color: #5ca7e4;
98+
}
99+
.hljs-string {
100+
color: #ecc48d;
101+
}
102+
.hljs-subst {
103+
color: #d3423e;
104+
}
105+
.hljs-symbol {
106+
color: #82aaff;
107+
}
108+
.hljs-class {
109+
color: #ffcb8b;
110+
}
111+
.hljs-function {
112+
color: #82AAFF;
113+
}
114+
.hljs-title {
115+
color: #DCDCAA;
116+
font-style: italic;
117+
}
118+
.hljs-params {
119+
color: #7fdbca;
120+
}
121+
122+
/* Meta */
123+
.hljs-comment {
124+
color: #637777;
125+
font-style: italic;
126+
}
127+
.hljs-doctag {
128+
color: #7fdbca;
129+
}
130+
.hljs-meta {
131+
color: #82aaff;
132+
}
133+
.hljs-meta .hljs-keyword {
134+
135+
color: #82aaff;
136+
}
137+
.hljs-meta .hljs-string {
138+
color: #ecc48d;
139+
}
140+
141+
/* Tags, attributes, config */
142+
.hljs-section {
143+
color: #82b1ff;
144+
}
145+
.hljs-tag,
146+
.hljs-name {
147+
color: #7fdbca;
148+
}
149+
.hljs-attr {
150+
color: #7fdbca;
151+
}
152+
.hljs-attribute {
153+
color: #80cbc4;
154+
}
155+
.hljs-variable {
156+
color: #addb67;
157+
}
158+
159+
/* Markup */
160+
.hljs-bullet {
161+
color: #d9f5dd;
162+
}
163+
.hljs-code {
164+
color: #80CBC4;
165+
}
166+
.hljs-emphasis {
167+
color: #c792ea;
168+
font-style: italic;
169+
}
170+
.hljs-strong {
171+
color: #addb67;
172+
font-weight: bold;
173+
}
174+
.hljs-formula {
175+
color: #c792ea;
176+
}
177+
.hljs-link {
178+
color: #ff869a;
179+
}
180+
.hljs-quote {
181+
color: #697098;
182+
font-style: italic;
183+
}
184+
185+
/* CSS */
186+
.hljs-selector-tag {
187+
color: #ff6363;
188+
}
189+
190+
.hljs-selector-id {
191+
color: #fad430;
192+
}
193+
194+
.hljs-selector-class {
195+
color: #addb67;
196+
font-style: italic;
197+
}
198+
199+
.hljs-selector-attr,
200+
.hljs-selector-pseudo {
201+
color: #c792ea;
202+
font-style: italic;
203+
}
204+
205+
/* Templates */
206+
.hljs-template-tag {
207+
color: #c792ea;
208+
}
209+
.hljs-template-variable {
210+
color: #addb67;
211+
}
212+
213+
/* diff */
214+
.hljs-addition {
215+
color: #addb67ff;
216+
font-style: italic;
217+
}
218+
219+
.hljs-deletion {
220+
color: #EF535090;
221+
font-style: italic;
222+
}
67223
}

‎web/src/components/MsgLeftItem.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
/>
3333
</p>
3434
</div>
35-
<pre>{{ payload }}</pre>
35+
<highlightjs autodetect :code="payload" />
3636
</div>
3737
<p class="left-time time">{{ createAt }}</p>
3838
</div>

‎web/src/components/MsgRightItem.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
/>
3131
</p>
3232
</div>
33-
<pre>{{ payload }}</pre>
33+
<highlightjs autodetect :code="payload" />
3434
</div>
3535
<p class="right-time time">{{ createAt }}</p>
3636
</div>

‎web/src/main.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import Vue from 'vue'
22

33
import 'element-ui/lib/theme-chalk/index.css'
4+
5+
import hljs from 'highlight.js/lib/core'
6+
import hljsVuePlugin from '@highlightjs/vue-plugin'
7+
import json from 'highlight.js/lib/languages/json';
8+
49
import ElementLocale from 'element-ui/lib/locale'
510
import App from './App.vue'
611
import router from './router/index'
@@ -13,6 +18,9 @@ import VueVirtualScroller from 'vue-virtual-scroller'
1318
import VueRx from 'vue-rx'
1419
import VueGtm, { VueGtmUseOptions } from '@gtm-support/vue2-gtm'
1520

21+
hljs.registerLanguage('json', json);
22+
Vue.use(hljsVuePlugin)
23+
1624
Vue.use(element)
1725
Vue.use(VueI18n)
1826
Vue.use(VueClipboard)

‎web/src/types/highlightjs.d.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
declare module 'highlight.js/lib/core' {
2+
import { PluginObject } from 'vue'
3+
const hljs: any
4+
export default hljs
5+
}
6+
7+
declare module 'highlight.js/lib/languages/json' {
8+
const json: any
9+
export default json
10+
}
11+
12+
declare module '@highlightjs/vue-plugin' {
13+
import { Plugin } from 'vue'
14+
const hljsVuePlugin: Plugin
15+
export default hljsVuePlugin
16+
}

0 commit comments

Comments
 (0)