trello-markdown-descriptions

Trello Markdown Descriptions

A browser extension that renders Trello card descriptions as proper markdown when not in edit mode, finally bringing the long-requested table support and other markdown features to Trello.

🎯 Problem Solved

This extension addresses a highly requested feature in the Trello community: the ability to render markdown tables and other markdown syntax directly in card descriptions. Users have been asking for this functionality for years!

✨ Features

Markdown Tables: Finally use tables in your Trello card descriptions
Full Markdown Support: Headers, lists, code blocks, links, images, and more
GitHub-flavored Markdown: Supports strikethrough, task lists, and other GFM features
Smart Detection: Only processes descriptions that contain markdown syntax
Edit Mode Preservation: Automatically switches back to plain text when editing
Non-intrusive: Works seamlessly with Trello’s existing interface

🛠 Supported Markdown Features

Headers (# H1, ## H2, etc.)
Tables (| Column 1 | Column 2 |)
Lists (ordered and unordered)
Code blocks and inline code
Links ([text](url))
Images (![alt](url))
Bold (**text**) and italic (*text*)
Strikethrough (~~text~~)
Blockquotes (> quote)
Task lists (- [ ] todo)
Horizontal rules (---)

📦 Installation

🚀 Usage

Install the extension for your browser
Open any Trello card with a description

Write your description using markdown syntax:

# Project Overview
   
## Tasks

| Task | Status | Assignee |
|------|--------|----------|
| Design | ✅ Done | Alice |
| Development | 🔄 In Progress | Bob |
| Testing | ⏳ Pending | Carol |
   
## Notes
- **Important**: Remember to update the documentation
- Use `git commit -m "message"` for commits
- > Don't forget to run tests before deploying

The extension automatically renders the markdown when you’re not editing

🏗 Development

Prerequisites

Node.js 18+
npm or yarn

Setup

git clone https://github.com/pke/trello-markdown-descriptions.git
cd trello-markdown-descriptions
yarn install

Build

# Build for all browsers
yarn build

# Build and package for distribution
yarn package:all

Manual Installation for Development

Chrome/Edge

Run npm run build
Open chrome://extensions/
Enable “Developer mode”
Click “Load unpacked” and select build/chrome/

Firefox

Run npm run build
Open about:debugging
Click “This Firefox”
Click “Load Temporary Add-on”
Select any file in build/firefox/

🚢 Deployment

Automated Deployment

The extension automatically deploys to all stores when you create a release on GitHub.

Manual Deployment

# Deploy to specific store
npm run deploy:chrome
npm run deploy:firefox
npm run deploy:edge
npm run deploy:safari

# Deploy to all stores
npm run deploy:all

Environment Variables

Create a .env file with your store credentials:

# Chrome Web Store
CHROME_CLIENT_ID=your_client_id
CHROME_CLIENT_SECRET=your_client_secret
CHROME_REFRESH_TOKEN=your_refresh_token
CHROME_APP_ID=your_app_id

# Firefox Add-ons
FIREFOX_JWT_ISSUER=your_jwt_issuer
FIREFOX_JWT_SECRET=your_jwt_secret
FIREFOX_ADDON_ID=your_addon_id

# Microsoft Edge Add-ons
EDGE_CLIENT_ID=your_client_id
EDGE_CLIENT_SECRET=your_client_secret
EDGE_PRODUCT_ID=your_product_id

🤝 Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m ‘Add amazing feature’)
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Thanks to the Trello community for their continuous feedback and feature requests
Built with marked.js for markdown parsing
Inspired by the community discussion about table support in Trello

📞 Support

This site is open source. Improve this page.