Live Preview: Add support for HTML Underline Tag Rendering

Feature requests
,
1

Steps to reproduce

  1. Wrap the text in Markdown Header with HTML underline tag
  2. Use Markdown Bold tag along with HTML underline tag

Expected result

  1. The Header should be rendered as an Header (Bold and in large text)
  2. When using underline in conjunction with bold tag the output should show both the underline and bold style on the text

Actual result

  1. The header looses its bold styling and text size becomes small
  2. When underline tag is present inside the bold tag only underline is rendered while when underline is outside the bold tag the only the bold styling is rendered

Environment

  • Operating system: Windows 11 build 22000.438 (64-bit)
  • Debug info:
SYSTEM INFO:
	Obsidian version: v0.13.19
	Installer version: v0.13.19
	Login status: not logged in
	Insider build toggle: off
	Live preview: on
	Legacy editor: off
	Base theme: dark
	Community theme: none
	Snippets enabled: 13
	Safe mode: off
	Plugins installed: 9
	Plugins enabled: 0

Additional information

All the snippets, plugins and custom themes have been disabled before testing

image

The 1st line shows heading in live preview mode when underline is used
The 2nd line shows the same issue when there cursor is actively editing the line

image

Using bold and underline styling together

image

Missing bold styling in live preview

image

Using underline tag inside bold styling

image

2 Likes
2

We don’t support this. Moved to feature request.

4

FWIW, I’ve just discovered that using span tags with the appropriate CSS — span style="text-decoration: underline;" — produces the same results as in the initial description.

5

hi folks,

I would like to have underline shortcut in markdown just like bold and italic. Ctrl+l would be nice. right now i am using “<ins> text </ins>”. Not convenient as you can see.

12 Likes
6

Markdown does not have a syntax for underlines. (This could be because the “right” usage of underlines in a print document, aside from hyperlinks, are obscure and uncommon. That is an educated guess.)

I work around this by using Markdown’s == syntax for marking passages in text. At the start of the passage I use == as per normal. At the end of the passage I use ===, which is not correct but serves my purposes. == represents <ins> and === represents </ins>; I flip back and forth between them using find and replace as I prefer in the moment.

A smarter, less flexible solution would be to edit your custom CSS so that <mark> elements are underlined with colorless background rather than highlighted.

2 Likes
7

You can use more concise html “u” tag instead of “ins” tag.

Or you can support request Customizable interpretation of markdown syntax nuances, like CSS which would allow you to use your own syntax.

references:

2 Likes
8

Is there a way to create a hotkey to underline text in Obsidian?

I keep using <u> to underline my text.

9

In obsidian, we can already use bold text, italics, and strikethrough, but there is no command for underlining. Luckily HTML commands are enabled and we can underline text with the command <u> text </u>.

I propose a simple command like ctrl/cmd + U for toggling underline text and introduce the HTML command shown above.

7 Likes
10

@Cedric I would use something like AutoHotkey to create the hotkey. It would trigger the following procedure: copy the selected text, add surrounding html tags, paste modified text back into editor.
This AutoHotkey script would work in any editor, not only in Obsidian.