Exclude Excalidraw from CSS snippet

Custom CSS & Theme Design
1

What I’m trying to do

I am using a common CSS snippet to center images in my notes.

img {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
}
    
 .markdown-source-view.mod-cm6 .cm-content > * {
        margin: auto auto !important;
}

However, this messes with the excalidraw latex editor when using conceal from Latex-Suite plugin. See this issue.

I would like to modify the snippet so that it simply does not apply to excalidraw elements whatsoever.

Things I have tried

I am not versed in CSS. I have tried to find similar cases online and also ask the LLMs; both without luck.

2

I don’t know the exact setup or steps to reproduce the problem easily on my end, but the above snippet seems like it would cause issues.

How about trying only this:

img {
  display: block;
  margin-inline: auto;
}

or

.view-content img {
  display: block;
  margin-inline: auto;
}

for centering images.

3

Steps to Reproduce

  1. Open sandbox vault
  2. Add and enable CSS snippet
  3. Install & enable latex-suite plugin
    1. Enable conceal in plugin settings
  4. Install & enable excalidraw plugin
    1. Create a new drawing
    2. ctl+P to insert a latex formula into the drawing
    3. paste the following math code and observe the text concealing behavior
\color{blue}L_{1}=\begin{bmatrix}
w_{1}+w_{2} & -w_{1} & -w_{2} & 0 \\
-w_{1} & w_{1}+w_{3}+w_{4} & -w_{3} & -w_{4} \\
-w_{2} & -w_{3} & w_{2}+w_{3} & 0 \\
0 & -w_{4} & 0 & w_{4}
\end{bmatrix}
4

Hi, thank you for your time!

First, I have added steps to reproduce in my previous message :+1:

Secondly, your proposed snippet works but only centers stored images, so those embedded with ![[]]. I would like external links to also be centered, such as youtube videos or PNG URLs that are embedded with ![](). Do you have a suggestion for that? My current snippet does that but perhaps there is a better way of achieving it.

5

Your setup steps were clear and easy to follow. Well done!

The rule causing the issue looks to be the !important on this line:

img { 
  display: block !important; 
}

I’m not familiar with how latex-suite’s conceal, excalidraw, and Obsidian’s CSS work together and don’t have time to investigate further, but this fixes the issue on my end:

.view-content img {
  display: block;
  margin-inline: auto;
}
  
.markdown-source-view.mod-cm6 .cm-content > * {
  margin: auto auto !important;
}

I would go with the below version though; it’s safer as it doesn’t change vertical margins in the editor (which can make the editor do strange things). Also, noticed iframes (embedded YouTube videos) weren’t centered in Reading view so added a rule for that. Hope this sorts you out:

.view-content img {
  display: block;
  margin-inline: auto;
}

.markdown-source-view.mod-cm6 .cm-content > * {
  margin: 0 auto !important;
}

.markdown-preview-view iframe {
  display: block;
  margin-inline: auto;    
}

The !important in the second snippet is necessary here for centering markdown embeds in Live preview.

1 Like