`javascript
// docusaurus.config.js
const config = {
presets: [
['classic', {
docs: {
// Classic preset docs config
},
blog: {
// Classic preset blog config
},
}],
['@taml/docusaurus'], // Automatically injects into docs, blog, and pages
],
};
`

$3

You can also use the component directly in MDX files:

`mdx
import Taml from '@taml/docusaurus/component';

My Documentation

{"This is manually rendered TAML"}
`

Styling

The preset includes default CSS styles for all TAML tags. The styles are automatically injected and use semantic class names:

- .taml-outer - Outer container
- .taml-inner - Inner

 element  
- .taml-red, .taml-green, etc. - Color classes
- .taml-bold, .taml-italic, etc. - Style classes
$3
You can override the default styles in your Docusaurus CSS:
`css
/ Custom terminal styling /
.taml-outer {
  background: #1e1e1e;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}
.taml-inner {
  background: transparent;
  color: #ffffff;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 0.9rem;
  line-height: 1.4;
}
/ Override specific colors for dark theme /
.taml-red {
  color: #ff6b6b;
}
.taml-green {
  color: #51cf66;
}
`
Integration with TAML Ecosystem
$3
`typescript
import { parse } from "@taml/parser";
import { visit, getAllText, getElementsWithTag } from "@taml/ast";
// Parse TAML markup into AST
const ast = parse("Hello World!");
// Process the AST
const text = getAllText(ast);
visit(ast, {
  visitElement: (node) => console.log(Element: ${node.tagName}),
});
`
$3
`typescript
import { encode } from "@taml/encoder";
// Convert ANSI to TAML for use in documentation
const ansiText = "\x1b[31mError:\x1b[0m Operation failed";
const tamlMarkup = encode(ansiText);
// Use tamlMarkup in your Docusaurus markdown files
`
$3
`bash
Generate TAML examples for documentation

git status | taml > docs/examples/git-status.taml
npm test | taml > docs/examples/test-output.taml
docker build . | taml > docs/examples/docker-build.taml
`
$3
`typescript
import { encode } from "@taml/encoder";
import { parse } from "@taml/parser";
import { visit, getAllText, getElementsWithTag } from "@taml/ast";
// Complete ANSI → TAML → AST → Documentation pipeline
const ansiOutput = "\x1b[31mERROR:\x1b[0m \x1b[1mDatabase connection failed\x1b[0m";
// 1. Convert ANSI to TAML
const tamlMarkup = encode(ansiOutput);
console.log(tamlMarkup); // "ERROR: Database connection failed"
// 2. Parse TAML to AST
const ast = parse(tamlMarkup);
// 3. Analyze AST
const plainText = getAllText(ast);
const redElements = getElementsWithTag(ast, "red");
const boldElements = getElementsWithTag(ast, "bold");
console.log("Plain text:", plainText);
console.log("Red elements:", redElements.length);
console.log("Bold elements:", boldElements.length);
// 4. Use in Docusaurus documentation
// `taml
// ERROR: Database connection failed
// `
`
API Reference
$3
The preset can be used with default settings or customized:
`javascript
// Default usage
['@taml/docusaurus']
// With options (future extensibility)
['@taml/docusaurus', {
  // Future configuration options
}]
`
$3
The preset exports a  component for manual usage:
`typescript
import Taml from '@taml/docusaurus/component';
// Props interface
interface TamlProps {
  children: string;
  className?: string;
}
`
$3
The preset includes a remark plugin that processes TAML code blocks:
`typescript
// Plugin processes code blocks with:
// - language: "taml"
`
Advanced Topics
$3
#### Efficient Processing
The preset is optimized for documentation sites:
- Build-time Processing: TAML is processed during build, not runtime
- Component Reuse: Single  component handles all rendering
- CSS Optimization: Minimal CSS footprint with semantic classes
- Bundle Size: Lightweight preset with minimal dependencies
#### Memory Usage
- Static Generation: No runtime parsing overhead
- Shared Components: Efficient component reuse across pages
- CSS Classes: Semantic class names for optimal CSS compression
$3
#### Graceful Degradation
`javascript
// The preset handles invalid TAML gracefully
// Invalid syntax falls back to plain text rendering
`
#### Development Warnings
`javascript
// During development, invalid TAML syntax will show warnings
// in the console to help with debugging
`
$3
#### Documentation Generation
`bash
Generate documentation examples

mkdir docs/examples
git log --oneline --color=always | head -10 | taml > docs/examples/git-log.taml
npm test | taml > docs/examples/test-output.taml
docker build . | taml > docs/examples/docker-build.taml
`
#### Tutorial Creation
`markdown
Create interactive tutorials with preserved colors

Step 1: Initialize Git Repository
`taml
$ git init
Initialized empty Git repository in /project/.git/
`
Step 2: Add Files
`taml
$ git add .
$ git commit -m "Initial commit"
[main (root-commit) abc123] Initial commit
 3 files changed, 42 insertions(+)
`
`
#### API Documentation
`markdown
Error Responses
When an API call fails, you'll receive an error response:
`taml
HTTP/1.1 400 Bad Request
Content-Type: application/json
{
  "error": "Invalid request",
  "code": "INVALID_INPUT"
}
`
`
Troubleshooting
$3
Make sure you're using the correct syntax:
``markdown

`taml
Error message
`

`html
Error message
`

`html taml
Error message
`
``
$3
If you see TypeScript errors, ensure the preset is properly installed and the types are available:
`bash
npm install @taml/docusaurus --save-dev
`
$3
If TAML content appears unstyled, check that:
1. The preset is correctly added to your docusaurus.config.js
2. You're using the taml code block syntax
3. The default CSS is loading (inspect element to verify classes)
$3
If you encounter build errors:
1. Ensure you're using a compatible Docusaurus version (3.0+)
2. Check that the preset is properly configured
3. Verify that your TAML syntax is valid
Contributing
We welcome contributions! Please see our Contributing Guide for details.
$3
`bash
Clone the repository

git clone https://github.com/suin/taml-docusaurus.git
cd taml-docusaurus
Install dependencies

bun install
Run tests

bun test
Build the project

bun run build
Lint and format

bun run lint
bun run format
`
$3
The project uses Bun for testing with comprehensive test coverage:
`bash
Run all tests

bun test
Run tests in watch mode

bun test --watch
Run specific test file

bun test plugin.test.ts
`
$3
`bash
Lint code

bun run lint
Format code

bun run format
Type checking

bun run build
``
License
MIT © suin
---
Part of the TAML ecosystem - Visit the TAML Specification for more information about the Terminal ANSI Markup Language.