Code Blocks

1 min readStableBeginner

OwnDocs renders every fenced code block with Prism.js syntax highlighting for 65+ languages, automatic line numbers, a language badge, and a copy button — all on by default.

Quick Start

A plain fenced block needs no configuration.

JavaScript

async function fetchDocumentation(slug) {
  const response = await fetch(`/api/docs/${slug}`)
  return response.json()
}

Adding Options

Add a file title and line highlighting to point readers at the important part.

lib/auth.ts

TypeScript

import { SignJWT, jwtVerify } from 'jose'
 
const secret = new TextEncoder().encode(process.env.JWT_SECRET)
export async function createSession(payload) {
  return new SignJWT(payload).setProtectedHeader({ alg: 'HS256' }).sign(secret)
}

Advanced

Terminal commands get a terminal icon, and languages render with their display name badge. Combine language, title, and highlighting freely.

deploy.sh

Bash

npm install
npm run build
npm start

Options

languagestringDefault: text

Language identifier after the fence; controls highlighting and the badge.

title="file"string

Optional file path shown in the header bar above the block.

{lines}number[]

Individual lines and ranges to highlight, e.g. {1,3-5}.

showLineNumbersbooleanDefault: true

Line numbers are enabled by default on every block.

showLineNumbers=NnumberDefault: 1

Starts numbering from line N.

/pattern/string

Highlights every match of the word or pattern.

expandablebooleanDefault: false

Collapses the block with an expand button.

maxLines=Nnumber

Number of lines visible before expansion.

Line Highlighting

Code Groups

Was this page helpful?