Code Block

Syntax-highlighted code block with copy button. Themes follow your Framer site.

codesyntaxdocs

By Kaiborg · Verified author

Pay once · Own forever

D/01//Description

Drop-in code block component for documentation pages, blog posts, or product surfaces inside Framer. Includes Prism-based syntax highlighting (~25 languages), a copy button with success state, and a theme variable hook so it inherits your site's foreground/background tokens instead of looking like a 1990s manual.

P/02//Source preview · locked

import { useState } from "react"
import Prism from "prismjs"
import "prismjs/components/prism-typescript"

export function CodeBlock({ code, language = "typescript" }: {
  code: string

// … purchase to unlock the full source

Source locked

R/03//Related · same category

OVERRIDETest Item

Test Item

$12

item to test things out

By Kaiborg