@scribe-atp/styles

@scribe-atp/styles

Base CSS for rendering Scribe CMS article content in consumer sites. Pure CSS — no build step, no JavaScript.

All rules are scoped to .scribe-content so they cannot leak into the rest of your page. Override any --scribe-* custom property to theme the output.

Installation

npm install @scribe-atp/styles

Usage

With Vite / React / React Router

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:

<div
  className="scribe-content"
  dangerouslySetInnerHTML={{ __html: article.content }}
/>

Or use 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} />

With a <link> tag (CDN / no bundler)

<link rel="stylesheet" href="https://unpkg.com/@scribe-atp/styles/src/index.css" />

What it styles

Token classes (token keyword, token string, …) are the Prism-compatible class names that Scribe CMS emits when it serialises article content.

Theming

Override any custom property on .scribe-content (or a parent) to customise the output:

.my-article {
  --scribe-code-bg: #1e1e1e;
  --scribe-code-border: #333;
  --scribe-token-keyword: #569cd6;
  --scribe-token-string: #ce9178;
  --scribe-token-comment: #6a9955;
  --scribe-token-function: #dcdcaa;
  --scribe-token-variable: #9cdcfe;
  --scribe-blockquote-border: #444;
  --scribe-blockquote-color: #aaa;
}

Full list of custom properties