DocoraDocora

Essentials

Code Blocks

Display inline code and code blocks in your documentation.

Basic

Inline Code

Use inline code to reference a symbol inside a sentence, like defineDocsConfig.

Code Blocks

Fenced code is highlighted at build time by Shiki, with a copy button on hover:

export default defineDocsConfig({
  site: { name: 'Acme' },
})

Add a filename in brackets and it appears in a header, with an icon chosen from the extension:

docs.config.ts
docs.config.ts
import { defineDocsConfig } from 'docora'
 
export default defineDocsConfig({
  site: { name: 'Acme' },
})

Highlighting lines

Append line numbers in braces to draw attention to part of a snippet:

next.config.ts
next.config.ts
import { withDocora } from 'docora/next'
 
export default withDocora({
  contentDir: 'content',
})

Add line-numbers to number every line:

app/globals.css
app/globals.css
@import 'tailwindcss';
@import 'docora/styles.css';

Advanced

CodeGroup

Group related snippets into tabs — ideal for package managers:

npm
npm
npm install docora

CodeTree

Show a set of files together with a tree beside them:

docs.config.ts
docs.config.ts
import { defineDocsConfig } from 'docora'
 
export default defineDocsConfig({
  site: { name: 'Acme' },
})

CodeCollapse

Collapse a long file behind a toggle:

app/globals.css
app/globals.css
@import 'tailwindcss';
@import 'docora/styles.css';
 
:root {
  --primary: var(--color-blue-500);
  --radius: 0.5rem;
}
 
.dark {
  --primary: var(--color-blue-400);
}
 
body {
  font-feature-settings: 'cv02', 'cv03';
}

CodePreview

Show a live example beside its source. Write the rendered content in the default slot and the source in #code:

inline code