Skip to content

Commit 7cd57a6

Browse files
leebyronleebyron
committed
Better code highlighting
1 parent 6c8d1f3 commit 7cd57a6

File tree

10 files changed

+366
-271
lines changed

10 files changed

+366
-271
lines changed

‎_src/app/docs/src/MemberDoc.js

+10-6
Original file line numberDiff line numberDiff line change
@@ -109,19 +109,23 @@ var MemberDoc = React.createClass({
109109
<h4 className="infoHeader">
110110
Inherited from
111111
</h4>
112-
<Router.Link to={'/' + member.inherited.name + '/' + name}>
113-
{member.inherited.name + '#' + name}
114-
</Router.Link>
112+
<code>
113+
<Router.Link to={'/' + member.inherited.name + '/' + name}>
114+
{member.inherited.name + '#' + name}
115+
</Router.Link>
116+
</code>
115117
</section>
116118
}
117119
{member.overrides &&
118120
<section>
119121
<h4 className="infoHeader">
120122
Overrides
121123
</h4>
122-
<Router.Link to={'/' + member.overrides.name + '/' + name}>
123-
{member.overrides.name + '#' + name}
124-
</Router.Link>
124+
<code>
125+
<Router.Link to={'/' + member.overrides.name + '/' + name}>
126+
{member.overrides.name + '#' + name}
127+
</Router.Link>
128+
</code>
125129
</section>
126130
}
127131
{doc.notes && doc.notes.map((note, i) =>

‎_src/app/docs/src/style.less

+37-78
Original file line numberDiff line numberDiff line change
@@ -217,55 +217,73 @@ p:last-child {
217217
margin-bottom: 0;
218218
}
219219

220-
// TODO: not random colors
221220

222-
.t.interfaceDef {
223-
color: #808890;
224-
}
225-
226-
.t.member {
227-
color: #808890;
228-
}
229-
230-
.t.callSig {
231-
color: #808890;
232-
}
221+
// TODO: not random colors
233222

234223
.t.blockParams {
235224
padding-left: 2ch;
236225
}
237226

238-
.t.keyword {
239-
color: #A51;
227+
.token.punctuation,
228+
.token.ignore,
229+
.t.interfaceDef,
230+
.t.member,
231+
.t.callSig {
232+
color: #808890;
240233
}
241234

235+
.token.function,
236+
.token.class-name,
237+
.token.qualifier,
242238
.t.fnQualifier,
243239
.t.fnName {
244240
color: #32308E;
245241
}
246242

243+
.token.primitive,
247244
.t.primitive {
248-
color:#458
245+
color: #922;
249246
}
250247

248+
.token.number,
251249
.t.typeParam {
252-
color:#900;
250+
color: #905;
253251
}
254252

255-
//.t.type > a {
256253
.t.typeQualifier,
257254
.t.typeName {
258255
color: #013679;
259256
}
260257

261258
.t.param {
262-
color:#945277;
259+
color: #945277;
263260
}
264261

265262
.t.memberName {
266-
color:teal
263+
color: teal;
264+
}
265+
266+
.token.block-keyword,
267+
.token.keyword,
268+
.t.keyword {
269+
color: #A51;
270+
}
271+
272+
.token.string,
273+
.token.regex {
274+
color: #df5050;
275+
}
276+
277+
.token.operator {
278+
color: #a67f59;
267279
}
268280

281+
.token.comment {
282+
color: #998;
283+
font-style: italic;
284+
}
285+
286+
269287
// macros
270288

271289
.transition(@transition) {
@@ -284,62 +302,3 @@ p:last-child {
284302
-webkit-user-select: none;
285303
user-select: none;
286304
}
287-
288-
289-
290-
291-
292-
293-
294-
.token.punctuation {
295-
color: #808890;
296-
}
297-
298-
.token.block-keyword,
299-
.token.keyword {
300-
color: #07a; //#945277;
301-
}
302-
303-
.token.string {
304-
color: #690;//#df5000;
305-
}
306-
307-
.token.number {
308-
color: #905;//#094e99;
309-
}
310-
311-
312-
.token.comment {
313-
color:#998;
314-
font-style:italic
315-
// color: #abcabc;
316-
}
317-
318-
319-
.token.class-name {
320-
color: #017936;
321-
}
322-
323-
324-
.token.boolean {
325-
color: #905;//#945277;
326-
}
327-
328-
.token.function {
329-
color: #DD4A68;// #017936;
330-
}
331-
332-
333-
.token.operator {
334-
color: #a67f59; //#945277;
335-
}
336-
337-
// .token.ignore {
338-
// color: #abcabc;
339-
// }
340-
341-
342-
.token.regex {
343-
color: #e90;//#abcabc;
344-
}
345-

‎_src/resources/immutable.d.json

+1-1
Large diffs are not rendered by default.

‎_src/src/markdownDocs.js

+47-31
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,14 @@ function collectAllMembersForAllTypes(defs) {
6767

6868
// functions come before keywords
6969
prism.languages.insertBefore('javascript', 'keyword', {
70+
'var': /\b(this)\b/g,
7071
'block-keyword': /\b(if|else|while|for|function)\b/g,
71-
'function': prism.languages.function
72+
'primitive': /\b(true|false|null|undefined)\b/g,
73+
'function': prism.languages.function,
74+
});
75+
76+
prism.languages.insertBefore('javascript', {
77+
'qualifier': /\b[A-Z][a-z0-9_]+/g,
7278
});
7379

7480
marked.setOptions({
@@ -91,8 +97,8 @@ renderer.code = function(code, lang, escaped) {
9197
'</code>';
9298
};
9399

94-
var METHOD_RX = /^(\w+)[#.](\w+)$/;
95-
var PROP_RX = /^\w+$/;
100+
var METHOD_RX = /^(\w+)(?:[#.](\w+))?(?:\(\))?$/;
101+
var PARAM_RX = /^\w+$/;
96102
var MDN_TYPES = {
97103
'Array': true,
98104
'Object': true,
@@ -102,43 +108,44 @@ var MDN_BASE_URL =
102108
'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/';
103109

104110
renderer.codespan = function(text) {
111+
return '<code>' + decorateCodeSpan(text, this.options) + '</code>';
112+
};
113+
114+
function decorateCodeSpan(text, options) {
115+
var context = options.context;
116+
117+
if (context.signatures &&
118+
PARAM_RX.test(text) &&
119+
context.signatures.some(sig =>
120+
sig.params && sig.params.some(param => param.name === text))) {
121+
return '<span class="t param">' + text + '</span>';
122+
}
123+
105124
var method = METHOD_RX.exec(text);
106125
if (method) {
107-
if (MDN_TYPES[method[1]]) {
108-
text = '<a href="'+MDN_BASE_URL+method[1]+'/'+method[2]+'">'+text+'</a>';
109-
} else if (!arrEndsWith(this.options.context.typePath, [method[1], method[2]])) {
126+
method = method.slice(1).filter(function(x){return !!x});
127+
if (MDN_TYPES[method[0]]) {
128+
return '<a href="'+MDN_BASE_URL+method.join('/')+'">'+text+'</a>';
129+
}
130+
if (!arrEndsWith(context.typePath, method) &&
131+
!arrEndsWith(context.typePath.slice(0, -1), method)) {
110132
var path = findPath(
111-
this.options.context.defs,
112-
this.options.context.typePath,
113-
[method[1], method[2]]
133+
context.defs,
134+
context.typePath,
135+
method
114136
);
115137
if (path) {
116-
text = '<a target="_self" href="#/'+path.slice(1).join('/')+'">'+text+'</a>';
117-
}
118-
}
119-
} else {
120-
var prop = PROP_RX.exec(text);
121-
if (prop) {
122-
if (this.options.context.signatures &&
123-
this.options.context.signatures.some(sig =>
124-
sig.params && sig.params.some(param => param.name === text))) {
125-
return '<code class="t param">' + text + '</code>';
126-
}
127-
if (!arrEndsWith(this.options.context.typePath, [text])) {
128-
var path = findPath(
129-
this.options.context.defs,
130-
this.options.context.typePath,
131-
[text]
132-
);
133-
if (path) {
134-
text = '<a target="_self" href="#/'+path.slice(1).join('/')+'">'+text+'</a>';
135-
}
138+
return '<a target="_self" href="#/'+path.slice(1).join('/')+'">'+text+'</a>';
136139
}
137140
}
138141
}
139142

140-
return '<code>' + text + '</code>';
141-
};
143+
if (options.highlight) {
144+
return options.highlight(unescapeCode(text), prism.languages.javascript);
145+
}
146+
147+
return text;
148+
}
142149

143150
function arrEndsWith(arr1, arr2) {
144151
for (var ii = 1; ii <= arr2.length; ii++) {
@@ -174,6 +181,15 @@ function escapeCode(code) {
174181
.replace(/'/g, '&#39;');
175182
}
176183

184+
function unescapeCode(code) {
185+
return code
186+
.replace(/&lt;/g, '<')
187+
.replace(/&gt;/g, '>')
188+
.replace(/&quot;/g, '"')
189+
.replace(/&#39;/g, '\'')
190+
.replace(/&amp;/g, '&');
191+
}
192+
177193
function markdown(content, context) {
178194
return content ? marked(content, { renderer, context }) : content;
179195
}

‎docs/bundle.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)