English · 简体中文

JSRay code rendering for VS Code · 8 color themes · JSRay-powered Markdown preview

_{Public beta · bundles a digest-verified JSRay Core snapshot}

---

This repository is the standalone VS Code extension project around JSRay Core — an official open-source integration in the JSRay ecosystem, with its own version and release notes.

It bundles a snapshot of Core rather than depending on it at runtime, so the extension keeps working exactly as shipped until a sync deliberately advances it.

What it does

1. Eight editor color themes — every JSRay palette (Default, Aurora, Ember, Fjord) in dark and light variants, generated from the palette JSON. The nine-family identifier separation lands in the editor through semantic tokens: parameters italic warm-amber, function declarations bold and brighter than calls, runtime builtins bold cool-blue, constants muted gold.

2. JSRay-powered Markdown preview — fenced code blocks in the built-in Markdown preview are re-rendered by JSRay Core itself (media/jsray.js runs inside the preview). Unmarked blocks go through JSRay.detectLanguage(), and the preview follows the editor's light/dark UI automatically.

Install

Download jsray-vscode-<version>.vsix from the latest release, then:

code --install-extension jsray-vscode-0.0.2-beta.vsix

Or in VS Code: Extensions → the … menu → Install from VSIX…

From source

npx @vscode/vsce package   # requires a plain semver version at publish time
code --install-extension jsray-vscode-*.vsix

Or open this folder in VS Code and press F5 (Extension Development Host).

Then pick a theme via Preferences: Color Theme → JSRay …, and open any Markdown preview to see JSRay rendering.

Project layout

jsray-vscode/
├── package.json        ← extension manifest (themes + markdown contributions)
├── themes/             ← generated VS Code color themes (8) — do not edit
├── palettes/           ← palette JSON synced from Core — do not edit
├── media/              ← Core runtime snapshot + preview adapter
│   ├── jsray.js / jsray.css / themes/default.css   (synced from Core dist/)
│   ├── preview-adapter.js
│   └── markdown-preview.css
├── tools/
│   ├── sync-core.sh          ← pull Core dist + palettes, regenerate themes
│   ├── build-themes.mjs      ← palettes/*.json → themes/*.json
│   └── check-versions.mjs    ← metadata + bundle drift + contribution integrity
└── tests/              ← node --test suites (generator, manifest, adapter)

Sync Core

After changing the Core project, rebuild Core dist/ (run sh build.sh there), then:

npm run sync:core      # expects Core at ../jsray, or set JSRAY_CORE_DIR

This refreshes media/, palettes/, regenerates all themes, and updates bundledCore.version. npm run check:versions fails if the bundle drifts from a sibling Core checkout.

Core integrity

The extension bundles a snapshot of JSRay Core, so the file that renders code inside the Markdown preview lives in your extensions folder — writable by anything running on the machine. core-integrity.json pins the digests Core published for this snapshot, and the extension hashes them on activation.

• A mismatch raises an error notification naming the affected files.
• JSRay: Verify Bundled Core in the Command Palette reports on demand.

Custom colors

jsray.customPalette in settings takes the JSON the Theme Studio exports — the same palette file the WordPress plugin and the terminal CLI accept:

"jsray.customPalette": {
  "themes": { "dark": { "tokens": {
    "keyword": { "color": "#FF6B9D", "fontStyle": "bold italic" }
  } } }
}

It restyles the Markdown preview, and the preview refreshes as you edit the setting. Keys are validated against the bundled vocabulary.json; only hex colors are accepted, and tokens from a newer Core are ignored rather than rejected.

To recolor the editor itself, pick one of the eight bundled JSRay themes and layer VS Code's own editor.tokenColorCustomizations on top — that is the mechanism VS Code gives themes, and going around it would fight the editor.

Renderer boundary

The Markdown preview uses JSRay Core by default. The adapter only depends on the ecosystem renderer shape (highlightElement, detectLanguage), so a host fork can swap media/jsray.js for another renderer that implements it.

Develop

npm test               # generator + manifest + adapter suites
npm run build          # regenerate themes from palettes
npm run check:versions