Why? Because it would be more compatible with <u>underline</u> and <mark> tags that I use for additional highlight colors, due to markdown syntax not being rendered within HTML tags in Live Preview:
Is there an easy way to insert these tags instead of markdown syntax? Or perhaps there is a way to render markdown syntax within HTML tags in Live Preview?
Things I have tried
Tried creating a Templater script for insertion of said tags via the usual hotkeys (Cmd+B, Cmd+I etc.) but things get messy quickly if nesting multiple different tags. Furthermore, Templater doesn’t support template insertion in cards in Canvas.
Applying a single tag is trivial. By ‘nesting’ I meant, for example, toggling some text bold and underline without it turning into something mangled like:
When you nest all these different types of tags via templates, lots of little quirks arise as you actively use them that you ought to account for.
Not a programmer, don’t know Templater syntax, so I off-source the heavy-loading to Claude, which wrote me something like this:
Script
<%*
// Get trimmed selection and editor info
const text = tp.file.selection().trim();
const editor = app.workspace.activeEditor.editor;
const cursorStart = editor.getCursor('from');
// Convert line breaks to <br> and vice versa
const convertToHtml = text => text.replace(/\n/g, '<br>');
const convertFromHtml = text => text.replace(/<br>/g, '\n');
// Check for various formatting patterns
const isMarkdownBold = text.match(/^\*\*([\s\S]*)\*\*$/); // **text**
const isUnderlinedStrong = text.match(/^<u><strong>([\s\S]*)<\/strong><\/u>$/); // <u><strong>text</strong></u>
const isUnderlined = text.match(/^<u>([\s\S]*)<\/u>$/); // <u>text</u>
const isStrong = text.match(/^<strong>([\s\S]*)<\/strong>$/); // <strong>text</strong>
const hasUnderlineTags = text.includes('<u>'); // Check for nested underline tags
if (!text) {
// No selection - insert empty strong tags
tR = '<strong></strong>';
// Position cursor between tags
setTimeout(() => {
editor.setCursor({line: cursorStart.line, ch: cursorStart.ch - 9});
}, 0);
} else {
if (isMarkdownBold || isStrong || isUnderlinedStrong) {
// Extract content from inside tags
const content = isMarkdownBold ? isMarkdownBold[1] :
isStrong ? isStrong[1] :
isUnderlinedStrong[1];
// Remove strong tags but preserve <br> if underline tags exist
tR = isUnderlinedStrong ? `<u>${content}</u>` :
hasUnderlineTags ? content :
convertFromHtml(content);
} else {
// Add strong tags, preserving underline if present
tR = isUnderlined ?
`<u><strong>${convertToHtml(isUnderlined[1])}</strong></u>` :
`<strong>${convertToHtml(text)}</strong>`;
}
// Select the entire output across multiple lines if present
setTimeout(() => {
const lines = tR.split('\n');
const lastLine = cursorStart.line + lines.length - 1;
const lastCh = lines[lines.length - 1].length;
editor.setSelection(
{line: cursorStart.line, ch: cursorStart.ch},
{line: lastLine, ch: cursorStart.ch + lastCh}
);
}, 0);
}
%>
But as more and more edge cases kept unraveling, I realized that delving further into this whole thing is really not worth it. I should use a ready solution or abandon the idea.
Obsidian is a markdown editor, but it’s starting to sound like you want to have an html ediot or wysiwyg editor instead.
Every now and then I think to myself that one should consider whether the tools one are using are the correct tools, or whether one is trying to convert the tools into something they aren’t.
The Wrap with Shortcuts plugin is the easiest way I know. You can even set it up to insert multiple attributes at once (such as orange-bold-italic), add it to the command palette, and bind it to a hotkey.
First, I had a similar doubt as holroy but I was going to try to phrase it more along the lines of “what is the end result in mind”, because I used to like to add colours and whathaveyou in MS Word and I’m guessing the html tags are transferred into the xml part of the docx document when the md is exported (via pandoc or otherwise).
So if the preferred editor is Obsidian (with alll the js and other customization possibilities it has) and not Word, I think OP has a valid point.
I have my own html tagger in a Templater script using const editor = app.workspace.activeLeaf.view.editor; and const selection = editor.getSelection();, but I think it’s only good for adding one tag, because I’m not sure there is a proper tag hierarchy is to be followed when there are more.