@scribe-atp/styles

Pure CSS package for rendering Scribe CMS 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

Element	Selector
Code blocks	.scribe-content pre
Inline code	.scribe-content :not(pre) > code
Syntax tokens	.scribe-content .token.keyword etc.
Images	.scribe-content img
Blockquotes	.scribe-content blockquote
Ordered / unordered lists	.scribe-content ul, .scribe-content ol
Checklists	.scribe-content li[role="checkbox"]

Syntax token classes (token keyword, token string, …) are the Prism-compatible class names that Scribe CMS 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

Property	Default	Description
--scribe-code-bg	#f5f5f5	Code block background
--scribe-code-border	#e0e0e0	Code block border colour
--scribe-code-font	"Courier New", Courier, monospace	Font family for all code
--scribe-code-font-size	0.875em	Font size for all code
--scribe-inline-code-bg	rgba(0,0,0,0.06)	Inline code background

Blockquotes

Property	Default	Description
--scribe-blockquote-border	#ccc	Left border colour
--scribe-blockquote-color	#666	Text colour

Checklists

Property	Default	Description
--scribe-checkbox-size	1em	Checkbox width and height
--scribe-checkbox-border	#aaa	Border of an unchecked item
--scribe-checkbox-checked-bg	#333	Fill of a checked item
--scribe-checkbox-checked-border	#333	Border of a checked item

Syntax token colours

Property	Default	Applies to
--scribe-token-comment	#708090	comment, prolog, doctype, cdata
--scribe-token-punctuation	#555	punctuation
--scribe-token-property	#905	property, tag, boolean, number, constant, symbol, deleted
--scribe-token-string	#690	string, selector, attr, char, builtin, inserted
--scribe-token-operator	#9a6e3a	operator, entity, url
--scribe-token-keyword	#07a	keyword, atrule
--scribe-token-function	#dd4a68	function, class-name, class
--scribe-token-variable	#e90	variable, regex, important