// Documentation Page
// Visit our website for more info.
// 
// Features
//
// - Feature 1
// - Feature 2
// - Feature 3
//
//
```
--------------------------------
### Parse Markdown to AST with Markdoc
Source: https://context7.com/evidence-dev/markdoc/llms.txt
Parses a Markdown string into an Abstract Syntax Tree (AST) using the Markdoc library. The AST represents the content as a hierarchical node structure, including location information and error tracking for each node. This is the first step in the Markdoc processing pipeline.
```javascript
import Markdoc from '@markdoc/markdoc';
const markdown = `
# Welcome to Markdoc
This is a **bold** statement with a [link](https://example.com).
{% callout type="warning" %}
This is a custom tag with content.
{% /callout %}
`;
// Parse the markdown into an AST
const ast = Markdoc.parse(markdown);
// The AST is a tree of Node objects
console.log(ast.type); // 'document'
console.log(ast.children.length); // Number of child nodes
console.log(ast.children[0].type); // 'heading'
console.log(ast.children[0].attributes.level); // 1
// Access location information
console.log(ast.children[0].lines); // [1, 2] - line range
console.log(ast.children[0].location); // { file, start, end }
```
--------------------------------
### Import Markdoc in JavaScript (CommonJS and ESM)
Source: https://github.com/evidence-dev/markdoc/blob/main/README.md
Import the Markdoc library into your JavaScript project. Supports both CommonJS and ECMAScript Module (ESM) syntax.
```javascript
const Markdoc = require('@markdoc/markdoc');
```
```javascript
import Markdoc from '@markdoc/markdoc';
```
--------------------------------
### Custom Tag Transformation with Slots and Nested Content
Source: https://context7.com/evidence-dev/markdoc/llms.txt
Illustrates defining custom tags like 'tabs' and 'tab' with complex transformation logic. The 'tabs' tag transforms its children ('tab' tags) into a structured data format suitable for rendering.
```javascript
import Markdoc from '@markdoc/markdoc';
const markdown = `
{% tabs %}
{% tab label="JavaScript" %}
```javascript
console.log('Hello');
```
{% /tab %}
{% tab label="Python" %}
```python
print('Hello')
```
{% /tab %}
{% /tabs %}
`;
const config = {
tags: {
tabs: {
render: 'Tabs',
transform(node, config) {
const tabs = node.children
.filter(child => child.tag === 'tab')
.map(child => ({
label: child.attributes.label,
content: child.transformChildren(config)
}));
return new Markdoc.Tag(
'Tabs',
{ tabs },
[],
node.location,
node.lines
);
}
},
tab: {
render: 'Tab',
attributes: {
label: { type: String, required: true }
}
}
}
};
const ast = Markdoc.parse(markdown);
const content = Markdoc.transform(ast, config);
// Result contains structured tabs data
console.log(content.children[0].name); // 'Tabs'
console.log(content.children[0].attributes.tabs); // Array of tab objects
console.log(content.children[0].attributes.tabs[0].label); // 'JavaScript'
```
--------------------------------
### Validate Markdoc Content Against Schemas
Source: https://context7.com/evidence-dev/markdoc/llms.txt
Validates Markdoc Abstract Syntax Tree (AST) nodes against predefined schema definitions to identify potential errors before rendering. The validator checks for required attributes, type constraints, allowed values, and custom validation rules, returning an array of error objects.
```javascript
import Markdoc from '@markdoc/markdoc';
const markdown = `
{% callout type="invalid" %}
This has an invalid type attribute.
{% /callout %}
{% unknownTag %}
This tag is not defined.
{% /unknownTag %}
`;
const ast = Markdoc.parse(markdown);
const config = {
tags: {
callout: {
render: 'div',
attributes: {
type: {
type: String,
required: true,
matches: ['info', 'warning', 'error']
},
title: { type: String }
}
}
}
};
// Validate the AST
const errors = Markdoc.validate(ast, config);
// Errors contain detailed information
errors.forEach(error => {
console.log(error.error.id); // 'attribute-value-invalid', 'tag-undefined'
console.log(error.error.level); // 'error', 'critical', 'warning'
console.log(error.error.message); // Descriptive error message
console.log(error.location); // Location in source file
console.log(error.lines); // [start, end] line numbers
});
// Check if there are critical errors
const criticalErrors = errors.filter(e => e.error.level === 'critical');
if (criticalErrors.length > 0) {
throw new Error('Validation failed with critical errors');
}
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.