Help modifying rushikesh CSS snippets to run in Live Preview and Source Modes

Custom CSS & Theme Design
1

The three Rushikesh CSS Snippets (code below) Centered Tables, Left-Column Headers, and Spoiler Text, all run in Reading Mode but not in Live Preview Mode or Source Mode. How do I edit the CSS files to run in Live Preview and Source Modes? I have seen there are several different ways to render in Live Preview mode and am not sure which to use.

I was thinking something like this at the top of each snippet…

.markdown-preview-view, .markdown-source-view, .markdown-rendered

Please advise.

Thanks

Centered Style Table

.markdown-preview-view table {
  margin-left: auto;
  margin-right: auto;
}

Left Column Header

/*
author: zamsyt
source: https://discord.com/channels/686053708261228577/702656734631821413/1076475103006687232
*/

:is(.cm-table-widget, .markdown-preview-section > div):has(+ * .left-thead) th {
  font-weight: unset;
}
:is(.cm-table-widget, .markdown-preview-section > div):has(+ * .left-thead)
  > table
  > *
  > tr
  > :first-child {
  font-weight: var(--table-header-weight);
  background-color: var(--background-secondary);
}

Spoiler Text

/*
author: pseudometa
source: https://discord.com/channels/686053708261228577/702656734631821413/893816224247586868
*/

/* pseudo(meta) spoiler tags */
/* blacks out non-hovered-nonactive text surrounded in *~~text~~* */
.theme-light {
  --spoiler-bg: #111;
}

.theme-dark {
  --spoiler-bg: #eee;
}

div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-em.cm-strikethrough,
em > del {
  font-style: initial;
  text-decoration: unset;
  background-color: var(--spoiler-bg);
  color: var(--spoiler-bg);
}

.CodeMirror-activeline > .CodeMirror-line .cm-em.cm-strikethrough,
em > del:hover,
.cm-em.cm-strikethrough:hover {
  background-color: var(--background-secondary-alt) !important;
}
2

@ariehen, can you please help?

3

Hi.

It’s fine to tag someone if you’ve had a chat about something in the same topic/thread before, but please don’t cold ping people for assistance. See https://help.obsidian.md/community-code-of-conduct#Unsolicited+messages+to+community+members

Thanks!

For centering tables in live preview, this should do

.table-wrapper  {
  margin-inline: auto;
}

The second snippet has an updated version linked from the original discord post; you could try that.

For pseudometa’s one, try replacing the .CodeMirror-activeline parts with .cm-active, and .CodeMirror-line with .cm-line.

.CodeMirror-XYZ is pretty old and not used anymore.

4

@ariehen sorry about that. I won’t cold post anymore.

For the first snippet, the modification above works.

For the second snippet, the discord post is not available for me when I logged in. Can you share the link for the updated snippet please?

For the third snippet, there seem to be more updated CSS scripts and plugins available. I will check them out.

Thanks!

5

@ariehen Is there a trick to finding the updated version of the 2nd, vertical headers, CSS script? The discord link in the original snippet is not valid.

Thanks!