undefined

**Rules:**
- Each heading must be on its own line
- Add one space after the `#` symbols
- Headings create visual hierarchy in the rendered output

This is the first paragraph with some content.

This is the second paragraph, separated by a blank line.

- First item
- Second item
- Third item

1. First step
2. Second step
3. Third step

[displayText](entityType)

The [sales revenue](metric_name) reached [¥1.5 million](metric_value) this quarter.

[displayText](entityType, key1=value1, key2=value2, key3="string value")

Revenue grew by [15.3%](ratio_value, origin=0.153, assessment="positive") compared to last year.

undefined

---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>T8 Narrative Text</title>
</head>
<body>
  <div id="container"></div>

  <!-- Import T8 from unpkg CDN -->
  <script src="https://unpkg.com/@antv/t8/dist/t8.min.js"></script>
  
  <script>
    // T8 is available as a global variable
    const { Text } = window.T8;

    // Initialize T8 instance
    const text = new Text(document.getElementById('container'));

    // Render narrative text using T8 Syntax
    const narrativeText = `

text.theme('light').render(narrativeText);

npm install @antv/t8

undefined

import { Text } from '@antv/t8';
import { useEffect, useRef } from 'react';

function T8Component() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    // Initialize T8 instance
    const text = new Text(containerRef.current);

    // Render narrative text using T8 Syntax
    const narrativeText = `

text.theme('light').render(narrativeText);

// Cleanup on unmount
return () => {
  text.unmount();
};

undefined

<template>
  <div ref="containerRef"></div>
</template>

<script setup lang="ts">
import { Text } from '@antv/t8';
import { ref, onMounted, onBeforeUnmount } from 'vue';

const containerRef = ref<HTMLDivElement>();
let textInstance: Text | null = null;

onMounted(() => {
  if (!containerRef.value) return;

  // Initialize T8 instance
  textInstance = new Text(containerRef.value);

  // Render narrative text using T8 Syntax
  const narrativeText = `

undefined

<template>
  <div ref="container"></div>
</template>

<script>
import { Text } from '@antv/t8';

export default {
  name: 'T8Component',
  data() {
    return {
      textInstance: null,
    };
  },
  mounted() {
    // Initialize T8 instance
    this.textInstance = new Text(this.$refs.container);

    // Render narrative text using T8 Syntax
    const narrativeText = `

this.textInstance.theme('light').render(narrativeText);

---