diff --git a/web/cm_plugins/hide_mark.ts b/web/cm_plugins/hide_mark.ts index c9f70ffb..20f27bf2 100644 --- a/web/cm_plugins/hide_mark.ts +++ b/web/cm_plugins/hide_mark.ts @@ -92,6 +92,17 @@ export function hideHeaderMarkPlugin() { } // Get the active line const line = state.sliceDoc(from, to); + if (line === "#") { + // Empty header, potentially a tag, style it as such + widgets.push( + Decoration.mark({ + tagName: "span", + class: "sb-hashtag", + }).range(from, from + 1), + ); + + return; + } if (isCursorInRange(state, [from, to])) { widgets.push( Decoration.line({ class: "sb-header-inside" }).range(from), diff --git a/web/styles/editor.scss b/web/styles/editor.scss index ba90b503..5fdacf6b 100644 --- a/web/styles/editor.scss +++ b/web/styles/editor.scss @@ -50,6 +50,17 @@ font-size: 1em; } + // If a header only contains a tag, it's likely a line containging "#" which may turn into a hashtag, so style it as such instead of a header + .sb-line-h1:has(> span.sb-hashtag:only-child) { + font-size: 1em; + padding: 0; + font-weight: normal; + + .sb-meta { + color: var(--editor-hashtag-color); + } + } + .sb-inline-img { max-width: 100%; }