### Installation

Source: https://context7.com/aguingand/tiptap-markdown/llms.txt

Instructions for installing the tiptap-markdown extension for Tiptap v3 and v2.

```APIDOC
## Installation

Install the package for Tiptap v3 using npm.

```bash
npm install tiptap-markdown@latest
```

For Tiptap v2 compatibility:

```bash
npm install tiptap-markdown@^0.8
```
```

--------------------------------

### Basic Editor Setup

Source: https://context7.com/aguingand/tiptap-markdown/llms.txt

Initialize a Tiptap editor with markdown support using the Markdown extension alongside StarterKit.

```APIDOC
## Basic Editor Setup

Initialize a Tiptap editor with markdown support using the Markdown extension alongside StarterKit.

```javascript
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import { Markdown } from 'tiptap-markdown';

// Create editor with markdown content
const editor = new Editor({
    content: `# Hello World

This is a **bold** statement and this is *italic*.

- List item 1
- List item 2

\`\`\`javascript
console.log('Hello');
\`\`\`
`, // Note: Backticks escaped for JSON string
    extensions: [
        StarterKit,
        Markdown,
    ],
});

// The markdown content is automatically parsed into rich HTML
console.log(editor.getHTML());
// Output: <h1>Hello World</h1><p>This is a <strong>bold</strong> statement...</p>
```
```

--------------------------------

### Install Tiptap Markdown Extension

Source: https://github.com/aguingand/tiptap-markdown/blob/main/README.md

Installation commands for different versions of the Tiptap editor using npm.

```bash
npm install tiptap-markdown@^0.8
```

```bash
npm install tiptap-markdown@latest
```

--------------------------------

### Install tiptap-markdown Extension

Source: https://context7.com/aguingand/tiptap-markdown/llms.txt

Instructions for installing the tiptap-markdown package using npm for Tiptap v3 and v2 compatibility.

```bash
npm install tiptap-markdown@latest

For Tiptap v2 compatibility:
npm install tiptap-markdown@^0.8
```

--------------------------------

### Basic Tiptap Editor Setup with Markdown

Source: https://context7.com/aguingand/tiptap-markdown/llms.txt

Initializes a Tiptap editor with the Markdown extension and StarterKit, demonstrating how markdown content is automatically parsed into HTML.

```javascript
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import { Markdown } from 'tiptap-markdown';

// Create editor with markdown content
const editor = new Editor({
    content: `# Hello World

This is a **bold** statement and this is *italic*.

- List item 1
- List item 2

\
\
javascript
console.log('Hello');
\
\
`,
    extensions: [
        StarterKit,
        Markdown,
    ],
});

// The markdown content is automatically parsed into rich HTML
console.log(editor.getHTML());
// Output: <h1>Hello World</h1><p>This is a <strong>bold</strong> statement...</p>
```

--------------------------------

### Initialize Tiptap Editor with Markdown

Source: https://github.com/aguingand/tiptap-markdown/blob/main/README.md

Basic setup of a Tiptap editor instance configured with the Markdown extension to handle markdown content.

```javascript
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import { Markdown } from 'tiptap-markdown';

const editor = new Editor({
    content: "# Title",
    extensions: [
        StarterKit,
        Markdown,
    ],
});
const markdownOutput = editor.storage.markdown.getMarkdown();
```

--------------------------------

### Create Custom Node Extension with Markdown Support

Source: https://context7.com/aguingand/tiptap-markdown/llms.txt

Shows how to define a custom block node that supports Markdown serialization and parsing using addStorage. This example implements a container node that maps to Markdown ':::' syntax.

```javascript
import { Node } from '@tiptap/core';
import markdownitContainer from 'markdown-it-container';

const ContainerNode = Node.create({
    name: 'container',
    group: 'block',
    content: 'block+',
    defining: true,

    addOptions() {
        return {
            classes: ['info', 'warning', 'danger'],
        };
    },

    addStorage() {
        return {
            markdown: {
                serialize(state, node) {
                    state.write('::: ' + (node.attrs.containerClass || '') + '\n');
                    state.renderContent(node);
                    state.flushClose(1);
                    state.write(':::');
                    state.closeBlock(node);
                },
                parse: {
                    setup(markdownit) {
                        this.options.classes.forEach(className => {
                            markdownit.use(markdownitContainer, className);
                        });
                    },
                },
            },
        };
    },

    addAttributes() {
        return {
            containerClass: {
                default: null,
                parseHTML: element =>
                    [...element.classList].find(cn => this.options.classes.includes(cn)),
                renderHTML: attributes => ({
                    class: attributes.containerClass,
                }),
            },
        };
    },

    parseHTML() {
        return [{
            tag: 'div',
            getAttrs: element =>
                [...element.classList].find(cn => this.options.classes.includes(cn)) ? null : false,
        }];
    },

    renderHTML({ HTMLAttributes }) {
        return ['div', HTMLAttributes, 0];
    },
});
```

--------------------------------

### Extend Marks with Markdown Serialization

Source: https://context7.com/aguingand/tiptap-markdown/llms.txt

Explains how to extend existing Tiptap marks to include custom Markdown syntax. This example adds support for '==' syntax for highlighted text.

```javascript
import { Highlight } from '@tiptap/extension-highlight';
import markdownitMark from 'markdown-it-mark';

const MarkdownHighlight = Highlight.extend({
    addStorage() {
        return {
            markdown: {
                serialize: {
                    open: '==',
                    close: '==',
                },
                parse: {
                    setup(markdownit) {
                        markdownit.use(markdownitMark);
                    },
                },
            },
        };
    },
});
```

--------------------------------

### editor.commands.setContent() - Set Markdown Content

Source: https://context7.com/aguingand/tiptap-markdown/llms.txt

Replace the entire editor content with new markdown text that gets automatically parsed.

```APIDOC
## editor.commands.setContent() - Set Markdown Content

Replace the entire editor content with new markdown text that gets automatically parsed.

```javascript
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import { Markdown } from 'tiptap-markdown';

const editor = new Editor({
    content: '',
    extensions: [StarterKit, Markdown],
});

// Set content using markdown syntax
editor.commands.setContent(`
# New Document

This is **bold** and this is *italic*.

## Code Example

\`\`\`python
def hello():
    print("Hello, World!")
\`\`\`

| Column 1 | Column 2 |
|----------|----------|
| Cell 1   | Cell 2   |
`);

// The markdown is parsed and rendered as rich HTML in the editor
```
```

--------------------------------

### Indented Code Block Example

Source: https://github.com/aguingand/tiptap-markdown/blob/main/example/src/data/content.md

Shows the usage of indented code blocks in Markdown. Indented blocks are treated as preformatted text and are useful for displaying code snippets without explicit language fences.

```text
// Some comments
line 1 of code
line 2 of code
line 3 of code
```

--------------------------------

### Migrate Basic Editor Initialization

Source: https://github.com/aguingand/tiptap-markdown/blob/main/docs/migration.md

Demonstrates the transition from the deprecated createMarkdownEditor wrapper to the standard Tiptap Editor instance using the Markdown extension. It also updates the method for retrieving markdown output from the editor instance.

```javascript
import { Editor } from '@tiptap/core';
import { Markdown } from 'tiptap-markdown';

const editor = new Editor({
  extensions: [
    Markdown,
  ],
});
const markdownOutput = editor.storage.markdown.getMarkdown();
```

--------------------------------

### Configure Markdown Extension Options

Source: https://github.com/aguingand/tiptap-markdown/blob/main/docs/migration.md

Shows how to move markdown configuration options from the top-level editor object into the Markdown extension's configure method.

```javascript
const editor = new Editor({
  extensions: [
    Markdown.configure({
      breaks: true,
    })
  ],
});
```

--------------------------------

### Define JavaScript Function with Syntax Highlighting

Source: https://github.com/aguingand/tiptap-markdown/blob/main/example/src/data/content.md

Demonstrates how to define a JavaScript function and log the output. This snippet uses standard Markdown code fences with language specification for syntax highlighting.

```javascript
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```

--------------------------------

### Markdown.configure() - Configuration Options

Source: https://context7.com/aguingand/tiptap-markdown/llms.txt

Configure the Markdown extension with various options to control parsing and serialization behavior.

```APIDOC
## Markdown.configure() - Configuration Options

Configure the Markdown extension with various options to control parsing and serialization behavior.

```javascript
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import { Markdown } from 'tiptap-markdown';

const editor = new Editor({
    content: '# Document',
    extensions: [
        StarterKit,
        Markdown.configure({
            html: true,                  // Allow HTML input/output
            tightLists: true,            // No <p> inside <li> in markdown output
            tightListClass: 'tight',     // Add class to <ul> for tight list styling
            bulletListMarker: '-',       // Character for unordered list items
            linkify: false,              // Auto-convert URLs to links
            breaks: false,               // Convert \n to <br>
            transformPastedText: true,   // Parse pasted markdown text
            transformCopiedText: true,   // Copy as markdown format
        }),
    ],
});
```
```

--------------------------------

### Configure Code Blocks for Language Support

Source: https://context7.com/aguingand/tiptap-markdown/llms.txt

Demonstrates how to configure the Tiptap code block extension to preserve language identifiers when exporting to Markdown.

```javascript
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import CodeBlock from '@tiptap/extension-code-block';
import { Markdown } from 'tiptap-markdown';

const editor = new Editor({
    content: '',
    extensions: [
        StarterKit.configure({ codeBlock: false }),
        CodeBlock.configure({
            languageClassPrefix: 'language-',
        }),
        Markdown,
    ],
});

editor.commands.setContent(`\n\`\`\`javascript\nfunction greet(name) {\n    return \`Hello, \${name}!\`;\n}\n\`\`\`\n\n\`\`\`python\ndef greet(name):\n    return f"Hello, {name}!"\n\`\`\`\n`);

const output = editor.storage.markdown.getMarkdown();
```

--------------------------------

### Migrate Custom Extensions to addStorage

Source: https://github.com/aguingand/tiptap-markdown/blob/main/docs/migration.md

Illustrates the replacement of createMarkdownExtension with the Tiptap addStorage API. This allows nodes and marks to define their own markdown serialization and parsing logic directly within the extension definition.

```javascript
const CustomNode = Node.create({
  addStorage() {
    return {
      markdown: {
        serialize() {},
        parse: {},
      }
    }
  }
});

new Editor({
  extensions: [
    CustomNode,
  ]
});
```

--------------------------------

### Configure Tight List Output

Source: https://context7.com/aguingand/tiptap-markdown/llms.txt

Configures the markdown output format for lists. Enabling tight lists removes paragraph wrappers inside list items, and allows customization of bullet markers.

```javascript
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import { Markdown } from 'tiptap-markdown';

const editor = new Editor({
    extensions: [
        StarterKit,
        Markdown.configure({
            tightLists: true,
            tightListClass: 'tight',
            bulletListMarker: '-',
        }),
    ],
});

editor.commands.toggleTight();
```

--------------------------------

### Export Editor Content as Markdown

Source: https://context7.com/aguingand/tiptap-markdown/llms.txt

Shows how to retrieve the current editor content as a markdown string using `editor.storage.markdown.getMarkdown()`, useful for saving or real-time synchronization.

```javascript
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import { Markdown } from 'tiptap-markdown';

const editor = new Editor({
    content: '# Title\n\nSome **bold** text',
    extensions: [StarterKit, Markdown],
});

// Get markdown output
const markdownOutput = editor.storage.markdown.getMarkdown();

console.log(markdownOutput);
// Output:
// # Title
//
// Some **bold** text

// Use in real-time sync
editor.on('update', () => {
    const markdown = editor.storage.markdown.getMarkdown();
    saveToDatabase(markdown);
});
```

--------------------------------

### Configure Markdown Extension Options

Source: https://github.com/aguingand/tiptap-markdown/blob/main/README.md

Customizing the behavior of the Markdown extension, such as enabling HTML support, list formatting, and linkification.

```javascript
Markdown.configure({
  html: true,
  tightLists: true,
  tightListClass: 'tight',
  bulletListMarker: '-',
  linkify: false,
  breaks: false,
  transformPastedText: false,
  transformCopiedText: false,
})
```

--------------------------------

### Set Editor Content using Markdown

Source: https://context7.com/aguingand/tiptap-markdown/llms.txt

Demonstrates how to replace the editor's content with new markdown text using `editor.commands.setContent()`, which automatically parses the markdown into rich HTML.

```javascript
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import { Markdown } from 'tiptap-markdown';

const editor = new Editor({
    content: '',
    extensions: [StarterKit, Markdown],
});

// Set content using markdown syntax
editor.commands.setContent(`
# New Document

This is **bold** and this is *italic*.

## Code Example

\
\
python
def hello():
    print("Hello, World!")
\
\

| Column 1 | Column 2 |
|----------|----------|
| Cell 1   | Cell 2   |
`);

// The markdown is parsed and rendered as rich HTML in the editor
```

--------------------------------

### Implement Vue 3 Markdown Editor Component

Source: https://context7.com/aguingand/tiptap-markdown/llms.txt

A complete Vue 3 component using Tiptap and the Markdown extension. It synchronizes a textarea input with the rich text editor instance.

```vue
<template>
    <div class="editor-container">
        <div class="markdown-input">
            <textarea v-model="markdown" @input="handleInput"></textarea>
        </div>
        <div class="rich-editor">
            <EditorContent :editor="editor" />
        </div>
    </div>
</template>

<script>
import { Editor, EditorContent } from '@tiptap/vue-3';
import StarterKit from '@tiptap/starter-kit';
import { Markdown } from 'tiptap-markdown';

export default {
    components: { EditorContent },
    data() {
        return {
            editor: null,
            markdown: '',
        };
    },
    methods: {
        updateMarkdownOutput() {
            this.markdown = this.editor.storage.markdown.getMarkdown();
        },
        handleInput() {
            this.editor.commands.setContent(this.markdown);
        },
    },
    mounted() {
        this.editor = new Editor({
            extensions: [
                Markdown.configure({
                    transformPastedText: true,
                    transformCopiedText: true,
                }),
                StarterKit,
            ],
            content: '# Welcome\n\nStart editing...',
            onUpdate: () => {
                this.updateMarkdownOutput();
            },
        });
        this.updateMarkdownOutput();
    },
    beforeUnmount() {
        this.editor.destroy();
    },
};
</script>
```

--------------------------------

### editor.storage.markdown.getMarkdown() - Export Markdown

Source: https://context7.com/aguingand/tiptap-markdown/llms.txt

Retrieve the current editor content as a markdown string for storage or display.

```APIDOC
## editor.storage.markdown.getMarkdown() - Export Markdown

Retrieve the current editor content as a markdown string for storage or display.

```javascript
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import { Markdown } from 'tiptap-markdown';

const editor = new Editor({
    content: '# Title\n\nSome **bold** text',
    extensions: [StarterKit, Markdown],
});

// Get markdown output
const markdownOutput = editor.storage.markdown.getMarkdown();

console.log(markdownOutput);
// Output:
// # Title
//
// Some **bold** text

// Use in real-time sync
editor.on('update', () => {
    const markdown = editor.storage.markdown.getMarkdown();
    saveToDatabase(markdown);
});
```
```

--------------------------------

### Configure Clipboard Markdown Transformation

Source: https://context7.com/aguingand/tiptap-markdown/llms.txt

Enables automatic parsing of pasted markdown text into rich content and exports copied content as markdown. This ensures a seamless workflow between external markdown sources and the editor.

```javascript
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import { Markdown } from 'tiptap-markdown';

const editor = new Editor({
    content: '',
    extensions: [
        StarterKit,
        Markdown.configure({
            transformPastedText: true,
            transformCopiedText: true,
        }),
    ],
});
```

--------------------------------

### Insert Markdown Content at Position

Source: https://context7.com/aguingand/tiptap-markdown/llms.txt

Demonstrates how to use the insertContentAt command to inject Markdown strings into the editor at either the current cursor position or a specific document range.

```javascript
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import { Markdown } from 'tiptap-markdown';

const editor = new Editor({
    content: '# Document\n\nFirst paragraph.\n\nLast paragraph.',
    extensions: [StarterKit, Markdown],
});

// Insert markdown at cursor position
editor.commands.insertContentAt(
    editor.state.selection.from,
    '**Important note:** This was inserted!'
);

// Insert at specific position (after first paragraph)
editor.commands.insertContentAt(
    { from: 25, to: 25 },
    '\n\n- Inserted list item 1\n- Inserted list item 2\n'
);
```

--------------------------------

### Manipulate Markdown Content in Editor

Source: https://github.com/aguingand/tiptap-markdown/blob/main/README.md

Using editor commands to set content via markdown strings and retrieving the current editor state as a markdown string.

```javascript
editor.commands.setContent('**test**');
editor.storage.markdown.getMarkdown();
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.