@fsegurai/marked-extended-comments

v17.0.0

Published

9 days ago

Marked extension for collaborative comments and annotations

0High
0Medium
0Low

fsegurai

extensions javascript library markdown markedjs marked-extended-comments parser syntax typescript

An extension library for Marked.js to enhance Markdown rendering.

@fsegurai/marked-extended-comments Marked extension for collaborative comments and annotations

🎯 Overview

The marked-extended-comments extension brings powerful collaborative commenting capabilities directly to your Markdown documents. Perfect for documentation workflows, content review processes, and team collaboration, this extension enables inline and block comments with rich metadata, status tracking, and visibility controls.

✨ Key Features

💬 Dual Comment Modes: Inline comments for quick annotations, block comments for detailed feedback
🎨 7 Comment Types: Note, Question, Suggestion, Issue, Internal, Review, and Todo
🔒 Visibility Controls: Public, private, dev-only, and editors-only visibility levels
✅ Status Tracking: Open, resolved, and archived status management
📊 Priority Levels: Low, medium, and high priority classification
🏷️ Tagging System: Organize comments with custom tags
👥 Author Attribution: Track who wrote each comment with dates
🧵 Comment Threading: Reply to comments with parent-child relationships
🎨 Customizable: Full control over styling, templates, and behavior
♿ Accessible: Semantic HTML with proper ARIA attributes
🔄 Full Markdown Support: Rich content within block comments
⚡ Callback Hooks: React to status changes and visibility toggles

🎪 Live Demo

Experience collaborative commenting in action: View Demo

Installation

To add @fsegurai/marked-extended-comments along with Marked.js to your package.json use the following commands.

bun install @fsegurai/marked-extended-comments marked@>=17.0.0 --save

Usage

Basic Usage

Import @fsegurai/marked-extended-comments and apply it to your Marked instance as shown below.

Quick Start

Basic Syntax

Comments use two syntaxes:

Inline: :::comment{properties}text::: - For quick annotations within text
Block: ::::comment{properties}...::::commentend - For detailed, standalone comments

Inline: This text has :::comment{author="Alice"}a note::: here.

Block:
::::comment{author="Bob" type="review"}
This section needs revision.
::::commentend

import { marked } from 'marked';
import markedExtendedComments from '@fsegurai/marked-extended-comments';

// or UMD script
// <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
// <script src="https://cdn.jsdelivr.net/npm/@fsegurai/marked-extended-comments/lib/index.umd.js"></script>

marked.use(markedExtendedComments());

### Installation

Install the package using your preferred package manager:

```bash
# Using Bun (recommended)
bun add @fsegurai/marked-extended-comments

# Using npm
npm install @fsegurai/marked-extended-comments

# Using yarn
yarn add @fsegurai/marked-extended-comments

# Using pnpm
pnpm add @fsegurai/marked-extended-comments

Basic Implementation

import { marked } from 'marked';
import markedExtendedComments from '@fsegurai/marked-extended-comments';

// Import styles (required for functionality)
import '@fsegurai/marked-extended-comments/styles/comments.css';
// Optional: Import theme for styled appearance
import '@fsegurai/marked-extended-comments/styles/comments-theme.css';

// Register the extension
marked.use(markedExtendedComments());

// Your markdown content with comments
const markdown = `
# Document Review

This text has :::comment{author="Alice" type="note"}needs verification::: embedded inline.

::::comment{author="Bob" type="review" status="open" priority="high"}
This section needs major revision.

**Action items:**
- Verify statistics
- Add citations
- Update examples
::::commentend

Regular content continues here.
`;

// Parse and render
const html = marked.parse(markdown);
console.log(html);

Syntax & Usage

Inline Comment Syntax

Inline comments appear within text using triple colons:

:::comment{properties}text to comment on:::

Examples:

<!-- Basic inline comment -->
This is :::comment{author="Alice"}important text::: to note.

<!-- With type -->
:::comment{type="question"}Should we use API v2?:::

<!-- With multiple properties -->
:::comment{author="Bob" type="issue" priority="high"}critical bug:::

Block Comment Syntax

Block comments are standalone sections with full Markdown support:

::::comment{properties}
Content here...
Can include **markdown** formatting.
::::commentend

Examples:

<!-- Basic block comment -->
::::comment{author="Alice" type="review"}
Please review this section.
::::commentend

<!-- With nested Markdown -->
::::comment{type="suggestion"}
Consider these improvements:

1. Add more examples
2. Include code snippets
3. Link to external resources

**Priority:** Medium
::::commentend

<!-- Complex comment with all features -->
::::comment{
  author="Team Lead"
  date="2026-02-17"
  type="review"
  status="open"
  priority="high"
  tags="milestone,urgent"
  id="comment-123"
}
## Critical Review

This section requires immediate attention before release.

### Issues Found:
- Missing error handling
- Incomplete examples
- Outdated references

### Action Items:
- [ ] Fix error handling
- [ ] Add comprehensive examples
- [ ] Update all references

**Deadline:** End of week
::::commentend


### Content Support

The extension supports **different content levels** for inline and block comments:

**Inline Comments:**
- ✅ Plain text annotations
- ✅ Brief notes and markers
- ✅ Quick questions or suggestions
- ❌ No nested Markdown (use block comments instead)

**Block Comments:**
- ✅ **Full Markdown syntax** including:
  - Headings and paragraphs
  - Lists (ordered, unordered, task lists)
  - Code blocks with syntax highlighting
  - Tables
  - Links and images
  - Bold, italic, and other formatting
  - Nested blockquotes
  - Inline code and HTML

All comments are rendered with **semantic HTML** and include proper **accessibility attributes** for screen readers.

### Importing Styles

Starting from version 17.0.0, this extension **does not automatically inject styles**. You must import the CSS or SCSS files manually to ensure proper styling.

#### Option 1: Using CSS (Recommended for most projects)

```javascript
// Import minimal structural styles (required for functionality)
import '@fsegurai/marked-extended-comments/styles/comments.css';

// Optional: Import the complete theme
import '@fsegurai/marked-extended-comments/styles/comments-theme.css';

Or in your HTML:

<link rel="stylesheet" href="node_modules/@fsegurai/marked-extended-comments/styles/comments.css">
<link rel="stylesheet" href="node_modules/@fsegurai/marked-extended-comments/styles/comments-theme.css">

Or using CDN:

<!-- Latest version -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fsegurai/marked-extended-comments@latest/styles/comments.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fsegurai/marked-extended-comments@latest/styles/comments-theme.css">

<!-- Or lock to a specific version (recommended for production) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fsegurai/[email protected]/styles/comments.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fsegurai/[email protected]/styles/comments-theme.css">

Option 2: Using SCSS (For customization)

// Import structural styles with customizable variables
@import '@fsegurai/marked-extended-comments/styles/comments.scss';

// Optional: Import theme with customizable variables
@import '@fsegurai/marked-extended-comments/styles/comments-theme.scss';

// Customize SCSS variables before importing (optional)
$comment-border-width: 3px;
$comment-padding: 1rem 1.5rem;
@import '@fsegurai/marked-extended-comments/styles/comments-theme.scss';

Available Style Files

| File | Purpose | Required | |-----------------------------|------------------------------------------|-----------------------| | styles/comments.css | Minimal structural CSS for functionality | ✅ Yes | | styles/comments.scss | SCSS version with customizable variables | ✅ Yes (if using SCSS) | | styles/comments-theme.css | Complete theme with all comment types | ❌ Optional | | styles/comments-theme.scss| SCSS theme with customizable variables | ❌ Optional |

Angular Integration

For Angular projects using ngx-markdown:

// In your angular.json, add the CSS files to styles array:
{
  "styles": [
    "node_modules/@fsegurai/marked-extended-comments/styles/comments.css",
    "node_modules/@fsegurai/marked-extended-comments/styles/comments-theme.css"
  ]
}

// Or import in your global styles.scss:
@import '@fsegurai/marked-extended-comments/styles/comments.scss';
@import '@fsegurai/marked-extended-comments/styles/comments-theme.scss';

Vanilla HTML/JavaScript Example

Complete example for projects without build tools:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Marked Extended Comments Example</title>
  
  <!-- Import Marked.js from CDN -->
  <script src="https://cdn.jsdelivr.net/npm/marked@17/lib/marked.umd.js"></script>
  
  <!-- Import Comments Extension from CDN -->
  <script src="https://cdn.jsdelivr.net/npm/@fsegurai/marked-extended-comments@latest/dist/index.umd.js"></script>
  
  <!-- Import Comment Styles from CDN -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fsegurai/marked-extended-comments@latest/styles/comments.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fsegurai/marked-extended-comments@latest/styles/comments-theme.css">
</head>
<body>
  <div id="content"></div>

  <script>
    // Configure marked with the comments extension
    marked.use(markedExtendedComments({
      showComments: true,
      showResolvedComments: false
    }));

    // Your markdown content
    const markdown = `
# Document with Comments

This has :::comment{author="Alice" type="note"}an inline comment::: here.

::::comment{author="Bob" type="review" status="open"}
This section needs review before publishing.
::::commentend
    `;

    // Render the markdown
    document.getElementById('content').innerHTML = marked.parse(markdown);
  </script>
</body>
</html>

Migration from v16 to v17

If you're upgrading from v16:

// v16 (old - no longer supported)
marked.use(markedExtendedComments({ injectStyles: true }));

// v17 (new approach)
import '@fsegurai/marked-extended-comments/styles/comment.css';
marked.use(markedExtendedComments());

Note: The injectStyles option has been completely removed in v17.0.0.

Styling Your Comments

This extension follows a separation of concerns approach, injecting only minimal structural CSS. Visual styling is completely separated for maximum flexibility.

Generated HTML Structure

Inline Comments:

<span class="marked-extended-comment marked-extended-comment-inline marked-extended-comment-type-note">
  <span class="marked-extended-comment-indicator" title="Comment by Alice">💬</span>
  <span class="marked-extended-comment-text">inline text</span>
</span>

Block Comments:


<div class="marked-extended-comment marked-extended-comment-block marked-extended-comment-type-review">
    <div class="marked-extended-comment-header">
        <span class="marked-extended-comment-icon">💬</span>
        <span class="marked-extended-comment-type-label">Review</span>
        <span class="marked-extended-comment-metadata">
      <span class="marked-extended-comment-author">By Alice</span>
      <span class="marked-extended-comment-status">Open</span>
    </span>
    </div>
    <div class="marked-extended-comment-body">
        <!-- Markdown content rendered here -->
    </div>
</div>

CSS Classes Reference

| Class | Purpose | Type | |--------------------------------------------|-------------------------|--------| | .marked-extended-comment | Base comment wrapper | Both | | .marked-extended-comment-inline | Inline comment style | Inline | | .marked-extended-comment-block | Block comment style | Block | | .marked-extended-comment-type-note | Note type styling | Both | | .marked-extended-comment-type-review | Review type styling | Both | | .marked-extended-comment-type-question | Question type styling | Both | | .marked-extended-comment-type-suggestion | Suggestion type styling | Both | | .marked-extended-comment-indicator | Inline comment icon | Inline | | .marked-extended-comment-text | Inline comment text | Inline | | .marked-extended-comment-header | Block comment header | Block | | .marked-extended-comment-icon | Block comment icon | Block | | .marked-extended-comment-type-label | Type label text | Block | | .marked-extended-comment-metadata | Author/status info | Block | | .marked-extended-comment-body | Block comment content | Block |

Complete Styling Example

/* Base comment styles */
.marked-extended-comment {
    transition: all 0.2s ease;
}

/* Inline Comments */
.marked-extended-comment-inline {
    background: rgba(255, 235, 59, 0.2);
    border-bottom: 2px dashed rgba(255, 235, 59, 0.8);
    padding: 0 4px;
    cursor: help;
    border-radius: 2px;
    position: relative;
}

.marked-extended-comment-inline:hover {
    background: rgba(255, 235, 59, 0.3);
    border-bottom-color: rgba(255, 235, 59, 1);
}

.marked-extended-comment-indicator {
    font-size: 0.875em;
    opacity: 0.8;
    margin-right: 2px;
}

/* Block Comments */
.marked-extended-comment-block {
    padding: 1rem;
    margin: 1rem 0;
    border-left: 4px solid;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.03);
}

.marked-extended-comment-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.marked-extended-comment-icon {
    font-size: 1.2em;
}

.marked-extended-comment-type-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
}

.marked-extended-comment-metadata {
    margin-left: auto;
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.6);
}

.marked-extended-comment-body {
    line-height: 1.6;
}

/* Comment Types - Note */
.marked-extended-comment-type-note {
    border-color: #2196F3;
}

.marked-extended-comment-type-note.marked-extended-comment-inline {
    background: rgba(33, 150, 243, 0.15);
    border-bottom-color: rgba(33, 150, 243, 0.6);
}

.marked-extended-comment-type-note.marked-extended-comment-block {
    background: rgba(33, 150, 243, 0.05);
}

.marked-extended-comment-type-note .marked-extended-comment-type-label {
    color: #2196F3;
}

/* Comment Types - Review */
.marked-extended-comment-type-review {
    border-color: #9C27B0;
}

.marked-extended-comment-type-review.marked-extended-comment-inline {
    background: rgba(156, 39, 176, 0.15);
    border-bottom-color: rgba(156, 39, 176, 0.6);
}

.marked-extended-comment-type-review.marked-extended-comment-block {
    background: rgba(156, 39, 176, 0.05);
}

.marked-extended-comment-type-review .marked-extended-comment-type-label {
    color: #9C27B0;
}

/* Comment Types - Question */
.marked-extended-comment-type-question {
    border-color: #FF9800;
}

.marked-extended-comment-type-question.marked-extended-comment-inline {
    background: rgba(255, 152, 0, 0.15);
    border-bottom-color: rgba(255, 152, 0, 0.6);
}

.marked-extended-comment-type-question.marked-extended-comment-block {
    background: rgba(255, 152, 0, 0.05);
}

.marked-extended-comment-type-question .marked-extended-comment-type-label {
    color: #FF9800;
}

/* Comment Types - Suggestion */
.marked-extended-comment-type-suggestion {
    border-color: #4CAF50;
}

.marked-extended-comment-type-suggestion.marked-extended-comment-inline {
    background: rgba(76, 175, 80, 0.15);
    border-bottom-color: rgba(76, 175, 80, 0.6);
}

.marked-extended-comment-type-suggestion.marked-extended-comment-block {
    background: rgba(76, 175, 80, 0.05);
}

.marked-extended-comment-type-suggestion .marked-extended-comment-type-label {
    color: #4CAF50;
}

Dark Mode Support

/* Light theme */
body.light .marked-extended-comment-block {
    background: rgba(0, 0, 0, 0.03);
}

body.light .marked-extended-comment-metadata {
    color: rgba(0, 0, 0, 0.6);
}

body.light .marked-extended-comment-body {
    color: #24292e;
}

/* Dark theme */
body.dark .marked-extended-comment-block {
    background: rgba(255, 255, 255, 0.05);
}

body.dark .marked-extended-comment-metadata {
    color: rgba(255, 255, 255, 0.6);
}

body.dark .marked-extended-comment-body {
    color: #d1d5da;
}

body.dark .marked-extended-comment-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

SVG Icon Styling

The extension uses SVG icons for each comment type. You can customize their appearance:

/* Base SVG icon styling */
.comment-icon {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
}

/* Larger icons in block comment headers */
.marked-extended-comment-icon .comment-icon {
    width: 20px;
    height: 20px;
}

/* Smaller icons for inline comments */
.marked-extended-comment-indicator .comment-icon {
    width: 14px;
    height: 14px;
}

/* Color icons by comment type */
.marked-extended-comment-type-note .comment-icon {
    color: #2196F3;
}

.marked-extended-comment-type-question .comment-icon {
    color: #9C27B0;
}

.marked-extended-comment-type-suggestion .comment-icon {
    color: #4CAF50;
}

.marked-extended-comment-type-issue .comment-icon {
    color: #F44336;
}

.marked-extended-comment-type-internal .comment-icon {
    color: #607D8B;
}

.marked-extended-comment-type-review .comment-icon {
    color: #FF9800;
}

.marked-extended-comment-type-todo .comment-icon {
    color: #00BCD4;
}

Status-Based Styling

/* Status indicators */
.marked-extended-comment-status {
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
}

.marked-extended-comment[data-status="open"] .marked-extended-comment-status {
    background: #22863a;
    color: white;
}

.marked-extended-comment[data-status="resolved"] .marked-extended-comment-status {
    background: #6f42c1;
    color: white;
}

.marked-extended-comment[data-status="pending"] .marked-extended-comment-status {
    background: #f66a0a;
    color: white;
}

Tooltip for Inline Comments

/* Add tooltip on hover */
.marked-extended-comment-inline::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    margin-bottom: 4px;
}

.marked-extended-comment-inline:hover::after {
    opacity: 1;
}

Copy Demo Theme

For complete styling: comment-theme.css

Check the demo to see all comment types and styles in action.

Inline Comments

Inline comments appear directly within text, perfect for quick annotations and feedback without disrupting flow.

When to Use Inline Comments

✅ Quick annotations or clarifications
✅ Marking specific words or phrases
✅ Brief questions or suggestions
✅ Highlighting issues inline with content
❌ Detailed feedback (use block comments)
❌ Multi-line content (use block comments)

Inline Comment Examples

Basic Annotation:

This text has :::comment{author="Alice" type="note"}needs verification::: here.

Question Inline:

The API :::comment{type="question"}returns JSON or XML?::: supports multiple formats.

Issue Marking:

:::comment{type="issue" priority="high"}Outdated information::: needs immediate update.

Suggestion:

Consider :::comment{type="suggestion"}using async/await instead::: for better readability.

Multiple Inline Comments:

This section covers :::comment{author="Alice"}topic A::: and :::comment{author="Bob"}topic B::: comprehensively.

With Status:

:::comment{status="resolved"}Fixed in v2.0::: This issue has been addressed.

Inline Comment Best Practices

Keep them short - Inline comments should be brief
Use appropriate types - Match the comment type to its purpose
Add context - Include author for team workflows
Don't overuse - Too many inline comments reduce readability

Block Comments

Block comments are standalone sections with full Markdown support, ideal for detailed feedback and comprehensive notes.

When to Use Block Comments

✅ Detailed feedback and explanations
✅ Multiple action items or tasks
✅ Code examples and technical details
✅ Structured review comments
✅ Internal documentation notes
✅ Rich formatting requirements

Block Comment Examples

Editorial Review:

::::comment{author="Chief Editor" type="review" priority="high"}
This introduction needs strengthening.

**Suggestions:**
- Add a compelling hook
- Include recent statistics
- State the main thesis clearly

**Deadline:** Friday EOD
::::commentend

Technical Issue:

::::comment{type="issue" status="open" priority="high"}
## Memory Leak Detected

The event handler in line 42 isn't being cleaned up properly.

### Reproduction Steps:
1. Navigate to the dashboard
2. Click refresh 10+ times
3. Check memory usage

### Solution:
\`\`\`javascript
// Add cleanup in useEffect
return () => {
  eventEmitter.off('update', handler);
};
\`\`\`

**Assigned to:** DevTeam
::::commentend

Internal Notes:

::::comment{type="internal" visibility="dev-only"}
**Implementation Details:**

This is a temporary workaround for the upstream bug.
Expected fix in library v2.1.0 (Q2 2026).

### Tracking:
- Issue: #1234
- PR: #5678
- Docs: [link]

**TODO:** Remove this workaround after upgrade.
::::commentend

Task List:

::::comment{type="todo" author="Project Manager" tags="sprint-5"}
## Sprint 5 Tasks

- [ ] Complete API documentation
- [ ] Add code examples  
- [x] Review with team
- [ ] Update changelog
- [ ] Deploy to staging

**Due:** End of sprint (Feb 28)
::::commentend

Threaded Comments:

::::comment{author="Alice" type="review" id="comment-1"}
This section needs clarification on error handling.
::::commentend

::::comment{author="Bob" type="suggestion" replyTo="comment-1"}
Agreed. I suggest adding a flowchart showing the error flow:

1. Error occurs
2. Logged to system
3. User notified
4. Fallback executed
::::commentend

Status Tracking:

::::comment{type="issue" status="resolved"}
~~Authentication was failing for OAuth providers.~~

**Resolution:** Fixed in commit abc123
- Updated OAuth callback URL
- Added proper error handling
- Increased timeout to 30s

Tested on: Chrome, Firefox, Safari
::::commentend

Comment Types

The extension supports 7 comment types with automatic SVG icons and color coding, each designed for specific collaboration scenarios:

| Type | Icon | Color | Purpose | Best For | |----------------|------|--------|---------------------------------------|---------------------------------------| | note | 📄 | Blue | General annotations and documentation | Clarifications, explanations, context | | question | ❔ | Purple | Questions and queries | Requesting information, clarification | | suggestion | 💡 | Green | Improvement recommendations | Ideas, alternatives, optimizations | | issue | ⚠️ | Red | Problems, bugs, and critical items | Errors, blockers, urgent fixes | | internal | 🔒 | Grey | Internal team notes | Dev notes, implementation details | | review | 👁️ | Orange | Editorial and code review feedback | Content review, quality assurance | | todo | ✓ | Cyan | Action items and tasks | Task tracking, checklist items |

When to Use Each Type

NOTE (📄 Blue) - Documentation & Context

Use for general information, background context, and clarifications.

::::comment{type="note"}
**Context:** This section was added in response to user feedback requesting 
more detailed explanation of the authentication flow.
::::commentend

:::comment{type="note"}historical reference:::

Best practices:

✅ Provide context for readers
✅ Document decisions and rationale
✅ Link to related resources
❌ Don't use for urgent issues

QUESTION (❔ Purple) - Queries & Requests

Use when you need information, clarification, or feedback from others.

::::comment{type="question" author="Alice"}
Should we support OAuth 2.0 in addition to OAuth 1.0a?

Consider:
- User demand
- Implementation effort
- Security benefits
::::commentend

:::comment{type="question"}Is this API versioned?:::

Best practices:

✅ Be specific about what you need
✅ Provide context for your question
✅ Tag appropriate team members
❌ Don't assume answers

SUGGESTION (💡 Green) - Improvements & Ideas

Use for recommendations, alternatives, and optimization ideas.

::::comment{type="suggestion"}
Consider using a table format instead of a list for better readability:

| Feature | Status | Notes |
|---------|--------|-------|
| Auth    | ✓      | Complete |
| API     | In Progress | Due next week |
::::commentend

:::comment{type="suggestion"}try using async/await:::

Best practices:

✅ Offer constructive alternatives
✅ Explain the benefit
✅ Provide examples when possible
❌ Don't demand changes

ISSUE (⚠️ Red) - Problems & Bugs

Use for errors, blockers, and critical problems that need immediate attention.

::::comment{type="issue" priority="high" status="open"}
## Critical Bug

The authentication flow fails for users with special characters in their username.

**Affected:** ~15% of users
**Impact:** Cannot login
**Priority:** Immediate fix required

**Reproduction:**
1. Create account with username containing `@`
2. Attempt login
3. Observe 401 error
::::commentend

:::comment{type="issue"}broken link:::

Best practices:

✅ Include reproduction steps
✅ Set appropriate priority
✅ Track with status updates
❌ Don't use for minor suggestions

INTERNAL (🔒 Grey) - Team Notes

Use for internal documentation that shouldn't be in the final published version.

::::comment{type="internal" visibility="dev-only"}
**Technical Debt:**

This implementation is a temporary workaround. The proper solution requires
refactoring the entire authentication module, scheduled for Q3 2026.

**References:**
- Ticket: DEV-1234
- Design doc: [link]
- Original discussion: [link]
::::commentend

:::comment{type="internal"}cleanup needed:::

Best practices:

✅ Document technical decisions
✅ Track technical debt
✅ Set visibility to dev-only
❌ Don't include in public docs

REVIEW (👁️ Orange) - Editorial Feedback

Use for content and code review feedback, quality assurance notes.

::::comment{type="review" author="Senior Editor"}
## Editorial Review

**Strengths:**
- Clear structure
- Good examples
- Proper tone

**Areas for Improvement:**
1. Add section summary
2. Include more diagrams
3. Simplify technical jargon

**Verdict:** Approved with minor revisions
::::commentend

:::comment{type="review"}needs fact-checking:::

Best practices:

✅ Be constructive and specific
✅ Balance positive and critical feedback
✅ Provide actionable suggestions
❌ Don't be vague or overly critical

TODO (✓ Cyan) - Action Items

Use for task tracking, checklists, and action items.

::::comment{type="todo" tags="milestone,sprint-5"}
## Release Checklist

- [x] Complete all features
- [x] Write tests
- [ ] Update documentation
- [ ] Create changelog
- [ ] Tag release
- [ ] Deploy to production

**Due:** Feb 28, 2026
**Assigned:** DevOps team
::::commentend

:::comment{type="todo"}add unit tests:::

Best practices:

✅ Use task lists for clarity
✅ Set deadlines
✅ Assign responsibility
✅ Update status regularly
❌ Don't create orphaned tasks

Default Comment Type

You can set a default type in configuration:

marked.use(markedExtendedComments({
  defaultType: 'review'  // All comments without explicit type will be 'review'
}));

Configuration Options

The comment extension accepts comprehensive configuration options to customize behavior and appearance:

marked.use(markedExtendedComments({
  className: 'my-comment',
  showComments: true,
  defaultType: 'review',
  onStatusChange: (id, status) => console.log(`Comment ${id} status: ${status}`)
}));

Extension Options

| Option | Type | Default | Description | |-------------------------|------------|-----------------------------|-------------------------------------------------------| | className | string | 'marked-extended-comment' | Base CSS class name for all comment elements | | prefixId | string | 'comment' | Prefix for auto-generated comment IDs | | showComments | boolean | true | Whether to render comments in output | | enableInlineComments | boolean | true | Enable inline comment syntax (:::comment:::) | | enableBlockComments | boolean | true | Enable block comment syntax (::::comment::::) | | showMetadata | boolean | true | Display author, date, and other metadata | | showResolvedComments | boolean | false | Show comments marked as resolved | | defaultType | CommentType | 'note' | Default type when not specified | | defaultVisibility | CommentVisibility | 'public' | Default visibility level | | customizeToken | function | null | Function to customize comment tokens | | onVisibilityChange | function | null | Callback when comment visibility changes | | onStatusChange | function | null | Callback when comment status changes | | inlineTemplate | string | Built-in template | Custom HTML template for inline comments | | blockTemplate | string | Built-in template | Custom HTML template for block comments | | visibilityFilter | string[] | undefined | Array of visibility levels to show | | typeFilter | string[] | undefined | Array of comment types to show |

CommentType Values

CommentVisibility Values

'public' | 'private' | 'dev-only' | 'editors-only'

Configuration Examples

Hide All Comments:

marked.use(markedExtendedComments({
  showComments: false  // Useful for generating clean output
}));

Show Only Review Comments:

marked.use(markedExtendedComments({
  typeFilter: ['review', 'issue']  // Only show review and issue comments
}));

Hide Resolved Comments:

marked.use(markedExtendedComments({
  showResolvedComments: false  // Don't show resolved comments (default)
}));

Visibility Filtering:

marked.use(markedExtendedComments({
  visibilityFilter: ['public', 'editors-only']  // Hide dev-only and private
}));

Custom Class Names:

marked.use(markedExtendedComments({
  className: 'doc-comment',
  prefixId: 'doc-cmt'
}));
// Generates: <span class="doc-comment doc-comment-inline" id="doc-cmt-1">

Disable Inline Comments:

marked.use(markedExtendedComments({
  enableInlineComments: false,  // Only block comments work
  enableBlockComments: true
}));

Hide Metadata:

marked.use(markedExtendedComments({
  showMetadata: false  // Don't show author, date, tags in rendered output
}));

Status Change Tracking:

const statusHistory = [];

marked.use(markedExtendedComments({
  onStatusChange: (commentId, newStatus) => {
    statusHistory.push({
      id: commentId,
      status: newStatus,
      timestamp: new Date().toISOString()
    });
    console.log(`Comment ${commentId} changed to ${newStatus}`);
  }
}));

Visibility Toggle Callback:

marked.use(markedExtendedComments({
  onVisibilityChange: (commentId, isVisible) => {
    console.log(`Comment ${commentId} is now ${isVisible ? 'visible' : 'hidden'}`);
    // Update UI, analytics, etc.
  }
}));

Custom Token Processing:

marked.use(markedExtendedComments({
  customizeToken: (token) => {
    // Add custom data
    if (token.meta.author) {
      token.meta.authorEmail = lookupEmail(token.meta.author);
    }
    
    // Auto-assign priority based on type
    if (token.meta.type === 'issue' && !token.meta.priority) {
      token.meta.priority = 'high';
    }
    
    // Log for debugging
    console.log('Processing comment:', token.meta);
  }
}));

Combined Configuration:

marked.use(markedExtendedComments({
  className: 'editorial-comment',
  defaultType: 'review',
  showResolvedComments: false,
  showMetadata: true,
  typeFilter: ['review', 'question', 'suggestion'],
  onStatusChange: (id, status) => {
    if (status === 'resolved') {
      notifyTeam(`Comment ${id} resolved`);
    }
  }
}));

Production vs Development:

const isProduction = process.env.NODE_ENV === 'production';

marked.use(markedExtendedComments({
  showComments: !isProduction,  // Hide comments in production
  visibilityFilter: isProduction 
    ? ['public']  // Only public in production
    : undefined   // All visibility levels in development
}));

Properties

Comment syntax supports rich metadata through properties. Properties are specified in curly braces {key="value"} after the comment marker.

Property Reference

| Property | Type | Default | Description | Applies To | |--------------|-----------------------|------------|-----------------------------------------------|---------------| | author | string | - | Name of comment author | Both | | date | string (ISO 8601) | - | Comment creation/modification date | Both | | type | CommentType | 'note' | Comment type (see Comment Types) | Both | | status | CommentStatus | 'open' | Status: open, resolved, archived | Both | | visibility | CommentVisibility | 'public' | Visibility level (see below) | Both | | priority | 'low' | 'medium' | 'high' | - | Priority level | Both | | tags | string (comma-sep) | - | Comma-separated tags for organization | Both | | id | string | Auto-gen | Custom identifier for the comment | Both | | replyTo | string | - | ID of parent comment for threading | Block only | | className | string | - | Additional CSS class(es) to apply | Both |

Visibility Levels

| Level | Description | Use Case | |-----------------|----------------------------------------------|----------------------------------| | public | Visible to all readers (default) | Published documentation comments | | private | Visible only to authorized users | Confidential feedback | | dev-only | Visible only to development team | Technical notes, implementation | | editors-only | Visible only to content editors | Editorial workflow comments |

Property Examples

Basic Properties:

:::comment{author="Alice" type="note"}simple comment:::

::::comment{author="Bob" date="2026-02-17"}
Comment with date.
::::commentend

Full Property Set:

::::comment{
  author="Team Lead"
  date="2026-02-17"
  type="review"
  status="open"
  visibility="editors-only"
  priority="high"
  tags="urgent,milestone,release"
  id="review-critical-section-1"
}
Comprehensive comment with all properties.
::::commentend

Comment Threading:

<!-- Parent comment -->
::::comment{author="Alice" type="review" id="comment-1"}
Initial review comment.
::::commentend

<!-- Reply to parent -->
::::comment{author="Bob" type="suggestion" replyTo="comment-1"}
Response to Alice's review.
::::commentend

<!-- Another reply to parent -->
::::comment{author="Charlie" type="note" replyTo="comment-1"}
Additional notes on the same topic.
::::commentend

Priority Levels:

::::comment{type="issue" priority="low"}
Minor typo in documentation.
::::commentend

::::comment{type="issue" priority="medium"}
Feature request from customer.
::::commentend

::::comment{type="issue" priority="high"}
Critical security vulnerability found!
::::commentend

Tagging for Organization:

::::comment{tags="docs,api,v2"}
Documentation for API v2 endpoints.
::::commentend

::::comment{tags="bug,regression,priority"}
Regression bug introduced in last release.
::::commentend

::::comment{tags="feature-request,enhancement"}
User-requested feature enhancement.
::::commentend

Status Workflow:

<!-- New comment -->
::::comment{status="open" author="Alice"}
This section needs review.
::::commentend

<!-- After review -->
::::comment{status="resolved" author="Bob"}
Reviewed and approved. Changes implemented.
::::commentend

<!-- For historical reference -->
::::comment{status="archived"}
Old comment kept for historical context.
::::commentend

Visibility Control:

<!-- Public comment (default) -->
::::comment{visibility="public"}
This comment appears in published docs.
::::commentend

<!-- Development team only -->
::::comment{visibility="dev-only"}
Technical implementation note for developers.
::::commentend

<!-- Editorial team only -->
::::comment{visibility="editors-only"}
Editorial feedback not for public view.
::::commentend

<!-- Private comment -->
::::comment{visibility="private"}
Confidential feedback or sensitive information.
::::commentend

Custom Styling with className:

::::comment{className="highlighted-comment"}
This comment gets additional CSS class for custom styling.
::::commentend

::::comment{className="urgent critical"}
Multiple classes can be added space-separated.
::::commentend

Inline with Properties:

Regular text with :::comment{author="Alice" type="question" priority="high"}critical question::: inline.

Status-tracked :::comment{status="resolved" type="issue"}resolved issue::: in text.

Visibility-controlled :::comment{visibility="dev-only"}dev note::: for internal team.

Property Validation

The extension validates properties and provides defaults:

// If type is invalid, defaults to 'note'
::::comment{type="invalid-type"}
Content
::::commentend
// Renders as type="note"

// If status is invalid, defaults to 'open'
::::comment{status="invalid"}
Content
::::commentend
// Renders as status="open"

// Auto-generated ID if not provided
::::comment{author="Alice"}
Content
::::commentend
// Gets ID like: comment-1234567890-1

Date Formatting

Dates should be in ISO 8601 format for proper parsing:

<!-- Recommended formats -->
::::comment{date="2026-02-17"}
Date only
::::commentend

::::comment{date="2026-02-17T14:30:00Z"}
Date and time with timezone
::::commentend

::::comment{date="2026-02-17T14:30:00-05:00"}
Date and time with timezone offset
::::commentend

The extension will format dates for display based on your locale settings.

Advanced Examples

Editorial Workflow

::::comment{author="Chief Editor" type="review" priority="high"}
This introduction lacks impact. Consider:

1. Start with a compelling statistic
2. Include a real-world example
3. State the main argument upfront

**Deadline:** End of week
::::commentend

Code Review Process

::::comment{author="Senior Dev" type="issue" status="open"}
This function has a potential memory leak in the event handler.

:::comment{type="suggestion"}Consider using WeakMap for automatic cleanup:::

**Priority:** Must fix before merge
::::commentend

Documentation Feedback

The API endpoint :::comment{type="question"}returns JSON or XML?::: can be called with optional parameters.

::::comment{type="note" author="API Team"}
**Note:** This endpoint will be deprecated in v3.0.

Migration guide: [link to docs]
::::commentend

Task Management

::::comment{type="todo" author="Project Manager" tags="sprint-5,docs"}
**Sprint Tasks:**

- [ ] Complete API documentation
- [ ] Add code examples
- [ ] Review with team
- [ ] Update changelog

*Due:* End of sprint
::::commentend

Internal Notes

::::comment{type="internal" visibility="dev-only"}
**Implementation Details:**

This is a temporary workaround until the upstream library fixes the bug.
Expected fix in v2.1.0 (Q2 2026).

See issue #1234 for tracking.
::::commentend

Status Tracking

::::comment{author="Alice" type="issue" status="resolved"}
~~The calculation was incorrect.~~

**Resolution:** Fixed in commit abc123
Formula updated to use correct constant.
::::commentend

::::comment{type="note" status="archived"}
Old implementation notes - kept for historical reference.
::::commentend

Visibility Control

::::comment{visibility="private"}
Private note only visible to authorized users.
::::commentend

::::comment{visibility="editors-only"}
Editorial team: Please review for tone and style.
::::commentend

::::comment{visibility="dev-only"}
Technical debt: Refactor this section when time permits.
::::commentend

Best Practices

1. Choose the Right Comment Mode

<!-- Good: Inline for quick notes -->
This API :::comment{type="question"}supports v1 or v2?::: accepts requests.

<!-- Avoid: Block for simple notes -->
::::comment{type="question"}
supports v1 or v2?
::::commentend

<!-- Good: Block for detailed feedback -->
::::comment{type="review"}
## Section Review

**Issues:**
- Missing error codes
- Incomplete examples

**Action items:**
- Add error code table
- Include 3+ examples
::::commentend

2. Use Appropriate Types

Match comment type to purpose for better organization:

<!-- Good: Correct types -->
:::comment{type="question"}How does caching work?:::
:::comment{type="issue"}Broken link:::
:::comment{type="suggestion"}Consider using a table:::

<!-- Avoid: Wrong types -->
:::comment{type="note"}CRITICAL BUG!:::  <!-- Should be 'issue' -->
:::comment{type="issue"}Nice job!:::  <!-- Should be 'note' -->

3. Set Proper Visibility

Control who sees comments based on audience:

<!-- Public documentation -->
::::comment{visibility="public" type="note"}
Reader-facing clarification visible in published docs.
::::commentend

<!-- Internal notes -->
::::comment{visibility="dev-only" type="internal"}
Implementation detail not for public consumption.
::::commentend

<!-- Editorial workflow -->
::::comment{visibility="editors-only" type="review"}
Editorial feedback for content team only.
::::commentend

4. Track Status Properly

Use status to manage workflow:

<!-- New feedback -->
::::comment{status="open"}
Issue found during review.
::::commentend

<!-- After addressing -->
::::comment{status="resolved"}
Issue fixed and verified.
::::commentend

<!-- Keep for history -->
::::comment{status="archived"}
Old comment kept for reference.
::::commentend

5. Use Threading for Discussions

Maintain comment threads with replyTo:

::::comment{author="Alice" id="thread-1"}
Original question about implementation.
::::commentend

::::comment{author="Bob" replyTo="thread-1"}
Answer to Alice's question.
::::commentend

::::comment{author="Charlie" replyTo="thread-1"}
Additional perspective on the discussion.
::::commentend

6. Add Meaningful Metadata

Include context for better collaboration:

<!-- Minimal (less useful) -->
::::comment{}
This needs work.
::::commentend

<!-- Better (more context) -->
::::comment{
  author="Senior Editor"
  date="2026-02-17"
  type="review"
  priority="high"
  tags="release-blocker"
}
This section needs significant revision before release.
::::commentend

7. Don't Overuse Comments

Too many comments reduce readability:

<!-- Avoid: Comment fatigue -->
:::comment{type="note"}word::: :::comment{type="note"}another::: 
:::comment{type="note"}more::: :::comment{type="note"}too many:::

<!-- Better: Consolidate related comments -->
::::comment{type="note"}
Multiple words here need attention: word, another, more, etc.
::::commentend

Troubleshooting

Comments Not Appearing

Problem: Comments don't render in output.

Solutions:

Verify extension is registered:

marked.use(markedExtendedComments());  // Don't forget this!

Check showComments configuration:

marked.use(markedExtendedComments({
  showComments: true  // Must be true
}));

Verify syntax is correct:

<!-- Correct -->
:::comment{author="Alice"}text:::

<!-- Wrong -->
::comment{author="Alice"}text::  <!-- ❌ Missing colon -->

Check if filtered out:

// Comments might be filtered
marked.use(markedExtendedComments({
  typeFilter: ['review'],  // Only shows review comments
  visibilityFilter: ['public']  // Only shows public comments
}));

Styling Not Applied

Problem: Comments appear unstyled.

Solutions:

Import CSS files:

import '@fsegurai/marked-extended-comments/styles/comment.css';
import '@fsegurai/marked-extended-comments/styles/comment-theme.css';

Check file paths in build configuration
Verify CSS specificity (use DevTools)
For CDN, check network tab for 404 errors

Inline Comments Breaking Layout

Problem: Inline comments disrupt text flow.

Solution:

.marked-extended-comment-inline {
  display: inline;
  white-space: nowrap;
}

.marked-extended-comment-content {
  display: inline;
}

Resolved Comments Still Showing

Problem: Comments marked as resolved still appear.

Solution:

marked.use(markedExtendedComments({
  showResolvedComments: false  // Default is false
}));

Or filter in markdown:

<!-- This will be hidden if showResolvedComments is false -->
::::comment{status="resolved"}
Resolved comment
::::commentend

Metadata Not Displaying

Problem: Author, date, and other metadata don't show.

Solution:

marked.use(markedExtendedComments({
  showMetadata: true  // Must be true
}));

Check CSS for metadata elements:

.marked-extended-comment-metadata {
  display: flex;  /* Not display: none */
}

Workflow Examples

Editorial Review Workflow

# Article Draft

## Introduction

::::comment{
  author="Chief Editor"
  type="review"
  status="open"
  priority="high"
  date="2026-02-17"
}
**Initial Review**

Strengths:
- Clear structure
- Good flow

Areas for improvement:
- Add compelling hook
- Include statistics
- Strengthen conclusion

**Status:** Needs revision
**Deadline:** Feb 20
::::commentend

The introduction :::comment{author="Editor" type="suggestion"}could start with a question::: begins with...

::::comment{author="Writer" replyTo="review-1" status="resolved"}
**Revision completed:**
- Added statistics from recent study
- Rewrote opening with question
- Strengthened final paragraph

**Ready for re-review**
::::commentend

Documentation Review Process

# API Documentation

## Authentication

:::comment{type="question" author="Tech Writer"}Supports OAuth 2.0?:::

::::comment{type="review" author="Senior Dev" priority="high"}
**Technical Review:**

Issues found:
1. Missing error codes
2. Incomplete example
3. No rate limiting info

\`\`\`javascript
// Add this example
const token = await authenticate({
  clientId: 'your-client-id',
  clientSecret: 'your-secret'
});
\`\`\`

**Must fix before publish**
::::commentend

::::comment{type="internal" visibility="dev-only"}
**Dev Note:** Update this after v2 API release.
Current docs reflect v1 endpoints.
::::commentend

Content Planning Workflow

# Content Calendar

::::comment{type="todo" tags="Q1-2026,content-plan"}
## Q1 Content Tasks

- [ ] Research trending topics
- [ ] Outline 5 articles
- [ ] Draft 3 tutorials
- [ ] Update existing content
- [ ] SEO optimization

**Assigned:** Content team
**Due:** March 31, 2026
::::commentend

## February Articles

1. :::comment{status="resolved"}Completed!::: Getting Started Guide
2. :::comment{status="open" priority="high"}In progress::: Advanced Features
3. :::comment{status="open"}Not started::: Best Practices

Code Review with Comments

# Implementation Notes

## Authentication Module

::::comment{type="issue" priority="high" author="Senior Dev"}
**Security Issue:**

The password hashing uses MD5 which is insecure.

**Required action:**
Use bcrypt with salt rounds >= 10

\`\`\`javascript
// Current (insecure)
const hash = md5(password);

// Required fix
const hash = await bcrypt.hash(password, 10);
\`\`\`

**Blocker for production**
::::commentend

The implementation :::comment{type="suggestion"}could use async/await::: handles errors...

Bug Tracking Workflow

# Known Issues

::::comment{type="issue" status="open" priority="high" id="bug-1234"}
## Memory Leak in Event Handler

**Description:** Memory usage increases over time in dashboard.

**Reproduction:**
1. Open dashboard
2. Navigate between tabs
3. Monitor memory (DevTools)
4. Memory grows continuously

**Impact:** High - affects all users
**Affected versions:** 2.1.0 - 2.1.5

**Assigned:** Performance Team
::::commentend

::::comment{replyTo="bug-1234" author="Dev" status="resolved"}
**Fix implemented:**
- Added proper cleanup in useEffect
- Removed circular references
- Added cleanup tests

**Fixed in:** v2.1.6
**Verified:** QA team
::::commentend

Framework Integration

React Integration

// CommentedMarkdown.tsx
import { marked } from 'marked';
import markedExtendedComments from '@fsegurai/marked-extended-comments';
import '@fsegurai/marked-extended-comments/styles/comment.css';
import '@fsegurai/marked-extended-comments/styles/comment-theme.css';
import { useEffect, useState } from 'react';

// Configure marked
marked.use(markedExtendedComments({
  showComments: true,
  showResolvedComments: false,
  onStatusChange: (id, status) => {
    console.log(\`Comment \${id} status changed to \${status}\`);
  }
}));

interface Props {
  content: string;
  showAllComments?: boolean;
}

export function CommentedMarkdown({ content, showAllComments = false }: Props) {
  const [html, setHtml] = useState('');
  
  useEffect(() => {
    // Reconfigure based on props
    marked.use(markedExtendedComments({
      showResolvedComments: showAllComments
    }));
    
    const parsed = marked.parse(content);
    setHtml(parsed);
  }, [content, showAllComments]);
  
  return (
    <div 
      className="markdown-with-comments"
      dangerouslySetInnerHTML={{ __html: html }} 
    />
  );
}

// Usage:
// <CommentedMarkdown content={markdown} showAllComments={isDevelopment} />

Vue 3 Integration

<script setup lang="ts">
import { marked } from 'marked';
import markedExtendedComments from '@fsegurai/marked-extended-comments';
import '@fsegurai/marked-extended-comments/styles/comment.css';
import '@fsegurai/marked-extended-comments/styles/comment-theme.css';
import { ref, computed, watch } from 'vue';

marked.use(markedExtendedComments({
  showComments: true,
  onStatusChange: (id, status) => {
    console.log(\`Comment \${id}: \${status}\`);
  }
}));

interface Props {
  content: string;
  showResolved?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  showResolved: false
});

const html = computed(() => {
  marked.use(markedExtendedComments({
    showResolvedComments: props.showResolved
  }));
  return marked.parse(props.content);
});

watch(() => props.showResolved, (newVal) => {
  console.log('Show resolved changed:', newVal);
});
</script>

<template>
  <div class="markdown-content" v-html="html" />
</template>

Angular Integration

// commented-markdown.component.ts
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { marked } from 'marked';
import markedExtendedComments from '@fsegurai/marked-extended-comments';

marked.use(markedExtendedComments({
  showComments: true,
  showResolvedComments: false
}));

@Component({
  selector: 'app-commented-markdown',
  template: \`<div [innerHTML]="parsedContent"></div>\`,
  styleUrls: [
    '../node_modules/@fsegurai/marked-extended-comments/styles/comment.css',
    '../node_modules/@fsegurai/marked-extended-comments/styles/comment-theme.css'
  ]
})
export class CommentedMarkdownComponent implements OnChanges {
  @Input() content: string = '';
  @Input() showResolved: boolean = false;
  parsedContent: SafeHtml = '';

  constructor(private sanitizer: DomSanitizer) {}

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['content'] || changes['showResolved']) {
      marked.use(markedExtendedComments({
        showResolvedComments: this.showResolved
      }));
      
      const html = marked.parse(this.content);
      this.parsedContent = this.sanitizer.bypassSecurityTrustHtml(html);
    }
  }
}

Contributing

Found a bug or have a feature request? Please open an issue on GitHub.

Related Resources

Available Extensions

| Extension | Package | Version | Description | |-------------|--------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------|----------------------------------------------------------------------| | All - Bundle | @fsegurai/marked-extended-bundle | npm | Includes all extensions in a single package for easy integration | | Accordion | @fsegurai/marked-extended-accordion | npm | Add collapsible accordion sections to your markdown | | Alert | @fsegurai/marked-extended-alert | npm | Create styled alert boxes for important information | | Comments | @fsegurai/marked-extended-comments | npm | Add comment sections with author and timestamp metadata | | Embeds | @fsegurai/marked-extended-embeds | npm | Easily embed content from various platforms (YouTube, Twitter, etc.) | | Footnote | @fsegurai/marked-extended-footnote | npm | Add footnotes with automatic numbering | | Kanban | @fsegurai/marked-extended-kanban | npm | Create kanban boards with customizable columns and cards | | Lists | @fsegurai/marked-extended-lists | npm | Enhanced list formatting options | | Slide | @fsegurai/marked-extended-slide | npm | Create slide decks directly from markdown content | | Spoiler | @fsegurai/marked-extended-spoiler | npm | Hide content behind spoiler tags | | Tables | @fsegurai/marked-extended-tables | npm | Advanced table formatting with cell spanning | | Tabs | @fsegurai/marked-extended-tabs | npm | Create tabbed content sections | | Timeline | @fsegurai/marked-extended-timeline | npm | Display content in an interactive timeline format | | Typographic | @fsegurai/marked-extended-typographic | npm | Improve typography with smart quotes, dashes, and more |

Demo Application

To see all extensions in action, check out the [DEMO].

To set up the demo locally, follow the next steps:

git clone https://github.com/fsegurai/marked-extensions.git
bun install
bun start

This will serve the application locally at http://[::1]:8000.

License

Licensed under MIT.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

🎯 Overview

✨ Key Features

🎪 Live Demo

Table of contents

Installation

Usage

Basic Usage

Quick Start

Basic Syntax

Basic Implementation

Syntax & Usage

Inline Comment Syntax

Block Comment Syntax

Option 2: Using SCSS (For customization)

Available Style Files

Angular Integration

Vanilla HTML/JavaScript Example

Migration from v16 to v17

Styling Your Comments

Generated HTML Structure

CSS Classes Reference

Complete Styling Example

Dark Mode Support

SVG Icon Styling

Status-Based Styling

Tooltip for Inline Comments

Copy Demo Theme

Inline Comments

When to Use Inline Comments

Inline Comment Examples

Inline Comment Best Practices

Block Comments

When to Use Block Comments

Block Comment Examples

Comment Types

When to Use Each Type

NOTE (📄 Blue) - Documentation & Context

QUESTION (❔ Purple) - Queries & Requests

SUGGESTION (💡 Green) - Improvements & Ideas

ISSUE (⚠️ Red) - Problems & Bugs

INTERNAL (🔒 Grey) - Team Notes

REVIEW (👁️ Orange) - Editorial Feedback

TODO (✓ Cyan) - Action Items

Default Comment Type

Configuration Options

Extension Options

CommentType Values

CommentVisibility Values

Configuration Examples

Properties

Property Reference

Visibility Levels

Property Examples

Property Validation

Date Formatting

Advanced Examples

Editorial Workflow

Code Review Process

Documentation Feedback

Task Management

Internal Notes

Status Tracking

Visibility Control

Best Practices

1. Choose the Right Comment Mode

2. Use Appropriate Types

3. Set Proper Visibility

4. Track Status Properly

5. Use Threading for Discussions

6. Add Meaningful Metadata

7. Don't Overuse Comments

Troubleshooting

Comments Not Appearing

Styling Not Applied