You can use xxx.
if you chose xxx, you should also use yyy somewhere…
```
--------------------------------
### Leaf Directive Syntax Example
Source: https://github.com/remarkjs/remark-directive/blob/main/_autodocs/api-reference.md
Shows the Markdown syntax for leaf directives, which are block-level directives without content.
```markdown
::directiveName[label]{attributes}
```
--------------------------------
### Process Markdown with Directives using remark-directive
Source: https://github.com/remarkjs/remark-directive/blob/main/readme.md
A JavaScript example using unified, remark-parse, remark-directive, remark-rehype, and rehype-stringify to process markdown with directives. It includes a custom remark plugin to transform directives into HAST nodes.
```js
/**
* @import {} from 'mdast-util-directive'
* @import {} from 'mdast-util-to-hast'
* @import {Root} from 'mdast'
*/
import {h} from 'hastscript'
import rehypeFormat from 'rehype-format'
import rehypeStringify from 'rehype-stringify'
import remarkDirective from 'remark-directive'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import {read} from 'to-vfile'
import {unified} from 'unified'
import {visit} from 'unist-util-visit'
const file = await unified()
.use(remarkParse)
.use(remarkDirective)
.use(myRemarkPlugin)
.use(remarkRehype)
.use(rehypeFormat)
.use(rehypeStringify)
.process(await read('example.md'))
console.log(String(file))
// This plugin is an example to let users write HTML with directives.
// It’s informative but rather useless.
// See below for others examples.
function myRemarkPlugin() {
/**
* @param {Root} tree
* Tree.
* @returns {undefined}
* Nothing.
*/
return function (tree) {
visit(tree, function (node) {
if (
node.type === 'containerDirective' ||
node.type === 'leafDirective' ||
node.type === 'textDirective'
) {
const data = node.data || (node.data = {})
const hast = h(node.name, node.attributes || {})
data.hName = hast.tagName
data.hProperties = hast.properties
}
})
}
}
```
--------------------------------
### Chain Multiple Directive Handlers
Source: https://github.com/remarkjs/remark-directive/blob/main/_autodocs/advanced-topics.md
Organize directive handling by splitting different directive types into separate plugins. This example shows how to import and use multiple directive plugins in a remark processor.
```javascript
// directives/youtube.js
function youtube() {
return (tree) => {
visit(tree, 'leafDirective', (node) => {
if (node.name !== 'youtube') return
// Handle youtube directives
})
}
}
// directives/image.js
function image() {
return (tree) => {
visit(tree, 'leafDirective', (node) => {
if (node.name !== 'image') return
// Handle image directives
})
}
}
// main.js
import {remark} from 'remark'
import remarkDirective from 'remark-directive'
import youtube from './directives/youtube.js'
import image from './directives/image.js'
const processor = remark()
.use(remarkDirective)
.use(youtube)
.use(image)
// ... other plugins
```
--------------------------------
### Attribute Escaping Example
Source: https://github.com/remarkjs/remark-directive/blob/main/_autodocs/directive-syntax.md
Shows how special characters in attributes are HTML-encoded during serialization. Ampersands are encoded as `&`.
```markdown
::directive{attr="Tom & Jerry"}
```
```markdown
::directive{attr="Tom & Jerry"}
```
--------------------------------
### Integrate remark-directive with remark-stringify
Source: https://github.com/remarkjs/remark-directive/blob/main/_autodocs/configuration.md
Pass remark-directive serialization options through remark-stringify configuration. This example shows how to set `quote` and `preferShortcut`.
```javascript
import {remark} from 'remark'
import remarkDirective from 'remark-directive'
import {remarkStringify} from 'remark-stringify'
const processor = remark()
.use(remarkDirective)
.use(remarkStringify, {
// These options are passed to directive serialization
quote: '"',
preferShortcut: true
})
```
--------------------------------
### Markdown with Directives
Source: https://github.com/remarkjs/remark-directive/blob/main/readme.md
Example markdown content demonstrating container, leaf, and text directives. These directives can be used to embed custom elements or content.
```markdown
:::main{#readme}
Lorem:br
ipsum.
::hr{.red}
A :i[lovely] language know as :abbr[HTML]{title="HyperText Markup Language"}.
:::
```
--------------------------------
### JSDoc Type Import for JavaScript Projects
Source: https://github.com/remarkjs/remark-directive/blob/main/_autodocs/integration-and-dependencies.md
Provides an example of how to import and use type definitions for remark-directive options in JavaScript projects using JSDoc comments.
```javascript
/**
* @import {Options} from 'remark-directive'
* @import {Root} from 'mdast'
*/
/**
* @type {Options}
*/
const options = {
preferShortcut: true
}
```
--------------------------------
### Markdown to HTML Pipeline with Directive Handling
Source: https://github.com/remarkjs/remark-directive/blob/main/_autodocs/usage-patterns.md
Integrate remark-directive into a full markdown-to-HTML processing pipeline. This example customizes how directives are transformed into HTML elements.
```javascript
import {remark} from 'remark'
import remarkDirective from 'remark-directive'
import remarkRehype from 'remark-rehype'
import rehypeFormat from 'rehype-format'
import rehypeStringify from 'rehype-stringify'
import {visit} from 'unist-util-visit'
function handleDirectives() {
return (tree) => {
visit(tree, (node) => {
if (node.type === 'containerDirective') {
node.data = node.data || {}
node.data.hName = 'section'
node.data.hProperties = {
className: node.name
}
}
if (node.type === 'leafDirective') {
if (node.name === 'linebreak') {
node.data = node.data || {}
node.data.hName = 'hr'
}
}
if (node.type === 'textDirective') {
if (node.name === 'highlight') {
node.data = node.data || {}
node.data.hName = 'mark'
}
}
})
}
}
const processor = remark()
.use(remarkDirective)
.use(handleDirectives)
.use(remarkRehype)
.use(rehypeFormat)
.use(rehypeStringify)
const html = await processor.process(`
# Title
:::note
This is important.
:::
A :highlight[marked] word.
::hr
`)
console.log(String(html))
```
--------------------------------
### Text Directive Node Example
Source: https://github.com/remarkjs/remark-directive/blob/main/_autodocs/directive-syntax.md
Represents a text directive node in the AST. It includes type, name, optional label, and attributes.
```javascript
{
type: 'textDirective',
name: 'cite',
label: 'Smith04',
attributes: {
year: '2004'
}
}
```
--------------------------------
### Processed HTML Output
Source: https://github.com/remarkjs/remark-directive/blob/main/readme.md
The resulting HTML after processing the markdown with directives using the provided JavaScript example. This shows how directives are transformed into HTML elements.
```html