@scribe-atp/styles

Pure CSS package for rendering SkyScribe article content. No JavaScript, no build step. All rules are scoped to .scribe-content so they cannot leak into the rest of your page.

Installation

npm install @scribe-atp/styles

Usage

Import the stylesheet once at the route that renders article content:

import "@scribe-atp/styles";

Then wrap your article HTML in an element with the scribe-content class. The easiest way is the <ScribeContent> component from @scribe-atp/react, which adds the class automatically:

import { ScribeContent } from "@scribe-atp/react";
import "@scribe-atp/styles";

<ScribeContent html={article.content} />

Or apply the class directly if you are not using React:

<div class="scribe-content" [innerHTML]="article.content"></div>

---

What it styles

Syntax token classes (token keyword, token string, …) are the Prism-compatible class names that SkyScribe emits when it serialises article HTML. The default palette matches Prism's light theme.

---

Theming

Override any --scribe-* custom property on .scribe-content (or a parent element) to customise the output. This is the recommended way to support dark mode:

.my-article.dark {
  --scribe-code-bg: #1e1e1e;
  --scribe-code-border: #333;
  --scribe-inline-code-bg: rgba(255, 255, 255, 0.08);
  --scribe-blockquote-border: #555;
  --scribe-blockquote-color: #aaa;

  /* VS Code dark+ palette */
  --scribe-token-keyword:     #569cd6;
  --scribe-token-string:      #ce9178;
  --scribe-token-comment:     #6a9955;
  --scribe-token-function:    #dcdcaa;
  --scribe-token-variable:    #9cdcfe;
  --scribe-token-property:    #4ec9b0;
  --scribe-token-punctuation: #d4d4d4;
  --scribe-token-operator:    #d4d4d4;
}

Custom property reference

Code blocks & inline code

Blockquotes

Checklists

Syntax token colours