Greetings all, I couldn’t find anything in the forums about this, so if I missed smthn I’d be grateful for a redirect.
What am I trying to do
I like ASCII art, messing with Unicode symbols and general stylisation of my text as I write it. I would like to introduce custom-stylised segments (e.g. monospace, centered, colored etc) in my obsidian workflow while not breaking links inside them.
How I’m trying to do it
I would like to have a segment of text in live-preview to be rendered according to rules specified for that segment - all this without breaking obsidian’s links. The closest I got to getting this to work is CSS snippets with custom <span> classes since as far as I’m aware they’re the only html element that preserves obsidian’s links.
Let’s take an example with monospaced font. The snippet looks like:
Which I can then embed into obsidian like <span class="monospace"> [[some link]] </span>
This is the Live-Preview result currently:
Preview with <span> looks as intended:
which is what I would like the Live-Preview version to look like.
Help
I don’t know if CSS snippets are the best way to go - maybe there’s a plugin that can do this that I’m missing. Perhaps it’s impossible to live-preview render both the html elements AND what’s inside them?
well, it’s quite a niche feature u r looking for. CSS can get u there, so does a custom plugin (if u know how to code, but will also make use some CSS styling).
as a quick hint to get u started, you can use callout (Use callouts - Obsidian Help) to wrap/limit this monospace feature (instead of using <span> or <div>.
here’s a sample on how (i don’t do ASCII art at all, so this is just basic). note that the raw markdown would show [[]] but live preview won’t
normal text with [[test html|normal link]]
> [!NOTE|monospace] Title
> note with [[test html|monospace link]]
> \-----------------------------------------
> | [[swanson rule]] | [[test html]] | [[2022-06-02]] |
> \-----------------------------------------
normal text with [[test html|normal link]]
@CawlinTeffid I tried Highlightr - I’m not sure if I tested it badly, but it didn’t work in Live Preview for me. It did keep the links when put into proper preview though. Perhaps I mucked something up though…
Callouts
@efemkay Okay, this works reasonably well, I didn’t think of callouts, thanks! My follow-up issue is that it’s not as ergonomic as I would like it to be:
The mouse-over border is kind of annoying, but more importantly the border takes too much space around the text. I tried putting negative padding in the CSS settings, but that doesn’t work. Maybe there’s another hack?
Custom Plugins?
As far as custom plugins and CSS - I’m okay-ish with code. I’m have enough programming background to frankenstein CSS and JS monsters that do the job “well enough”.
My main issue is that Obsidian guys have explicitly stated (in the posts @CawlinTeffid shared) that they don’t like to mix CSS and Markdown which puts me in a bit of a pickle.
I’d be down to use html-style links, but those don’t render in Live-Preview either so shrug.
I think so far the solution is either the awkward box or to use editor/preview separately, which probably isn’t so bad anyways.
P.S. @efemkay I think it’s not SO niche of a request. The ASCII styling is probably not a common thing, but I can imagine that custom in-line effects LaTeX shouldn’t be so crazy, right?
I just realized that Advanced Tables (link) somehow managed to get Obsidian to display the table content in editor in monospace. Moreover it even has some fancy self-adjusting features in editor… maybe I can hack THAT plugin in order to do in-editor text art stuff…
Here is the callout snippet that allows monospace with no extra formatting on anything (adapted from obsidian-modulas-css-layout).
There is a slight issue that text directly underneath will get “sucked into” the callout, so you have to leave an empty line or use a heading to block it.
It should be possible to adapt this with extra css to include formatting, but I think with this approach is still limited to per-line formatting.
