Syntax Highlighting For Todo.Txt List Format

Syntax highlighting for todo.txt list format

I recently updated my website’s syntax highlighting capabilities to include support for the todotxt format. This addition makes displaying task lists within code blocks much clearer.

The todotxt format provides a simple, text-based way to manage tasks. Its rules are straightforward:

• Completion: Lines starting with x represent completed tasks. A completion date often follows the x.
• Priority: Lines can optionally start with (A), (B), (C) etc., indicating task priority.
• Creation Date: An optional creation date (YYYY-MM-DD) can appear after the priority (if present) or at the beginning of the task description.
• Contexts: Words prefixed with @ (e.g., @home, @work) denote contexts.
• Projects: Words prefixed with + (e.g., +website, +writing) denote projects.
• Key:Value Pairs: Additional metadata can be added using key:value format (e.g., due:2024-12-31, t:2024-11-01).

To implement the highlighting, I extended my existing JavaScript syntax highlighting system. I created a function that processes the todotxt input line by line. Based on whether a line represents a completed task, a prioritized task, or a standard item, the JavaScript assigns a specific CSS class to that line.

Corresponding CSS rules then apply distinct visual styles based on these classes. For example, completed tasks are styled with a gray color and strikethrough text decoration. Prioritized tasks receive different colors (like red for priority A, orange for B, blue for C) for quick visual distinction. Standard tasks use a default text color.

Consider this todotxt list:

(A) 2026-06-07 Write blog post about todotxt highlighting +blog @todotxt
(C) Update CSS styles +syntax-highlighting @todotxt @css @javascript
x Review deployment checklist @todotxt due:2026-06-01
Fix minor bug @todotxt
(B) Check email
2024-10-27 Fix minor bug +website @coding t:2024-11-15

This automated styling makes todotxt lists easier to parse visually when presented on my web pages.

For more details on this and other language support, you can find more information here.