SNIPPET
hankiouDate Highlighter
Obsidian plugin to highlight dates and make them easier to remember for visual learners
7 Stars
GitHubCSSAny theme
# Date Highlighter
An Obsidian plugin that color-codes dates to help visual learners remember historical events and timelines through color association.
## Overview
Date Highlighter automatically transforms highlighted dates into beautifully color-coded visual elements. Each component of a date (month, century, decade) is assigned a unique color, making it easier to visually distinguish and remember dates at a glance.
## Features
- **Color-coded months**: Each month has its own distinctive color
- **Century colors**: Different centuries are visually distinguished by background colors
- CE centuries follow a warm-to-cool progression moving forward in time
- BCE centuries use warmer, earth tones that deepen with antiquity
- **Decade colors**: The last two digits of years are colored based on the decade
- **BCE support**: Special visual treatment for dates before the Common Era
- **Multiple date formats**: Flexible parsing for various date formats
- **Fully customizable**: All colors can be customized to your preferences
- **Live preview**: Dates render in both edit and preview modes
## Usage
To highlight a date, use Obsidian's standard highlight syntax with double equals signs:
```markdown
==January 15, 1923==
```
### Supported Date Formats
The plugin recognizes various date formats:
**Full dates (Month Day, Year)**
- `==January 15, 1923==`
- `==15 January 1923==`
- `==Jan 15, 1923==`
**Month and Year**
- `==January 1923==`
- `==Jan 1923==`
**Year only**
- `==1923==`
- `==500 BCE==`
- `==1200 BC==`
**Numeric formats (CE only)**
- `==1923-01-15==` (ISO format: YYYY-MM-DD)
- `==01/15/1923==` (US format: MM/DD/YYYY)
### Examples
```markdown
The French Revolution began in ==July 1789==.
World War I started on ==June 28, 1914== with the assassination of Archduke Franz Ferdinand.
The Code of Hammurabi was created around ==1750 BCE==.
The Renaissance period spanned roughly from ==1400== to ==1600==.
```
## How It Works
### Color System
Each date is broken down into visual components:
1. **Month** (if present): Colored background with auto-contrasting text
2. **Day** (if present): Neutral gray background
3. **Century**: The first two digits of the year with a colored background
4. **Decade**: The last two digits of the year with colored text on a dark background
### Visual Learning Benefits
The color-coding system helps visual learners by:
- Creating visual patterns for different time periods
- Allowing quick recognition of dates from the same month or century
- Building color associations with historical events
- Making timelines more memorable and engaging
## Settings
Customize every aspect of the color scheme in the plugin settings:
- **Month Colors**: Set individual colors for all 12 months
- **Century Colors (CE)**: Customize background colors for each century (100s through 2100s)
- **Century Colors (BCE)**: Customize background colors for BCE dates
- **Decade Colors**: Set text colors for each decade (0X through 9X)
- **Background Colors**: Configure backgrounds for CE and BCE decade portions
- **BCE Badge Color**: Customize the "BCE" badge appearance
- **Display Options**: Toggle individual digit coloring for more granular color coding
### Default Color Scheme
The plugin comes with a thoughtfully designed default color palette:
- **Months**: Distinct colors for each month (e.g., January = Blue, July = Yellow)
- **CE Centuries**: Warm to cool progression as time moves forward
- **BCE Centuries**: Warmer, earth tones that deepen with antiquity
- **Decades**: Rainbow spectrum (0=White, 1=Red, 2=Blue, 3=Green, etc.)
## Installation
### From Obsidian Community Plugins
1. Open Settings in Obsidian
2. Navigate to Community Plugins and disable Safe Mode
3. Click Browse and search for "Date Highlighter"
4. Click Install, then Enable
### Manual Installation
1. Download the latest release from the [releases page](https://github.com/hankiou/date-highlighter/releases)
2. Extract the files to your vault's `.obsidian/plugins/date-highlighter/` folder
3. Reload Obsidian
4. Enable the plugin in Settings > Community Plugins
## Requirements
- Obsidian v0.15.0 or higher
## Use Cases
- **History students**: Visually organize and remember important historical dates
- **Timeline creation**: Build colorful timelines in your notes
- **Research notes**: Highlight key dates in research and make them stand out
- **Study guides**: Create memorable study materials with color-coded dates
- **Journaling**: Add visual interest to personal timeline entries
## Tips
- The color system creates patterns that become easier to recognize over time
- Consecutive dates from the same month/century will have visual similarity
- BCE dates have a distinct visual style to differentiate them from CE dates
- Use the settings to create your own color associations that work for your learning style
## License
MIT
## Author
Created by [hankiou](https://hankiou.com)
## Support
If you encounter issues or have suggestions, please [open an issue](https://github.com/hankiou/date-highlighter/issues) on GitHub.
---
Made with care for visual learners everywhere.
How to Install
- Download the CSS file below
- Move it to your vault's
.obsidian/snippets/folder - Open Obsidian → Settings → Appearance → CSS Snippets → Enable it
Stats
Stars
7
Forks
1
Last updated 4mo ago
Categories