Skip to content

Commit 1959cb9

Browse files
authored
Updated highlighter for better clarity of output (#241)
1 parent 882737c commit 1959cb9

File tree

2 files changed

+188
-2
lines changed

2 files changed

+188
-2
lines changed

docfx/templates/Ubiquity/public/antlr.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,9 +99,9 @@ export function antlr(hljs)
9999
aliases: ['antlr'],
100100
keywords: ['grammar', 'fragment', 'skip'],
101101
classNameAliases: {
102-
LexerRuleName: 'type',
102+
LexerRuleName: 'title.function',
103103
LexerRuleRef: 'title.function.invoke',
104-
GrammarRuleName: 'type',
104+
GrammarRuleName: 'title.function',
105105
GrammarRuleRef: 'title.function.invoke',
106106
GrammarAltName: 'title.function',
107107
},
Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
@charset "UTF-8";
2+
/*
3+
Customized Highlight JS theming
4+
The default theming that comes with docfx 'modern' support is rather limited. It doesn't
5+
distinguish between a function definition or invocation as Highlight.JS allows, etc...
6+
This updated theming allows finer grained control.
7+
*/
8+
pre code.hljs {
9+
display: block;
10+
overflow-x: auto;
11+
padding: 1em
12+
}
13+
14+
code.hljs {
15+
padding: 3px 5px
16+
}
17+
18+
.hljs {
19+
background: #fff;
20+
color: #000
21+
}
22+
23+
.hljs-comment, .hljs-quote, .hljs-variable {
24+
color: green;
25+
font-style: italic
26+
}
27+
28+
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name, .hljs-tag {
29+
color: #00f
30+
}
31+
32+
.hljs-string, .hljs-title, .hljs-section, .hljs-attribute, .hljs-literal, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-addition {
33+
color: #a31515
34+
}
35+
36+
.hljs-title.function_ {
37+
color: #a31515;
38+
font-weight: bold
39+
}
40+
41+
.hljs-title.function_.invoke__ {
42+
color: Sienna;
43+
font-weight: normal;
44+
font-style: italic
45+
}
46+
47+
.hljs-deletion, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-meta {
48+
color: #2b91af
49+
}
50+
51+
.hljs-doctag {
52+
color: green
53+
}
54+
55+
.hljs-attr {
56+
color: red
57+
}
58+
59+
.hljs-symbol, .hljs-bullet, .hljs-link {
60+
color: #00b0e8
61+
}
62+
63+
.hljs-emphasis {
64+
font-style: italic
65+
}
66+
67+
.hljs-strong {
68+
font-weight: 700
69+
}
70+
71+
[data-bs-theme=dark] pre code.hljs {
72+
display: block;
73+
overflow-x: auto;
74+
padding: 1em
75+
}
76+
77+
[data-bs-theme=dark] code.hljs {
78+
padding: 3px 5px
79+
}
80+
81+
[data-bs-theme=dark] .hljs {
82+
background: #0A0A0A;
83+
color: #dcdcdc
84+
}
85+
86+
[data-bs-theme=dark] .hljs-keyword, [data-bs-theme=dark] .hljs-literal, [data-bs-theme=dark] .hljs-symbol, [data-bs-theme=dark] .hljs-name {
87+
color: #569cd6
88+
}
89+
90+
[data-bs-theme=dark] .hljs-link {
91+
color: #569cd6;
92+
text-decoration: underline
93+
}
94+
95+
[data-bs-theme=dark] .hljs-built_in, [data-bs-theme=dark] .hljs-type {
96+
color: #4ec9b0
97+
}
98+
99+
[data-bs-theme=dark] .hljs-number, [data-bs-theme=dark] .hljs-class {
100+
color: #b8d7a3
101+
}
102+
103+
[data-bs-theme=dark] .hljs-string, [data-bs-theme=dark] .hljs-meta .hljs-string {
104+
color: #d69d85
105+
}
106+
107+
[data-bs-theme=dark] .hljs-regexp, [data-bs-theme=dark] .hljs-template-tag {
108+
color: #9a5334
109+
}
110+
111+
[data-bs-theme=dark] .hljs-subst, [data-bs-theme=dark] .hljs-function, [data-bs-theme=dark] .hljs-title, [data-bs-theme=dark] .hljs-params, [data-bs-theme=dark] .hljs-formula {
112+
color: #dcdcdc
113+
}
114+
115+
[data-bs-theme=dark] .hljs-title.function_ {
116+
color: LightSkyBlue;
117+
font-weight:bold
118+
}
119+
120+
[data-bs-theme=dark] .hljs-title.function_.invoke__ {
121+
color:MediumSeaGreen;
122+
font-weight:normal;
123+
font-style: italic
124+
}
125+
126+
[data-bs-theme=dark] .hljs-comment, [data-bs-theme=dark] .hljs-quote {
127+
color: #C19C00;
128+
font-style: italic
129+
}
130+
131+
[data-bs-theme=dark] .hljs-doctag {
132+
color: DarkGoldenrod;
133+
}
134+
135+
[data-bs-theme=dark] .hljs-meta, [data-bs-theme=dark] .hljs-meta .hljs-keyword, [data-bs-theme=dark] .hljs-tag {
136+
color: #9b9b9b
137+
}
138+
139+
[data-bs-theme=dark] .hljs-variable, [data-bs-theme=dark] .hljs-template-variable {
140+
color: LightSteelBlue;
141+
font-style: italic
142+
}
143+
144+
[data-bs-theme=dark] .hljs-attr, [data-bs-theme=dark] .hljs-attribute {
145+
color: #9cdcfe
146+
}
147+
148+
[data-bs-theme=dark] .hljs-section {
149+
color: gold
150+
}
151+
152+
[data-bs-theme=dark] .hljs-emphasis {
153+
font-style: italic
154+
}
155+
156+
[data-bs-theme=dark] .hljs-strong {
157+
font-weight: 700
158+
}
159+
160+
[data-bs-theme=dark] .hljs-bullet, [data-bs-theme=dark] .hljs-selector-tag, [data-bs-theme=dark] .hljs-selector-id, [data-bs-theme=dark] .hljs-selector-class, [data-bs-theme=dark] .hljs-selector-attr, [data-bs-theme=dark] .hljs-selector-pseudo {
161+
color: #d7ba7d
162+
}
163+
164+
[data-bs-theme=dark] .hljs-addition {
165+
background-color: #144212;
166+
display: inline-block;
167+
width: 100%
168+
}
169+
170+
[data-bs-theme=dark] .hljs-deletion {
171+
background-color: #600;
172+
display: inline-block;
173+
width: 100%
174+
}
175+
176+
.hljs {
177+
background-color: #f5f5f5
178+
}
179+
180+
@media print {
181+
.hljs {
182+
overflow-x: hidden;
183+
text-wrap: pretty
184+
}
185+
}
186+

0 commit comments

Comments
 (0)