[OCaml] Mobile-friendly clone of cgit.
feat remove highlight.js, add syntax highlighting CSS
Remove all client-side highlighting infrastructure: - highlight.js CDN stylesheet link - highlight.js CDN script tag - highlight_blob inline JavaScript Add dark-theme CSS rules for hilite's scope-based class names using attribute selectors (class*=) for language-agnostic matching: - Keywords (red) - Strings (blue) - Comments (grey, italic) - Constants/numbers (cyan) - Entity names: functions/types (purple), tags (green) - Support built-ins (cyan) - Variables (orange) - Markup: headings, bold, italic, diff insertions/deletions The page now renders syntax highlighting without any JavaScript.
Changed files
lib/static/styles.css
@@ -1261,3 +1261,122 @@
1261
1261
.error-nav {
1262
1262
margin-top: 2em;
1263
1263
}
1264
Added:
1265
Added:
/* ==========================================================================
1266
Added:
Syntax highlighting (server-rendered via hilite + TextMate grammars)
1267
Added:
========================================================================== */
1268
Added:
1269
Added:
/* Keywords: control flow, storage, operators */
1270
Added:
[class*="-keyword"] {
1271
Added:
color: #ff7b72;
1272
Added:
}
1273
Added:
1274
Added:
[class*="-storage-type"],
1275
Added:
[class*="-storage-modifier"] {
1276
Added:
color: #ff7b72;
1277
Added:
}
1278
Added:
1279
Added:
/* Strings */
1280
Added:
[class*="-string"] {
1281
Added:
color: #a5d6ff;
1282
Added:
}
1283
Added:
1284
Added:
/* Comments */
1285
Added:
[class*="-comment"] {
1286
Added:
color: #8b949e;
1287
Added:
font-style: italic;
1288
Added:
}
1289
Added:
1290
Added:
/* Constants: numbers, booleans, language constants */
1291
Added:
[class*="-constant-numeric"],
1292
Added:
[class*="-constant-language"] {
1293
Added:
color: #79c0ff;
1294
Added:
}
1295
Added:
1296
Added:
[class*="-constant-character"] {
1297
Added:
color: #a5d6ff;
1298
Added:
}
1299
Added:
1300
Added:
/* Entity names: functions, classes, types, tags */
1301
Added:
[class*="-entity-name-function"],
1302
Added:
[class*="-entity-name-type"] {
1303
Added:
color: #d2a8ff;
1304
Added:
}
1305
Added:
1306
Added:
[class*="-entity-name-tag"] {
1307
Added:
color: #7ee787;
1308
Added:
}
1309
Added:
1310
Added:
[class*="-entity-other-attribute-name"] {
1311
Added:
color: #79c0ff;
1312
Added:
}
1313
Added:
1314
Added:
/* Support: built-in functions, types */
1315
Added:
[class*="-support-function"],
1316
Added:
[class*="-support-type"] {
1317
Added:
color: #79c0ff;
1318
Added:
}
1319
Added:
1320
Added:
[class*="-support-class"] {
1321
Added:
color: #d2a8ff;
1322
Added:
}
1323
Added:
1324
Added:
/* Variables */
1325
Added:
[class*="-variable-language"],
1326
Added:
[class*="-variable-other-constant"] {
1327
Added:
color: #ffa657;
1328
Added:
}
1329
Added:
1330
Added:
[class*="-variable-parameter"] {
1331
Added:
color: #ffa657;
1332
Added:
}
1333
Added:
1334
Added:
/* Punctuation — keep subdued */
1335
Added:
[class*="-punctuation"] {
1336
Added:
color: #c9d1d9;
1337
Added:
}
1338
Added:
1339
Added:
/* Meta — structural, usually inherits */
1340
Added:
[class*="-meta"] {
1341
Added:
/* no color override — inherits from parent or children */
1342
Added:
}
1343
Added:
1344
Added:
/* Markup (markdown, HTML) */
1345
Added:
[class*="-markup-heading"] {
1346
Added:
color: #79c0ff;
1347
Added:
font-weight: bold;
1348
Added:
}
1349
Added:
1350
Added:
[class*="-markup-bold"] {
1351
Added:
font-weight: bold;
1352
Added:
}
1353
Added:
1354
Added:
[class*="-markup-italic"] {
1355
Added:
font-style: italic;
1356
Added:
}
1357
Added:
1358
Added:
[class*="-markup-inline-raw"],
1359
Added:
[class*="-markup-fenced-code"] {
1360
Added:
color: #a5d6ff;
1361
Added:
}
1362
Added:
1363
Added:
[class*="-markup-deleted"] {
1364
Added:
color: #ffa198;
1365
Added:
background-color: rgba(255, 129, 130, 0.1);
1366
Added:
}
1367
Added:
1368
Added:
[class*="-markup-inserted"] {
1369
Added:
color: #7ee787;
1370
Added:
background-color: rgba(63, 185, 80, 0.1);
1371
Added:
}
1372
Added:
1373
Added:
/* Diff specific */
1374
Added:
[class*="-punctuation-definition-inserted"],
1375
Added:
[class*="-markup-inserted"] {
1376
Added:
color: #7ee787;
1377
Added:
}
1378
Added:
1379
Added:
[class*="-punctuation-definition-deleted"],
1380
Added:
[class*="-markup-deleted"] {
1381
Added:
color: #ffa198;
1382
Added:
}
lib/views/layout.ml
@@ -40,21 +40,12 @@
40
40
let stylesheets =
41
41
[
42
42
"/static/styles.css";
43
Removed:
"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css";
44
43
]
45
44
46
Removed:
let highlight_js =
47
Removed:
"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"
48
Removed:
49
Removed:
(* Colours the blob listing after load. The listing is complete and readable
50
Removed:
without it. *)
51
Removed:
let highlight_blob =
52
Removed:
{|document.addEventListener("DOMContentLoaded",function(){var b=document.getElementById("blob");if(!b||typeof hljs==="undefined")return;var cls=b.className.match(/language-([\w-]+)/);if(!cls)return;var lang=cls[1];b.querySelectorAll("span.line").forEach(function(el){var r=hljs.highlight(el.textContent,{language:lang,ignoreIllegals:true});el.innerHTML=r.value})});|}
53
Removed:
54
45
let head page_title =
55
46
Ui.document_head ~title:page_title
56
47
((Ui.meta_viewport :: List.map Ui.stylesheet stylesheets)
57
Removed:
@ [ Ui.icon "/static/git_icon.svg"; Ui.deferred_script highlight_js ])
48
Added:
@ [ Ui.icon "/static/git_icon.svg" ])
58
49
59
50
(* A freshly initialised repository carries git's placeholder description; treat
60
51
it as no description at all rather than showing boilerplate. *)
@@ -121,7 +112,6 @@
121
112
Ui.page_content ~id:"main" (banner :: page_data.content);
122
113
compact_nav;
123
114
footer site.user_name;
124
Removed:
Ui.inline_script highlight_blob;
125
115
]
126
116
127
117
let render ?(page_title = "Ogit") site body_data =