Block Extension Example

Purpose: Process a [callout] block and render it as a semantic <aside> element. The type attribute controls the visual style (e.g., note, tip, warning).

sample-callout-doc.adoc

[callout,type=warning]
Make sure you have Node.js 18 or later installed before running the setup script.

[callout,type=tip]
You can skip this step if you already have the dependencies installed.

CalloutBlock

callout-block.js

export default function (registry) {
  registry.block(function () {
    this.named('callout')
    this.onContext('paragraph')
    this.process(function (parent, reader, attrs) {
      const type = attrs.type || 'note'
      const lines = reader.getLines()
      const html = `<aside class="callout callout-${type}">${lines.join('\n')}</aside>`
      return this.createBlock(parent, 'pass', html)
    })
  })
}

Usage

import { Extensions, convertFile } from '@asciidoctor/core'
import registerCalloutBlock from './callout-block.js'

const registry = Extensions.create()
registerCalloutBlock(registry)

const html = await convertFile('sample-callout-doc.adoc', { to_file: false, extension_registry: registry })
console.log(html)
// <aside class="callout callout-warning">Make sure you have Node.js 18 or later installed before running the setup script.</aside>
// <aside class="callout callout-tip">You can skip this step if you already have the dependencies installed.</aside>