AsciiDoc

AsciiDoc is a plain text markup language for writing technical content. It’s packed with semantic elements and equipped with features to modularize and reuse content. AsciiDoc content can be composed using a text editor, managed in a version control system, and published to multiple output formats.

In LiveCodes, AsciiDoc is compiled to HTML using Asciidoctor.

Usage

Demo

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "markup": {
      "language": "asciidoc",
      "content": "= AsciiDoc Demo\n\n== Features\n\n* Simple\n* Clean\n* Dev-friendly\n"
    }
  }
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "config": {
    "markup": {
      "language": "asciidoc",
      "content": "= AsciiDoc Demo\n\n== Features\n\n* Simple\n* Clean\n* Dev-friendly\n"
    }
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "config": {
    "markup": {
      "language": "asciidoc",
      "content": "= AsciiDoc Demo\n\n== Features\n\n* Simple\n* Clean\n* Dev-friendly\n"
    }
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "config": {
    "markup": {
      "language": "asciidoc",
      "content": "= AsciiDoc Demo\n\n== Features\n\n* Simple\n* Clean\n* Dev-friendly\n"
    }
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

let options = $state({
  "config": {
    "markup": {
      "language": "asciidoc",
      "content": "= AsciiDoc Demo\n\n== Features\n\n* Simple\n* Clean\n* Dev-friendly\n"
    }
  }
});
let container = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>

Language Info

Name

asciidoc

Extensions

adoc, asc

Editor

markup

Compiler

Asciidoctor.js

Version

Asciidoctor.js: v2.2.8

Code Formatting

Not supported.

Custom Settings

Custom settings added to the property asciidoc are passed as a JSON object to the convert() function during compile. Please check the documentation and document attributes for full reference.

Please note that custom settings should be valid JSON (i.e. functions are not allowed).

{
  "asciidoc": {
    "attributes": {
      "source-highlighter": "highlight.js",
      "icons": "font"
    }
  }
}

Limitations

• Some advanced extensions may not work (e.g. diagrams)

Links

• AsciiDoc
• Asciidoctor
• AsciiDoctor.js