Newbie of 1-day: using inline <style> element and interleaving html/md

Help
1

I am a total 1-day newbie to Obsidian :heart_hands: having discovered it only a few days ago.

I am trying to explore Obsidian’s capabilities for supporting HTML within obsidian-markdown content. I have written a couple of experiments and attempted to find answers within the forum and discord.

I would love guidance, help, answers, expertise around the following:

  1. Using inline <style>css</style>; appears to either be disabled or unsupported.
  • Noting that I was able to create vault-global snippet css and make that work. But that is undesirable for individual documents. YAML Frontmatter patterns for CSS appear to not be available.
  1. Interleaving HTML and markdown within the HTML using tag markdown=1 appears to be available but exhibits unexpected/quirk code-generation output.
  • I was able to place markdown with an HTML element, but the parser terminated the element early and switched back to Markdown mode. I.e., no interleaved nesting capability. That behavior results in bad markdown/html output since it appears that input is not properly consumed by Obsidian markdown lexer/parser.

I would be very grateful to have that confirmed before I get lost in the weeds searching and experimenting for days for workarounds or solutions.

:heavy_heart_exclamation: Obsidian looks like it is purpose built pursuing everything I had hoped for and which I have felt was missing in markdown authoring for the last decade. I have seen nothing that is so close to patterns I use, other than plugin-enabled features within VsCode.

I do extensive work in VsCode, including authoring extensions. However, for markdown knowledge base authoring Obsidian is purpose built and tailored. Making it an ideal choice if I can learn/enable the capabilities I am looking for. I happen to have dev-engineering experience with Markdown<->HTML, code generators, languages and tools, and related practices and patterns similar to the ideas expressed embodied in Obsidian as well as the Zettelkasten references.

2
  1. Yes <style> is unsupported. It was removed in a much earlier version. Though there seems to be a lot you can do with CSS snippets.

EDIT: Actually it might be allowed in <head>. Just found this release note:

<style> tags are no longer permitted in raw HTML. This is because the HTML standard disallows <style> tags within <body>; they are only permitted in <head>.

  1. Maybe someone more experienced will answer, but as far as I know, Markdown won’t render properly inside html. Though I think Obsidian links should continue to work. And maybe some other things will continue to parse, accidentally or otherwise. Actual examples of what you’re trying would be helpful for more specific feedback. (I haven’t seen your Discord conversation.)

https://daringfireball.net/projects/markdown/syntax#html

1 Like
3

For inline styles I think you can do <span style="css">text</span>. As @smallscript says, I think Markdown won’t render inside the HTML (search the forum; it’s come up before).

For non-global whole-note styles you can assign a class to the note by adding a cssclass field in the YAML metadata, and use a snippet that only targets that class.

2 Likes
4

:heart_hands:

That cssclass YAML frontmatter <-> css-snippet hint was great. It helped me grok how snippets were intended to be used for an individual page.

Thank you!

5

Thank you for that helpful info/clarification!

Agreed on HTML standard and <style> element location.

With that fact noted, markdown itself is not legal/rendered in standard HTML (requiring pre-processing). Markdown pages are often fragments without direct mapped correlation and HTML page layout structure of html → head+body → etc. Hoisting style fragments is common practice in partial/fragment composition of web-pages.

As a related standards practice, it’s common in working with newer HTML/Web composition patterns to make use of custom-element techniques. Those publishing/generation facilities standardly make use of private shadow-dom CSS; which includes most modern browser themselves in how they provide standard DOM features (which is easy to see in their webpage-inspectors).

For custom elements the shadow DOM CSS is fully nested and encapsulated within the Custom Elements node subtree. In other words, locality of reference placement which is not code-design-tool constrained by the HTML standard of style element placement in the head.

Which is my 2-cents that the HTML standards regarding <style> location should not be of significant relevance to constraining an evolving markdown document authoring and publishing design.

The deeper thing I am exploring in Obsidian is what are its current capabilities for aggregation and composition of content and pages built from a markdown/YAML/HTML core. I am trying to see if I can use it for the toolsets and publishing patterns I already have for managed site workspaces whose content and structure is primarily described in wiki/markdown style.

With regard to interleaved HTML and markdown, the objective is to allow an html element to be used as a CSS (possibly JS) managed container but have the majority of its sub-content be authored in markdown. Which happens to include micro-web-service api capabilties.

organizationally a page might look this

---md-doc-begin---
some section (html-element containing markdown)
another section (html-element containing markdown)
another section (referencing/including another markdown document fragment inline on the fly)
---md-doc-end---
(somewhere) css (w/optional js) to handle the page presentation lifecycle [typically a renderer/template. The css will than position the sections however it desires within the markdown container element.

This would, for me, allow using Obsidian for CMS style authoring epub, dynamic sites, and more with almost any presentation view that one might see in reactive-responsive site designs.

6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.