{
  "element": "nve-markdown",
  "entrypoint": "@nvidia-elements/markdown/markdown/markdown.examples.json",
  "items": [
    {
      "id": "markdown-markdown",
      "name": "Default",
      "template": "\n<nve-markdown>\n  <template>\n    # Default\n\n    This is a default markdown component in its initial state.\n\n    - List item 1\n    - List item 2\n    - List item 3\n  </template>\n</nve-markdown>\n  ",
      "summary": "Markdown component rendering content from a template element.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "markdown-markdown-kitchen-sink-from-template",
      "name": "KitchenSinkFromTemplate",
      "template": "\n<nve-markdown>\n  <template>\n# Comprehensive Markdown Documentation Example\n\nThis document demonstrates **100%** of the styling capabilities of the nve-markdown component, covering all CSS rules defined in the stylesheet.\n\n## Typography and Text Formatting\n\nMarkdown supports various text formatting options including **bold text**, *italic text*, and ***bold italic text***.\n\nFor technical documentation, you might need <kbd>Ctrl</kbd> + <kbd>C</kbd> for keyboard shortcuts, <var>x</var> = <var>y</var> + 5 for variables, or <samp>Hello World</samp> for sample output.\n\n### Links and References\n\nHere's an example of an [internal link](#internal), and an [external link](https://example.com) that opens in a new tab.\n\nFor scientific notation: H<sub>2</sub>O and E=mc<sup>2</sup> demonstrate subscript and superscript formatting.\n\n#### Text Modifications\n\nSometimes you need to show <del>deleted text</del> and <ins>inserted text</ins> to track changes. Use <abbr title=\"Hypertext Markup Language\">HTML</abbr> for abbreviations with tooltips.\n\n<small>Fine print: This text uses the small element for disclaimers or additional notes that are less prominent.</small>\n\n## Lists and Hierarchies\n\n### Unordered Lists\n\n- First level item one\n- First level item two\n  - Second level item one\n  - Second level item two\n    - Third level item\n- First level item three\n\nThis paragraph tests that lists properly end with margin-bottom.\n\n### Ordered Lists\n\n1. Step one: Initialize the project\n2. Step two: Install dependencies\n   1. Run \\`npm install\\`\n   2. Verify installation\n3. Step three: Start development server\n\n## Code Examples\n\nInline code like `const greeting = \"Hello\";` is useful for short snippets.\n  </template>\n</nve-markdown>\n  ",
      "summary": "Comprehensive typography demo using template element with headings, lists, links, and inline code",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "markdown-markdown-kitchen-sink-from-source",
      "name": "KitchenSinkFromSource",
      "template": "<div>\n  <nve-markdown id=\"kitchen-sink-source\"></nve-markdown>\n\n  <script type=\"module\">\n    const element = document.getElementById(\"kitchen-sink-source\");\n\n    const markdownContent = `# Comprehensive Markdown Documentation Example\nThis document demonstrates **100%** of the styling capabilities of the nve-markdown component, covering all CSS rules defined in the stylesheet.\n## Typography and Text Formatting\nMarkdown supports various text formatting options including **bold text**, *italic text*, and ***bold italic text***. You can also use <mark>highlighted text</mark> to draw attention to specific content.\nFor technical documentation, you might need <kbd>Ctrl</kbd> + <kbd>C</kbd> for keyboard shortcuts, <var>x</var> = <var>y</var> + 5 for variables, or <samp>Hello World</samp> for sample output.\n### Links and References\nHere's an example of an [internal link](#internal), and an [external link](https://example.com) that opens in a new tab.\nFor scientific notation: H<sub>2</sub>O and E=mc<sup>2</sup> demonstrate subscript and superscript formatting.\n#### Text Modifications\nSometimes you need to show <del>deleted text</del> and <ins>inserted text</ins> to track changes. Use <abbr title=\"Hypertext Markup Language\">HTML</abbr> for abbreviations with tooltips.\n<small>Fine print: This text uses the small element for disclaimers or additional notes that are less prominent.</small>\n## Lists and Hierarchies\n### Unordered Lists\n- First level item one\n- First level item two\n  - Second level item one\n  - Second level item two\n    - Third level item\n- First level item three\nThis paragraph tests that lists properly end with margin-bottom.\n### Ordered Lists\n1. Step one: Initialize the project\n2. Step two: Install dependencies\n   1. Run \\`npm install\\`\n   2. Verify installation\n3. Step three: Start development server\n## Code Examples\nInline code like \\`const greeting = \"Hello\";\\` is useful for short snippets.\n## Blockquotes and Citations\n> \"Design is not just what it looks like and feels like. Design is how it works.\"\n>\n> This famous quote emphasizes the importance of functionality in design.\n## Tables\n| Feature | Description | Status | Priority |\n|---------|-------------|---------|----------|\n| Typography | Complete set of text styles | ✅ Complete | High |\n| Lists | Ordered and unordered lists with proper nesting | ✅ Complete | High |\n| Code Blocks | Syntax highlighting with overflow support | 🚧 In Progress | Medium |\n| Tables | Data presentation with zebra striping | ✅ Complete | Medium |`;\n\n    element.source = markdownContent;\n  </script>\n</div>\n",
      "summary": "Comprehensive typography demo using JavaScript source property with tables, blockquotes, and status indicators",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "markdown-markdown-from-source",
      "name": "FromSource",
      "template": "<nve-markdown\n  source=\"# This is a heading\n- list item 1\n- list item 2\n- list item 3\n**Bold text** and *italic text* with a [link](https://example.com).\n```javascript\nconst code = 'example';\n```\"\n></nve-markdown>\n",
      "summary": "Basic inline source attribute usage with headings, lists, bold/italic text, and code blocks",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "markdown-markdown-from-template",
      "name": "FromTemplate",
      "template": "\n<nve-markdown>\n  <template>\n# Markdown from Template\n\nThis content is **markdown** inside a template element.\n\n### Unordered Lists\n\n- First level item one\n- First level item two\n  - Second level item one\n  - Second level item two\n    - Third level item\n- First level item three\n\nThis paragraph tests that lists properly end with margin-bottom.\n\n### Ordered Lists\n\n1. Step one: Initialize the project\n2. Step two: Install dependencies\n   1. Run \\`npm install\\`\n   2. Verify installation\n3. Step three: Start development server\n\n**Bold text** and *italic text* with a [link](https://example.com).\n  </template>\n</nve-markdown>\n  ",
      "summary": "Markdown content defined inside a template element with nested lists and inline formatting",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "markdown-markdown-combined-from-template",
      "name": "CombinedFromTemplate",
      "template": "\n<nve-markdown>\n  <template>\n# Markdown from Template\n\nThis content is **markdown** inside a template element.\n\n- Template list item 1 \n- Template list item 2 \n- Template list item 3 \n\n## HTML Mixed with Markdown\n\nThis content has <strong>HTML</strong> mixed with markdown.\n<ul>\n  <li>HTML list item 1</li>\n  <li>HTML list item 2</li>\n  <li>HTML list item 3</li>\n</ul>\n  </template>\n</nve-markdown>\n  ",
      "summary": "Mixing raw HTML elements with markdown syntax within a template",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "markdown-markdown-java-script-driven",
      "name": "JavaScriptDriven",
      "template": "<div>\n  <nve-markdown id=\"programmatic-markdown\"></nve-markdown>\n\n  <script type=\"module\">\n    const element = document.getElementById(\"programmatic-markdown\");\n    // Complete markdown content to stream\n    const fullContent = `# AI Assistant Response\n\\n\nThank you for your question about **markdown streaming**. Here's how it works:\n\\n\n## Key Features\n\\n\n- **Real-time parsing** as content arrives\n- *Progressive* rendering updates  \n- Smooth user experience\n- Dynamic content handling\n\\n\n### Implementation Example\n\\n\n\\`\\`\\`javascript\nconst element = document.getElementById('markdown');\nelement.source = streamingContent;\n\\`\\`\\`\n\\n\n## How It Works\n\\n\nThe markdown component processes content incrementally, allowing for:\n\\n\n1. **Streaming responses** from AI systems\n2. **Live updates** without page refreshes\n3. **Progressive enhancement** of content\n\\n\n### Use Cases\n\\n\n- Chat applications with AI assistants\n- Real-time documentation generation\n- Interactive tutorials and guides\n- Live content editing interfaces\n\\n\n## Technical Details\n\\n\nThe component uses a reactive approach:\n\\n\n- Watches for \\`source\\` property changes\n- Re-parses markdown on each update\n- Maintains smooth rendering performance\n- Handles both markdown and HTML content types\n\\n\n### Performance Benefits\n\\n\n- **Lazy loading** of markdown parser\n- **Efficient re-rendering** with Lit's update cycle\n- **Memory optimization** through proper cleanup\n\\n\n> Perfect for AI assistants and real-time documentation!`;\n    // Split content into blocks/paragraphs for progressive display\n    const blocks = fullContent.split(\"\\n\");\n    let currentBlockIndex = 0;\n    function streamContent() {\n      if (currentBlockIndex < blocks.length) {\n        // Add 1 block at a time to preserve markdown structure\n        currentBlockIndex++;\n        const currentContent = blocks.slice(0, currentBlockIndex).join(\" \\n\");\n\n        element.source = currentContent;\n\n        setTimeout(streamContent, 300);\n      }\n    }\n    // Start streaming after a brief delay\n    setTimeout(streamContent, 1000);\n  </script>\n</div>\n",
      "summary": "Progressive streaming demo simulating AI assistant responses with block-by-block content rendering",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "markdown-markdown-dynamic-source",
      "name": "DynamicSource",
      "template": "<div>\n  <h3>Dynamic Source Demo</h3>\n  <p>This demonstrates switching between two HTML contents via the source property.</p>\n\n  <nve-markdown id=\"dynamic-source-markdown\" type=\"html\"></nve-markdown>\n\n  <div style=\"margin-top: 1rem\">\n    <button id=\"switch-to-source-1\">Switch to Source 1</button>\n    <button id=\"switch-to-source-2\">Switch to Source 2</button>\n  </div>\n\n  <script type=\"module\">\n    const nveMarkdown = document.getElementById(\"dynamic-source-markdown\");\n    const source1Btn = document.getElementById(\"switch-to-source-1\");\n    const source2Btn = document.getElementById(\"switch-to-source-2\");\n\n    source1Btn.addEventListener(\"click\", () => {\n      nveMarkdown.source = \"# Source 1\";\n    });\n\n    source2Btn.addEventListener(\"click\", () => {\n      nveMarkdown.source = \"# Source 2\";\n    });\n  </script>\n</div>\n",
      "summary": "Interactive demo with buttons to switch between different source content dynamically",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "markdown-markdown-full-feature",
      "name": "FullFeature",
      "template": "<div>\n  <nve-markdown id=\"markdown-it-demo\"></nve-markdown>\n\n  <script type=\"module\">\n    const element = document.getElementById(\"markdown-it-demo\");\n\n    const markdownContent = `# h1 Heading\n## h2 Heading\n### h3 Heading\n#### h4 Heading\n##### h5 Heading\n###### h6 Heading\n\n## Horizontal Rules\n___\n---\n***\n\n## Typographic replacements\nEnable typographer option to see result.\n(c) (C) (r) (R) (tm) (TM) (p) (P) +-\ntest.. test... test..... test?..... test!....\n!!!!!! ???? ,,  -- ---\n\"Smartypants, double quotes\" and 'single quotes'\n\n## Emphasis\n**This is bold text**\n__This is bold text__\n*This is italic text*\n_This is italic text_\n~~Strikethrough~~\n\n## Blockquotes\n\n> Blockquotes can also be nested...\n>> ...by using additional greater-than signs right next to each other...\n> > > ...or with spaces between arrows.\n\n## Lists\n### Unordered\n+ Create a list by starting a line with \\`+\\`, \\`-\\`, or \\`*\\`\n+ Sub-lists are made by indenting 2 spaces:\n  - Marker character change forces new list start:\n    * Marker character change\n    + Marker character change\n    - Marker character change\n+ Very easy!\n### Ordered\n1. A list item with a number\n2. A list item with a number\n3. A list item with a number\n1. You can use sequential numbers...\n1. ...or keep all the numbers as \\`1.\\`\nStart numbering with offset:\n57. foo\n1. bar\n\n## Code\nInline \\`code\\`\nIndented code\n    // Some comments\n    line 1 of code\n    line 2 of code\n    line 3 of code\n\nBlock code \"fences\"\n\\`\\`\\`\nSample text here...\n\\`\\`\\`\nSyntax highlighting\n\\`\\`\\` js\nvar foo = function (bar) {\n  return bar++;\n};\nconsole.log(foo(5));\n\\`\\`\\`\n## Tables\n| Option | Description |\n| ------ | ----------- |\n| data   | path to data files to supply the data that will be passed into templates. |\n| engine | engine to be used for processing templates. Handlebars is the default. |\n| ext    | extension to be used for dest files. |\nRight aligned columns\n| Option | Description |\n| ------:| -----------:|\n| data   | path to data files to supply the data that will be passed into templates. |\n| engine | engine to be used for processing templates. Handlebars is the default. |\n| ext    | extension to be used for dest files. |\n\n## Links\n[link text](http://dev.nodeca.com)\n[link with title](http://nodeca.github.io/pica/demo/ \"title text!\")\nAutoconverted link https://github.com/nodeca/pica (enable linkify to see)\n\n## Images\n![TestImage](/static/images/test-map-2.webp \"Test Image\")\n`;\n\n    element.source = markdownContent;\n  </script>\n</div>\n",
      "summary": "Full markdown-it feature showcase with all heading levels, horizontal rules, emphasis, blockquotes, and tables",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "markdown-markdown-css-utility",
      "name": "CssUtility",
      "template": "<div nve-markdown>\n  <h1>Heading 1</h1>\n  <h2>Heading 2</h2>\n  <h3>Heading 3</h3>\n  <h4>Heading 4</h4>\n  <h5>Heading 5</h5>\n  <h6>Heading 6</h6>\n  <ul>\n    <li>Unordered list item 1</li>\n    <li>Unordered list item 2</li>\n  </ul>\n  <ol>\n    <li>Ordered list item 1</li>\n    <li>Ordered list item 2</li>\n  </ol>\n  <blockquote>this is a blockqoute</blockquote>\n  <strong>strong</strong>\n  <del>del</del>\n  <em>em</em>\n  <table>\n    <thead>\n      <tr>\n        <th>Syntax</th>\n        <th>Description</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td>Header</td>\n        <td>Title</td>\n      </tr>\n      <tr>\n        <td>Paragraph</td>\n        <td>Text</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n<script type=\"module\">\n  import \"@nvidia-elements/markdown/styles/index.css\";\n</script>\n",
      "summary": "CSS utility attribute for applying markdown typography styles to any element without using the Web Component. Use the nve-markdown attribute on a container and import the styles CSS file separately.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}