@recipe-dsl/recipe-view

React component that highlights RecipeDSL recipe source. Frames embedded sub-languages (SQL, CSS, regex, Hurl-mini, fenced XML inside Hurl-mini) as bordered blocks with their own token coloring.

Install

npm install @recipe-dsl/recipe-view

Peer dependencies you install yourself:

• react ^18
• react-dom ^18
• prismjs ^1.30
• prism-react-renderer ^2

Usage

import { RecipeView } from '@recipe-dsl/recipe-view';
import '@recipe-dsl/recipe-view/recipe-payload.css';

export function App() {
  return <RecipeView source="OUTPUT 1" />;
}

The CSS import is required — it carries the embed-block frame styling and the token color palette.

Props

| Prop | Type | Default | Description | |---|---|---|---| | source | string | required | Raw RecipeDSL recipe text. | | theme | 'dark' \| 'light' | 'dark' | Theme variant. | | className | string | undefined | Extra classes appended to the wrapper <pre>. | | showLineNumbers | boolean | true | Gutter line numbers, including inside multi-line embed frames. |

Embedded sub-languages

Single-line embeds render as inline pills; multi-line embeds render as block-level frames with corner language tags. Line numbers stay contiguous across the frame boundary.

• SQL inside QUERY blocks (blue frame)
• CSS inside EXTRACT … CSS (orange frame)
• regex inside EXTRACT … MATCH REGEX (purple frame)
• Hurl-mini inside REQUEST heredocs (green frame)
• fenced XML inside Hurl-mini bodies (teal frame, nested inside the Hurl-mini frame)

Escape hatches

import { Prism, recipeDslLanguageId } from '@recipe-dsl/recipe-view';

• Prism — pre-configured prismjs instance with all the languages this component uses. Pass to <Highlight prism={Prism}> from prism-react-renderer if you want to render with your own layout.
• recipeDslLanguageId — the string 'recipe-dsl'.

License

Apache-2.0. See LICENSE.