Add tag names to `.markdown-preview-view` node for contextual styling based on tag(s) in note

Plugins ideas
1

Plugin that adds tag names as selectable elements in the root element for the preview view of that note.

Very similar to the contextual typography plugin: GitHub - mgmeyers/obsidian-contextual-typography

But where that plugin adds data-tag-name to divs based on child contents, this idea is to add a list of tag names to the .markdown-preview-view element in the pane in preview mode.

This enables contextual styling of the entire note based on the tags placed in the note.

Example usage:

  • Use a theme that renders all notes with a fixed width for easy readability
  • Want a few notes to have flexible width to use as dashboards etc
  • Tag those notes #dashboard or similar
  • Plugin alters the preview view by modifying the .markdown-preview-view element to:
    • <div class="markdown-preview-view ..." data-tag-names="dashboard ..." ...>
  • A CSS snippet can then select on this to alter the width on those specific notes to be full width while the theme continues to render all other notes with fixed width
2 Likes
2

Alternate (or possibly additional) idea is to use YML front matter to define the css class, similar to how it is handled in the Spectrum theme: Theme: Spectrum > New Feat: Mermaid-Scroll && Link Signifier - #2 by austin