@rip-lang/print 0.1.4 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/print.rip +69 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rip-lang/print",
3
- "version": "0.1.4",
3
+ "version": "0.1.5",
4
4
  "description": "Syntax-highlighted source code printer — Shiki-powered, serves once, auto-opens browser",
5
5
  "type": "module",
6
6
  "main": "print.rip",
package/print.rip CHANGED
@@ -273,11 +273,40 @@ for section, i in sections
273
273
 
274
274
  """
275
275
 
276
- # Read highlight.js CSS theme
277
- hljsTheme = if dark then 'github-dark' else 'github'
276
+ # Load highlight.js theme CSS files
278
277
  hljsMain = import.meta.resolve 'highlight.js'
279
278
  hljsDir = join hljsMain.replace('file://', '').replace(/\/[^/]+$/, ''), '..', 'styles'
280
- hljsCss = readFileSync join(hljsDir, "#{hljsTheme}.css"), 'utf-8'
279
+
280
+ themes = [
281
+ { id: 'github', name: 'GitHub Light', dark: false }
282
+ { id: 'atom-one-light', name: 'Atom One Light', dark: false }
283
+ { id: 'vs', name: 'Visual Studio', dark: false }
284
+ { id: 'xcode', name: 'Xcode', dark: false }
285
+ { id: 'intellij-light', name: 'IntelliJ Light', dark: false }
286
+ { id: 'stackoverflow-light', name: 'Stack Overflow', dark: false }
287
+ { id: 'default', name: 'Default Light', dark: false }
288
+ { id: 'github-dark', name: 'GitHub Dark', dark: true }
289
+ { id: 'atom-one-dark', name: 'Atom One Dark', dark: true }
290
+ { id: 'monokai', name: 'Monokai', dark: true }
291
+ { id: 'nord', name: 'Nord', dark: true }
292
+ { id: 'vs2015', name: 'VS 2015 Dark', dark: true }
293
+ { id: 'tokyo-night-dark', name: 'Tokyo Night', dark: true }
294
+ { id: 'night-owl', name: 'Night Owl', dark: true }
295
+ ]
296
+
297
+ defaultTheme = if dark then 'github-dark' else 'github'
298
+
299
+ # Load all theme CSS into a JS object for runtime switching
300
+ defaultCss = readFileSync join(hljsDir, "#{defaultTheme}.css"), 'utf-8'
301
+ themeEntries = []
302
+ themeOptions = ''
303
+ for theme in themes
304
+ css = readFileSync join(hljsDir, "#{theme.id}.css"), 'utf-8'
305
+ encoded = Buffer.from(css).toString('base64')
306
+ themeEntries.push "'#{theme.id}':{d:#{theme.dark},c:atob('#{encoded}')}"
307
+ selected = if theme.id is defaultTheme then ' selected' else ''
308
+ themeOptions += "<option value=\"#{theme.id}\" data-dark=\"#{theme.dark}\"#{selected}>#{theme.name}</option>\n"
309
+ themeData = themeEntries.join(",\n ")
281
310
 
282
311
  html = """
283
312
  <!DOCTYPE html>
@@ -286,11 +315,14 @@ html = """
286
315
  <meta charset="utf-8">
287
316
  <title>rip-print</title>
288
317
  <link rel="icon" href="data:,">
289
- <style>#{hljsCss}</style>
318
+ <style id="hljs-theme">#{defaultCss}</style>
290
319
  <style>
291
320
  * { margin: 0; padding: 0; box-sizing: border-box; }
292
321
  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #{bgColor}; color: #{textColor}; }
293
322
 
323
+ .toolbar { padding: 8px 16px; border-bottom: 1px solid #{borderColor}; text-align: right; font-size: 13px; }
324
+ .toolbar select { font-size: 13px; padding: 4px 8px; border-radius: 3px; border: 1px solid #{borderColor}; background: #{bgColor}; color: #{textColor}; }
325
+ .toolbar label { color: #888; margin-left: 16px; }
294
326
  .toc { padding: 20px 30px; border-bottom: 1px solid #{borderColor}; }
295
327
  .toc h2 { font-size: 18px; margin-bottom: 10px; }
296
328
  .toc ol { padding-left: 24px; columns: 2; column-gap: 40px; }
@@ -317,18 +349,49 @@ html = """
317
349
  @media print {
318
350
  .toc { page-break-after: always; }
319
351
  .file-header { background: #f0f0f0 !important; color: #000 !important; }
352
+ .toolbar { display: none; }
320
353
  .nav { display: none; }
321
- .file-section { page-break-before: always; }
322
- .file-section:first-of-type { page-break-before: avoid; }
323
354
  body { background: white !important; color: black !important; }
324
355
  code { font-size: 11px !important; }
325
356
  }
326
357
  </style>
327
358
  </head>
328
359
  <body>
360
+ <div class="toolbar">
361
+ <label>Theme: <select id="theme-picker">
362
+ <optgroup label="Light">#{themeOptions.split('\n').filter((o) -> o.includes('data-dark="false"')).join('')}</optgroup>
363
+ <optgroup label="Dark">#{themeOptions.split('\n').filter((o) -> o.includes('data-dark="true"')).join('')}</optgroup>
364
+ </select></label>
365
+ </div>
329
366
  <a name="top"></a>
330
367
  #{toc}
331
368
  #{fileSections}
369
+ <script>
370
+ var themes = {
371
+ #{themeData}
372
+ };
373
+ document.getElementById('theme-picker').addEventListener('change', function(e) {
374
+ var id = e.target.value;
375
+ var t = themes[id];
376
+ if (!t) return;
377
+ document.getElementById('hljs-theme').textContent = t.c;
378
+ var d = t.d;
379
+ var bg = d ? '#0d1117' : '#ffffff';
380
+ var fg = d ? '#e6edf3' : '#1f2328';
381
+ var hdr = d ? '#161b22' : '#f6f8fa';
382
+ var brd = d ? '#30363d' : '#d0d7de';
383
+ var gut = d ? '#161b22' : '#f4f4f4';
384
+ document.body.style.background = bg;
385
+ document.body.style.color = fg;
386
+ document.querySelectorAll('.toolbar').forEach(function(e) { e.style.borderColor = brd; });
387
+ document.querySelectorAll('.toolbar select').forEach(function(e) { e.style.background = bg; e.style.color = fg; e.style.borderColor = brd; });
388
+ document.querySelectorAll('.toc').forEach(function(e) { e.style.borderColor = brd; });
389
+ document.querySelectorAll('.file-header').forEach(function(e) { e.style.background = hdr; e.style.borderColor = brd; e.style.color = fg; });
390
+ document.querySelectorAll('.line-num').forEach(function(e) { e.style.background = gut; e.style.borderColor = brd; });
391
+ document.querySelectorAll('.code-container').forEach(function(e) { e.style.borderColor = brd; });
392
+ document.querySelectorAll('.toc a').forEach(function(e) { e.style.color = fg; });
393
+ });
394
+ </script>
332
395
  </body>
333
396
  </html>
334
397
  """