Skip to content

Commit b069c72

Browse files
rajveermalviyarajveermalviya
committed
content: Add styles for syntax highlighting
1 parent d6d0cd6 commit b069c72

File tree

1 file changed

+194
-1
lines changed

1 file changed

+194
-1
lines changed

‎lib/widgets/content.dart

+194-1
Original file line numberDiff line numberDiff line change
@@ -303,6 +303,132 @@ class CodeBlockHighlighted extends StatelessWidget {
303303
}
304304
}
305305

306+
// Highlighted code block styles adapted from:
307+
// https://github.com/zulip/zulip/blob/213387249e7ba7772084411b22d8cef64b135dd0/web/styles/pygments.css
308+
309+
// .hll { background-color: hsl(60deg 100% 90%); }
310+
final _kCodeBlockStyleHll = TextStyle(backgroundColor: const HSLColor.fromAHSL(1, 60, 1, 0.9).toColor());
311+
// .c { color: hsl(180deg 33% 37%); font-style: italic; }
312+
final _kCodeBlockStyleC = TextStyle(color: const HSLColor.fromAHSL(1, 180, 0.33, 0.37).toColor(), fontStyle: FontStyle.italic);
313+
// .k { color: hsl(332deg 70% 38%); }
314+
final _kCodeBlockStyleK = TextStyle(color: const HSLColor.fromAHSL(1, 332, 0.7, 0.38).toColor());
315+
// .o { color: hsl(332deg 70% 38%); }
316+
final _kCodeBlockStyleO = TextStyle(color: const HSLColor.fromAHSL(1, 332, 0.7, 0.38).toColor());
317+
// .cm { color: hsl(180deg 33% 37%); font-style: italic; }
318+
final _kCodeBlockStyleCm = TextStyle(color: const HSLColor.fromAHSL(1, 180, 0.33, 0.37).toColor(), fontStyle: FontStyle.italic);
319+
// .cp { color: hsl(38deg 100% 36%); }
320+
final _kCodeBlockStyleCp = TextStyle(color: const HSLColor.fromAHSL(1, 38, 1, 0.36).toColor());
321+
// .c1 { color: hsl(0deg 0% 67%); font-style: italic; }
322+
final _kCodeBlockStyleC1 = TextStyle(color: const HSLColor.fromAHSL(1, 0, 0, 0.67).toColor(), fontStyle: FontStyle.italic);
323+
// .cs { color: hsl(180deg 33% 37%); font-style: italic; }
324+
final _kCodeBlockStyleCs = TextStyle(color: const HSLColor.fromAHSL(1, 180, 0.33, 0.37).toColor(), fontStyle: FontStyle.italic);
325+
// .gd { color: hsl(0deg 100% 31%); }
326+
final _kCodeBlockStyleGd = TextStyle(color: const HSLColor.fromAHSL(1, 0, 1, 0.31).toColor(), fontStyle: FontStyle.italic);
327+
// .ge { font-style: italic; }
328+
const _kCodeBlockStyleGe = TextStyle(fontStyle: FontStyle.italic);
329+
// .gr { color: hsl(0deg 100% 50%); }
330+
final _kCodeBlockStyleGr = TextStyle(color: const HSLColor.fromAHSL(1, 0, 1, 0.50).toColor());
331+
// .gh { color: hsl(240deg 100% 25%); font-weight: bold; }
332+
final _kCodeBlockStyleGh = TextStyle(color: const HSLColor.fromAHSL(1, 240, 1, 0.25).toColor(), fontWeight: FontWeight.bold);
333+
// .gi { color: hsl(120deg 100% 31%); }
334+
final _kCodeBlockStyleGi = TextStyle(color: const HSLColor.fromAHSL(1, 120, 1, 0.31).toColor());
335+
// .go { color: hsl(0deg 0% 50%); }
336+
final _kCodeBlockStyleGo = TextStyle(color: const HSLColor.fromAHSL(1, 0, 0, 0.50).toColor());
337+
// .gp { color: hsl(240deg 100% 25%); font-weight: bold; }
338+
final _kCodeBlockStyleGp = TextStyle(color: const HSLColor.fromAHSL(1, 240, 1, 0.25).toColor(), fontWeight: FontWeight.bold);
339+
// .gs { font-weight: bold; }
340+
const _kCodeBlockStyleGs = TextStyle(fontWeight: FontWeight.bold);
341+
// .gu { color: hsl(300deg 100% 25%); font-weight: bold; }
342+
final _kCodeBlockStyleGu = TextStyle(color: const HSLColor.fromAHSL(1, 300, 1, 0.25).toColor(), fontWeight: FontWeight.bold);
343+
// .gt { color: hsl(221deg 100% 40%); }
344+
final _kCodeBlockStyleGt = TextStyle(color: const HSLColor.fromAHSL(1, 221, 1, 0.40).toColor());
345+
// .kc { color: hsl(332deg 70% 38%); font-weight: bold; }
346+
final _kCodeBlockStyleKc = TextStyle(color: const HSLColor.fromAHSL(1, 332, 0.70, 0.38).toColor(), fontWeight: FontWeight.bold);
347+
// .kd { color: hsl(332deg 70% 38%); }
348+
final _kCodeBlockStyleKd = TextStyle(color: const HSLColor.fromAHSL(1, 332, 0.70, 0.38).toColor());
349+
// .kn { color: hsl(332deg 70% 38%); font-weight: bold; }
350+
final _kCodeBlockStyleKn = TextStyle(color: const HSLColor.fromAHSL(1, 332, 0.70, 0.38).toColor(), fontWeight: FontWeight.bold);
351+
// .kp { color: hsl(332deg 70% 38%); }
352+
final _kCodeBlockStyleKp = TextStyle(color: const HSLColor.fromAHSL(1, 332, 0.70, 0.38).toColor());
353+
// .kr { color: hsl(332deg 70% 38%); font-weight: bold; }
354+
final _kCodeBlockStyleKr = TextStyle(color: const HSLColor.fromAHSL(1, 332, 0.70, 0.38).toColor(), fontWeight: FontWeight.bold);
355+
// .kt { color: hsl(332deg 70% 38%); }
356+
final _kCodeBlockStyleKt = TextStyle(color: const HSLColor.fromAHSL(1, 332, 0.70, 0.38).toColor());
357+
// .m { color: hsl(0deg 0% 40%); }
358+
final _kCodeBlockStyleM = TextStyle(color: const HSLColor.fromAHSL(1, 0, 0, 0.40).toColor());
359+
// .s { color: hsl(86deg 57% 40%); }
360+
final _kCodeBlockStyleS = TextStyle(color: const HSLColor.fromAHSL(1, 86, 0.57, 0.40).toColor());
361+
// .na { color: hsl(71deg 55% 36%); }
362+
final _kCodeBlockStyleNa = TextStyle(color: const HSLColor.fromAHSL(1, 71, 0.55, 0.36).toColor());
363+
// .nb { color: hsl(195deg 100% 35%); }
364+
final _kCodeBlockStyleNb = TextStyle(color: const HSLColor.fromAHSL(1, 195, 1, 0.35).toColor());
365+
// .nc { color: hsl(264deg 27% 50%); font-weight: bold; }
366+
final _kCodeBlockStyleNc = TextStyle(color: const HSLColor.fromAHSL(1, 264, 0.27, 0.50).toColor(), fontWeight: FontWeight.bold);
367+
// .no { color: hsl(0deg 100% 26%); }
368+
final _kCodeBlockStyleNo = TextStyle(color: const HSLColor.fromAHSL(1, 0, 1, 0.26).toColor());
369+
// .nd { color: hsl(276deg 100% 56%); }
370+
final _kCodeBlockStyleNd = TextStyle(color: const HSLColor.fromAHSL(1, 276, 1, 0.56).toColor());
371+
// .ni { color: hsl(0deg 0% 60%); font-weight: bold; }
372+
final _kCodeBlockStyleNi = TextStyle(color: const HSLColor.fromAHSL(1, 0, 0, 0.60).toColor(), fontWeight: FontWeight.bold);
373+
// .ne { color: hsl(2deg 62% 52%); font-weight: bold; }
374+
final _kCodeBlockStyleNe = TextStyle(color: const HSLColor.fromAHSL(1, 2, 0.62, 0.52).toColor(), fontWeight: FontWeight.bold);
375+
// .nf { color: hsl(264deg 27% 50%); }
376+
final _kCodeBlockStyleNf = TextStyle(color: const HSLColor.fromAHSL(1, 264, 0.27, 0.50).toColor());
377+
// .nl { color: hsl(60deg 100% 31%); }
378+
final _kCodeBlockStyleNl = TextStyle(color: const HSLColor.fromAHSL(1, 60, 1, 0.31).toColor());
379+
// .nn { color: hsl(264deg 27% 50%); font-weight: bold; }
380+
final _kCodeBlockStyleNn = TextStyle(color: const HSLColor.fromAHSL(1, 264, 0.27, 0.50).toColor(), fontWeight: FontWeight.bold);
381+
// .nt { color: hsl(120deg 100% 25%); font-weight: bold; }
382+
final _kCodeBlockStyleNt = TextStyle(color: const HSLColor.fromAHSL(1, 120, 1, 0.25).toColor(), fontWeight: FontWeight.bold);
383+
// .nv { color: hsl(241deg 68% 28%); }
384+
final _kCodeBlockStyleNv = TextStyle(color: const HSLColor.fromAHSL(1, 241, 0.68, 0.28).toColor());
385+
// .nx { color: hsl(0deg 0% 26%); }
386+
final _kCodeBlockStyleNx = TextStyle(color: const HSLColor.fromAHSL(1, 0, 0, 0.26).toColor());
387+
// .ow { color: hsl(276deg 100% 56%); font-weight: bold; }
388+
final _kCodeBlockStyleOw = TextStyle(color: const HSLColor.fromAHSL(1, 276, 1, 0.56).toColor(), fontWeight: FontWeight.bold);
389+
// .w { color: hsl(0deg 0% 73%); }
390+
final _kCodeBlockStyleW = TextStyle(color: const HSLColor.fromAHSL(1, 0, 0, 0.73).toColor());
391+
// .mf { color: hsl(195deg 100% 35%); }
392+
final _kCodeBlockStyleMf = TextStyle(color: const HSLColor.fromAHSL(1, 195, 1, 0.35).toColor());
393+
// .mh { color: hsl(195deg 100% 35%); }
394+
final _kCodeBlockStyleMh = TextStyle(color: const HSLColor.fromAHSL(1, 195, 1, 0.35).toColor());
395+
// .mi { color: hsl(195deg 100% 35%); }
396+
final _kCodeBlockStyleMi = TextStyle(color: const HSLColor.fromAHSL(1, 195, 1, 0.35).toColor());
397+
// .mo { color: hsl(195deg 100% 35%); }
398+
final _kCodeBlockStyleMo = TextStyle(color: const HSLColor.fromAHSL(1, 195, 1, 0.35).toColor());
399+
// .sb { color: hsl(86deg 57% 40%); }
400+
final _kCodeBlockStyleSb = TextStyle(color: const HSLColor.fromAHSL(1, 86, 0.57, 0.40).toColor());
401+
// .sc { color: hsl(86deg 57% 40%); }
402+
final _kCodeBlockStyleSc = TextStyle(color: const HSLColor.fromAHSL(1, 86, 0.57, 0.40).toColor());
403+
// .sd { color: hsl(86deg 57% 40%); font-style: italic; }
404+
final _kCodeBlockStyleSd = TextStyle(color: const HSLColor.fromAHSL(1, 86, 0.57, 0.40).toColor(), fontStyle: FontStyle.italic);
405+
// .s2 { color: hsl(225deg 71% 33%); }
406+
final _kCodeBlockStyleS2 = TextStyle(color: const HSLColor.fromAHSL(1, 225, 0.71, 0.33).toColor());
407+
// .se { color: hsl(26deg 69% 43%); font-weight: bold; }
408+
final _kCodeBlockStyleSe = TextStyle(color: const HSLColor.fromAHSL(1, 26, 0.69, 0.43).toColor(), fontWeight: FontWeight.bold);
409+
// .sh { color: hsl(86deg 57% 40%); }
410+
final _kCodeBlockStyleSh = TextStyle(color: const HSLColor.fromAHSL(1, 86, 0.57, 0.40).toColor());
411+
// .si { color: hsl(336deg 38% 56%); font-weight: bold; }
412+
final _kCodeBlockStyleSi = TextStyle(color: const HSLColor.fromAHSL(1, 336, 0.38, 0.56).toColor(), fontWeight: FontWeight.bold);
413+
// .sx { color: hsl(120deg 100% 25%); }
414+
final _kCodeBlockStyleSx = TextStyle(color: const HSLColor.fromAHSL(1, 120, 1, 0.25).toColor());
415+
// .sr { color: hsl(189deg 54% 49%); }
416+
final _kCodeBlockStyleSr = TextStyle(color: const HSLColor.fromAHSL(1, 189, 0.54, 0.49).toColor());
417+
// .s1 { color: hsl(86deg 57% 40%); }
418+
final _kCodeBlockStyleS1 = TextStyle(color: const HSLColor.fromAHSL(1, 86, 0.57, 0.40).toColor());
419+
// .ss { color: hsl(241deg 68% 28%); }
420+
final _kCodeBlockStyleSs = TextStyle(color: const HSLColor.fromAHSL(1, 241, 0.68, 0.28).toColor());
421+
// .bp { color: hsl(120deg 100% 25%); }
422+
final _kCodeBlockStyleBp = TextStyle(color: const HSLColor.fromAHSL(1, 120, 1, 0.25).toColor());
423+
// .vc { color: hsl(241deg 68% 28%); }
424+
final _kCodeBlockStyleVc = TextStyle(color: const HSLColor.fromAHSL(1, 241, 0.68, 0.28).toColor());
425+
// .vg { color: hsl(241deg 68% 28%); }
426+
final _kCodeBlockStyleVg = TextStyle(color: const HSLColor.fromAHSL(1, 241, 0.68, 0.28).toColor());
427+
// .vi { color: hsl(241deg 68% 28%); }
428+
final _kCodeBlockStyleVi = TextStyle(color: const HSLColor.fromAHSL(1, 241, 0.68, 0.28).toColor());
429+
// .il { color: hsl(0deg 0% 40%); }
430+
final _kCodeBlockStyleIl = TextStyle(color: const HSLColor.fromAHSL(1, 0, 0, 0.40).toColor());
431+
306432
class _CodeBlockHighlightedBuilder {
307433
_CodeBlockHighlightedBuilder(this.widget);
308434

@@ -319,7 +445,74 @@ class _CodeBlockHighlightedBuilder {
319445
}
320446

321447
InlineSpan _buildNode(CodeSpanNode node) {
322-
return TextSpan(text: node.text);
448+
final style = switch (node.className) {
449+
'hll' => _kCodeBlockStyleHll,
450+
'c' => _kCodeBlockStyleC,
451+
// TODO: Borders are hard in TextSpan, see the comment in `_buildInlineCode`
452+
'err' => null, // .err { border: 1px solid hsl(0deg 100% 50%); }
453+
'k' => _kCodeBlockStyleK,
454+
'o' => _kCodeBlockStyleO,
455+
'cm' => _kCodeBlockStyleCm,
456+
'cp' => _kCodeBlockStyleCp,
457+
'c1' => _kCodeBlockStyleC1,
458+
'cs' => _kCodeBlockStyleCs,
459+
'gd' => _kCodeBlockStyleGd,
460+
'ge' => _kCodeBlockStyleGe,
461+
'gr' => _kCodeBlockStyleGr,
462+
'gh' => _kCodeBlockStyleGh,
463+
'gi' => _kCodeBlockStyleGi,
464+
'go' => _kCodeBlockStyleGo,
465+
'gp' => _kCodeBlockStyleGp,
466+
'gs' => _kCodeBlockStyleGs,
467+
'gu' => _kCodeBlockStyleGu,
468+
'gt' => _kCodeBlockStyleGt,
469+
'kc' => _kCodeBlockStyleKc,
470+
'kd' => _kCodeBlockStyleKd,
471+
'kn' => _kCodeBlockStyleKn,
472+
'kp' => _kCodeBlockStyleKp,
473+
'kr' => _kCodeBlockStyleKr,
474+
'kt' => _kCodeBlockStyleKt,
475+
'm' => _kCodeBlockStyleM,
476+
's' => _kCodeBlockStyleS,
477+
'na' => _kCodeBlockStyleNa,
478+
'nb' => _kCodeBlockStyleNb,
479+
'nc' => _kCodeBlockStyleNc,
480+
'no' => _kCodeBlockStyleNo,
481+
'nd' => _kCodeBlockStyleNd,
482+
'ni' => _kCodeBlockStyleNi,
483+
'ne' => _kCodeBlockStyleNe,
484+
'nf' => _kCodeBlockStyleNf,
485+
'nl' => _kCodeBlockStyleNl,
486+
'nn' => _kCodeBlockStyleNn,
487+
'nt' => _kCodeBlockStyleNt,
488+
'nv' => _kCodeBlockStyleNv,
489+
'nx' => _kCodeBlockStyleNx,
490+
'ow' => _kCodeBlockStyleOw,
491+
'w' => _kCodeBlockStyleW,
492+
'mf' => _kCodeBlockStyleMf,
493+
'mh' => _kCodeBlockStyleMh,
494+
'mi' => _kCodeBlockStyleMi,
495+
'mo' => _kCodeBlockStyleMo,
496+
'sb' => _kCodeBlockStyleSb,
497+
'sc' => _kCodeBlockStyleSc,
498+
'sd' => _kCodeBlockStyleSd,
499+
's2' => _kCodeBlockStyleS2,
500+
'se' => _kCodeBlockStyleSe,
501+
'sh' => _kCodeBlockStyleSh,
502+
'si' => _kCodeBlockStyleSi,
503+
'sx' => _kCodeBlockStyleSx,
504+
'sr' => _kCodeBlockStyleSr,
505+
's1' => _kCodeBlockStyleS1,
506+
'ss' => _kCodeBlockStyleSs,
507+
'bp' => _kCodeBlockStyleBp,
508+
'vc' => _kCodeBlockStyleVc,
509+
'vg' => _kCodeBlockStyleVg,
510+
'vi' => _kCodeBlockStyleVi,
511+
'il' => _kCodeBlockStyleIl,
512+
_ => null,
513+
};
514+
515+
return TextSpan(text: node.text, style: style);
323516
}
324517
}
325518

0 commit comments

Comments
 (0)