search

mayurankv / Obsidian-Code-Styler

A plugin for Obsidian.md for styling codeblocks and inline code
Other
248 stars 8 forks source link

Bug: Compatibility with "Blur" plugin #97

Closed Aetherinox closed 1 year ago

Aetherinox commented 1 year ago

Describe the bug

Code Styler css properties are conflicting with another plugin called Blur. It is causing two of the three code blocks to be visible at all times no matter what.

You have one particular CSS property that is causing all the blocks to be revealed:

.code-styler .cm-s-obsidian span.cm-inline-code,
.code-styler .markdown-rendered :not(pre) > code {
  padding: var(--code-styler-inline-padding-vertical) var(--code-styler-inline-padding-horizontal) !important;
  border-radius: var(--code-styler-inline-border-radius) !important;
  margin: 0px var(--code-styler-inline-margin-horizontal) !important;
  background-color: var(--code-styler-inline-background-colour) !important;
  color: var(--code-styler-inline-colour);
  font-weight: var(--code-styler-inline-font-weight);
}

In order to temporarily correct the issue, I had to modify the Code Styler's css because everything is marked as !important and I can't get anything to override with my own custom CSS file. The code in your stylesheet was replaced with:

.code-styler .cm-s-obsidian span.cm-inline-code, 
.code-styler .markdown-rendered :not(pre) > code:not(.blur-brick):not(.blur-bone):not(.blur-inline) {
  padding: var(--code-styler-inline-padding-vertical) var(--code-styler-inline-padding-horizontal) !important;
  border-radius: var(--code-styler-inline-border-radius) !important;
  margin: 0px var(--code-styler-inline-margin-horizontal) !important;
  background-color: var(--code-styler-inline-background-colour) !important;
  color: var(--code-styler-inline-colour);
  font-weight: var(--code-styler-inline-font-weight);
}

I'm sure there's probably a better way to do it, but I've tried for about an hour, and I can't seem to override and allow both plugins to work properly.

Steps to reproduce


```blur
Alpha Bravo Charlie Delta Echo Foxtrot Golf
Alpha Bravo Charliez Delta Echo Foxtrot Golf
Alpha Bravo Charlie Delta Echo Foxtrot Golf

### Expected behaviour
<!-- A clear and concise description of what you expected to happen. -->
Any text inside the `blur` code boxes should be censored / blacked out

### Current behaviour
<!-- A clear and concise description of what currently happens.  -->
Text in block `blur` works as it should, however, the text inside `blur-brick` and `blur-bone` shows at all times until the above edit is made to the Code Styler CSS.

### Environment
<!-- Details of your environment -->
- Plugin Version: **v1.0.7**
- Obsidian Version:  **v1.3.7**
- Platform:  **Desktop**
- OS:  **Windows 11 Pro**
- Theme:  **Blue Topaz**
- CSS Snippets:  No
<!-- Other details that you think may affect this issue -->

### Screenshots
<!-- Provide screenshots here if relevant. -->

Your CSS property is causing the plugin text blocks to appear as:
![RCcHTMt](https://github.com/mayurankv/Obsidian-Code-Styler/assets/118329232/01458319-a753-4106-a410-b0c5be5c64f7)

The blur plugin should make text appear as:
![GfHkUjF](https://github.com/mayurankv/Obsidian-Code-Styler/assets/118329232/3676f463-94a4-43d0-8502-c59ee554d862)

### Additional context
<!-- Add any other context about the problem here. Are there any console errors? -->
Per the instructions on the official github for [Blur](https://github.com/gapmiss/blur), if you want to be able to hover each block and have the text become visible, you must:

- Install https://github.com/mgmeyers/obsidian-style-settings
- Create a new custom stylesheet snippet named `obsidian-blur-plugin.css` in `/path/to/vault/.obsidian/snippets`
- Paste the following code inside:
```css
/* @settings

name: Blur Plugin
id: obsidian-blur
settings:
-
  id: obsidian-blur-hover
  title: Reveal obfuscated text on mouse hover
  type: class-toggle
  default: false
-
  id: obsidian-blur-filter
  title: Blur filter strength
  type: variable-text
  default: 5px
-
  id: obsidian-blur-brick-color
  title: Brick color
  type: variable-themed-color
  format: hsl
  opacity: true
  default-light: 'hsla(220,19%,6%,1)'
  default-dark: 'hsla(220,100%,100%,1)'
-
  id: obsidian-blur-brick-border-radius
  title: Brick border-radius
  type: variable-text
  default: 1px
-
  id: obsidian-blur-brick-line-height
  title: Brick line-height
  type: variable-number-slider
  default: 1
  min: 1
  max: 2
  step: .05
- 
  id: obsidian-blur-bone-color
  title: Bone color
  type: variable-themed-color
  format: hsl
  opacity: true
  default-light: 'hsla(220,19%,6%,1)'
  default-dark: 'hsla(220,100%,100%,1)'
-
  id: obsidian-blur-bone-border-radius
  title: Bone border-radius
  type: variable-text
  default: 1.5em
-
  id: obsidian-blur-bone-line-height
  title: Bone line-height
  type: variable-number-slider
  default: 1
  min: 1
  max: 2
  step: .05
-
*/
mayurankv commented 1 year ago

Hi, I've added a selector :not([class*="blur"]) to the code selector causing the issue. I'm aware of the slightly over important css and I'm intending to refactor this at some point so apologies for the shoddy code but for now, this is the easiest solution.

FYI in future if I hadn't changed the CSS, you could override the css by copying the same selector, adding the :not selector above and changing the problematic properties to unset or initial or whatever. By using a more specific selector you can overcome an important selector. The reason I've used so much important flags is that many themes or plugins use specific selectors or important flags so I've similarly had to override those.

Should be fixed with next release.

mayurankv commented 1 year ago

The blur-brick actually doesn't seem to be working for me properly with hovering but I still get this issue when deactivating my plugin. Let me know if this is actually an issue with my plugin!