Styles

@scribe-atp/styles is a pure CSS package — no JavaScript, no build step, no framework dependency. It styles article content (code blocks, blockquotes, lists, checklists, images) inside any element with the scribe-content class. Install it alongside whichever framework adapter you're already using:

npm install @scribe-atp/styles

React

Import the stylesheet once, then use @scribe-atp/react's <ScribeContent> component — it applies the scribe-content class for you:

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

<ScribeContent html={article.content} />

Vue

<script setup lang="ts">
import '@scribe-atp/styles';
</script>

<template>
  <div class="scribe-content" v-html="article.content" />
</template>

Angular

// main.ts or a global styles entry point
import '@scribe-atp/styles';

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

Next.js

Import once, typically in your root layout:

// app/layout.tsx
import '@scribe-atp/styles';

Then use <ScribeContent> from @scribe-atp/react as in the React example above — Next's App Router renders React components server-side by default, and ScribeContent works the same way there.

Plain HTML / any other framework

Import the stylesheet, and apply the scribe-content class to whichever element you render article.content into:

<link rel="stylesheet" href="/node_modules/@scribe-atp/styles/dist/index.css" />
<!-- or, if bundling: import "@scribe-atp/styles"; -->

<div class="scribe-content"><!-- article.content HTML here --></div>

Theming and full styled-element reference

See the API reference for the complete list of styled elements and every --scribe-* custom property available for theming (dark mode, brand colours, custom syntax-highlight palettes).