Phoenix Markdown

A Phoenix LiveView hook to render markdown with support for GitHub Flavored Markdown and Mermaid diagrams.

Features

• 🚀 Phoenix LiveView integration
• 📝 GitHub Flavored Markdown support
• 📊 Mermaid diagram rendering
• ⚡ Built with unified/remark/rehype ecosystem
• 🎯 TypeScript support

Installation

npm install phoenix-markdown

Usage

JavaScript/TypeScript

import { MarkdownHook } from 'phoenix-markdown'

// Register the hook with Phoenix LiveView
let liveSocket = new LiveSocket("/live", Socket, {
  hooks: { MarkdownHook }
})

Phoenix Template

<div 
  id="markdown-content" 
  phx-hook="MarkdownHook"
  data-content="# Hello World\n\nThis is **markdown** content!"
  data-class-name="prose prose-lg"
  data-loading-class-name="opacity-50"
  data-loading-text="Loading markdown...">
</div>

Configuration Options

The hook reads configuration from HTML data attributes:

• data-content: The markdown content to render (falls back to element's textContent)
• data-class-name: CSS class to apply to the rendered content
• data-loading-class-name: CSS class to apply while loading
• data-loading-text: Text to show while loading

Development

# Install dependencies
npm install

# Build the project
npm run build

# Run tests
npm test

# Format code
npm run format

License

MIT © Leonardo Venturini