Highlight Date/Timestamps

[liamcain]

Here's the latest version of the Highlight Datetime snippet:

To add, simply click "Import" from the Dynamic Highlights settings page. Then paste in the following:

{
  "basic-datetime": {
    "class": "basic-datetime",
    "color": "#00000000",
    "regex": true,
    "query": "((\\d{4}-\\d{2}-\\d{2})T(\\d{1,2}:\\d{2})( am| pm| AM| PM)?)|((\\d{4}-\\d{2}-\\d{1,2}))|((\\d{1,2}:\\d{2}( am| pm| AM| PM)?))",
    "mark": [
      "match",
      "group"
    ],
    "css": ".basic-datetime {\n  background-color: rgba(59, 87, 148, 0.25) !important;\n  color: rgb(88, 136, 200) !important;\n  font-size: 87.5%;\n  font-weight: 400;\n  text-transform: uppercase;\n  line-height: 1em;\n  padding: 2px 4px 2px 4px;\n  text-align: center;\n  margin: 0px 0px;\n  border: 1px solid transparent;\n  border-radius: 0.4em;\n  transition: 150ms cubic-bezier(0.2, 0, 1, 0.9);\n  filter: saturate(1);\n}\n\n.basic-datetime:hover {\n  background-color: rgba(59, 87, 148, 0.40) !important;\n  color: rgb(94, 142, 210) !important;\n}\n"
  }
}

Original Post

This is still a work-in-progress but sharing in case anyone wants to try these snippets out.

TODO

• Support 24 hour timestamps
• Support YYYY-MM-dd HH:mm

I'm a bit jealous of other apps that have date/timestamps as first class citizens (see: SuperNotes, Thunk Notes, etc). Honestly, this doesn't quite fit the bill, but at least it looks a bit nicer.

Next step is learning enough CM6 to get a decoration with a real date/time picker and a click event.

Highlight Date/Time

{
  "basic-date": {
    "class": "basic-date",
    "color": "#00000000",
    "regex": true,
    "query": "@(\\d{4})(-)(\\d{2})(-)(\\d{2})",
    "mark": [
      "match"
    ],
    "css": ".basic-date {\n  display: inline-block;\n  background-color: rgba(59, 87, 148, 0.22) !important;\n  color: rgb(88, 136, 200) !important;\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1em;\n  padding: 2px 4px 2px 4px;\n  text-align: center;\n  text-decoration: none;\n  margin: 0px 0px;\n  border: 1px solid transparent;\n  border-radius: 0.4em;\n  transition: 150ms cubic-bezier(0.2, 0, 1, 0.9);\n  filter: saturate(1);\n}\n\n.basic-date:hover {\n  background-color: rgba(59, 87, 148, 0.40) !important;\n  color: rgb(94, 142, 210) !important;\n}"
  },
  "basic-time": {
    "class": "basic-time",
    "color": "#00000000",
    "regex": true,
    "query": "(?<datemarker>@)(\\d{1,2})(:)(\\d{2}) (AM|am|PM|pm)",
    "mark": [
      "match",
      "group"
    ],
    "css": ".basic-time {\n  display: inline-block;\n  background-color: #b6499b !important;\n  color: white !important;\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1em;\n  padding: 2px 4px 2px 4px;\n  text-align: center;\n  text-decoration: none;\n  margin: 0px 0px;\n  border: 1px solid transparent;\n  border-radius: 0.4em;\n  transition: 150ms cubic-bezier(0.2, 0, 1, 0.9);\n  filter: saturate(1);\n}\n\n.basic-time:hover {\n  background-color: rgba(59, 87, 148, 0.40) !important;\n  color: rgb(94, 142, 210) !important;\n}\n\n.basic-time .datemarker {\n  display: inline-block;\n  width: 0;\n  visibility: hidden;\n}"
  }
}

(PS, I borrowed a lot of the CSS from @lguenth. So thanks!)

[nothingislost]

Nicely done! Regarding your plugin idea, check out https://github.com/replit/Codemirror-CSS-color-picker

The Obsidian markdown syntax tree will look different than the tree they're traversing but there should be some good examples to leverage in that code base as it's a similar use case.

[liamcain]

Ooooh, that's a perfect reference! Thanks for that 🙏 I'll play around with this tonight. I had just started going down the rabbit hole of existing CM6 plugins for a slightly different experiment.

Taking a quick peek, I think I want a replace decoration (since I want to swap the whole string with the inline widget) but hopefully that's not a massive challenge.

[nothingislost]

No problem. Hit me up on Discord if you have questions.

[ryanwwest]

Thanks for this! I modified it a bunch to concisely display dates in the format YYYY-MM-DD as follows:

It's ugly and hacky since I'm not a frontend dev and I'd welcome any improvements (especially number/divider bar alignment on all font sizes). Snippet:

{
  "basic-datetime": {
    "class": "basic-datetime",
    "color": "#00000000",
    "regex": true,
    "query": "(?<zyearcents>\\d{2})(?<zyeartens>\\d{2})(?<zd1>-)(?<zmonth>\\d{2})(?<zd2>-)(?<zday>\\d{2})",
    "mark": [
      "match",
      "group"
    ],
    "css": " .zyearcents, .zmonth {\n    font-size: 0.6em;\n    vertical-align: super;\n    position: relative;\n    text-align: center;\n}\n\n .zyeartens, .zday {\n    font-size: 0.6em;\n    vertical-align: sub;\n    position: relative;\n    /* need better way to position for all font sizes...*/\n    right: 1.25em;\n    margin-right: -1.15em;\n    text-align: center;\n\n}\n\n/* border between year and month/day for readability */\n.zmonth:before { \n  border-left:  1px solid; \n  vertical-align: sub; \n  content: ''; \n  font-size: 1.6em; \n  position: relative; \n  bottom: -.19em;\n}\n\n/* make dash separators invisible */\n.zd1, .zd2 {visibility: hidden; font-size: .1% !important;} \n/* custom color */\n.zyearcents, .zmonth, .zyeartens, .zday { color: rgb(200,255,200)}; }\n\n/* Alternative: 4 columns of numbers, not easy to read */\n/* .zyearcents, .zyeartens, .zday, .zmonth {\n  font-size: 60%; writing-mode: vertical-rl;\n  text-orientation: upright; letter-spacing: -.3em; \n  line-height: .8;\n  text-decoration: none !important;\n  border: .5px solid gray;\n  transition: 150ms cubic-bezier(0.2, 0, 1, 0.9);\n  filter: saturate(1);\n  padding-bottom: .2em;\n} */\n"
  }
}