Introduction

Installation and Setup

npm install remark-gfm

Integration with Remark

import rehypeStringify from 'rehype-stringify'
import remarkGfm from 'remark-gfm'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import {read} from 'to-vfile'
import {unified} from 'unified'

const file = await unified()
  .use(remarkParse)
  .use(remarkGfm)
  .use(remarkRehype)
  .use(rehypeStringify)
  .process(await read('example.md'))

console.log(String(file))

Autolink Literals

Examples

Visit our website at www.company.com or contact us at support@company.com.
Follow us on https://twitter.com/company for updates.

Limitations and Best Practices:

• Autolinks must be surrounded by whitespace
• URLs with special characters might need explicit linking
• Some domains might require explicit http:// or https:// prefix

Footnotes

Basic Syntax

Here's a statement that needs a reference[^1].

[^1]: This is the reference text.

Examples

Here's a complex example[^example] with multiple footnotes[^multiple] demonstrating different use cases[^different].

[^example]: First footnote with simple text.
[^multiple]: Second footnote with multiple lines:
    - Supporting point 1
    - Supporting point 2
    - Supporting point 3
[^different]: Third footnote with `code` and [links](https://example.com).

Best Practices:

• Use meaningful reference labels
• Keep footnotes concise
• Consider using inline footnotes for brief additions
• Order footnotes logically

Strikethrough

Basic Syntax

~~Strikethrough text~~

Examples

1. Showing Changes:

• Original price: $99.99 Now: $79.99

2. Task Updates:

• Complete initial draft
• Review with team
• Publish document

3. Deprecated Features: Use legacy API Use new v2 API endpoints

Nested Formatting

• Bold strikethrough
• Italic strikethrough
• code strikethrough

Tables

Alignment Options: Left-aligned (Default)

| Header 1 | Header 2 | Header 3 |
| - | - | - |
| Row 1 | Data | Data |
| Row 2 | Data | Data |

Alignment Options: Right-aligned

| Header 1 | Header 2 | Header 3 |
| -: | -: | -: |
| Row 1 | Data | Data |
| Row 2 | Data | Data |

Alignment Options: Center-aligned

| Header 1 | Header 2 | Header 3 |
| :-: | :-: | :-: |
| Row 1 | Data | Data |
| Row 2 | Data | Data |

Alignment Options: Mixed Alignment

| Left | Center | Right |
| :- | :-: | -: |
| Text | Text | Text |
| Data | Data | Data |

Best Practices for Tables

1. Keep tables simple and readable
2. Use consistent column widths
3. Align numbers right
4. Align text left
5. Use center alignment sparingly

Tasklists

Basic Syntax

- [ ] Unchecked item
- [x] Checked item

Examples

Project Checklist

• Project Setup
  • Initialize repository
  • Set up development environment
  • Configure CI/CD
• Development Phase
  • Create basic structure
  • Implement core features
  • Write tests
• Deployment
  • Prepare documentation
  • Deploy to staging
  • Deploy to production

Release Checklist

• Code review completed
• Tests passed
• Documentation updated
• Version bumped
• Changelog updated
• Release notes prepared

Best Practices:

1. Use hierarchical structure for complex tasks
2. Keep items concise
3. Update regularly
4. Include completion dates for tracked items

Compatibility and Browser Support

Additional Resources

• GitHub Flavored Markdown Spec
• Remark GFM Plugin Documentation
• Markdown Guide