Brick does not reveal

[Aetherinox]

Hey, it's a nice addon, but a few issues:

• The brick feature doesn't allow me to unblock the text. It stays blocked even after enabling.

  • In your demo video, it actually does the same thing if you go back and look at the video, it just stays as a slightly smaller block.
  • Blur however works fine

• Inline works, but all 3 only in Read Mode, not in Preview Mode

• The plugin Code Styler causes blur-bone to break and automatically reveal itself.

---

Edit: In the Code Styler plugin, he's using !important delcarations which is making his CSS override yours.

His:

.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);
}

Yours

code.blur-bone {
    background-color: var(--obsidian-blur-bone-color) !important;
    color: var(--obsidian-blur-bone-color) !important;
    border-radius: var(--obsidian-blur-bone-border-radius) !important;
    line-height: var(--obsidian-blur-bone-line-height) !important;
    display: inline-block !important;
}

And I currently have his var --code-styler-inline-background-colour set to be transparent, so since it's overriding yours, the words show.

[gapmiss]

Thank you for bringing up this issue.

Here is the problem you are encountering with the brick (redact) method.

With the brick method, the original text is actually being replaced or redacted (in the javascript code) with the character '█' (i.e. █).

The other two methods are obfuscated using CSS rules as you have discovered.

The idea was to keep the plugin light-weight and simple to use in source mode. To actually reveal the "bricks" would involve more than simple CSS changes.

---

The brick method could be changed to use CSS only, but the idea was to make it actually redact so that the text CANNOT be read by someone "looking over your shoulder" or while away from the screen.

The brick method could be converted to use CSS instead of javascript (not easily changed by the user).

EDIT:

I've gone ahead and made these change for your use-case and anyone else that finds it useful. I've attached the main.js file to this issue and you can replace the current one in your plugins/obsidian-blur directory/folder.

Let me know if this works for you.

main.js.zip

[gapmiss]

Regarding the other 2 points you make.

1. The plugin is not designed to work in live preview mode. I personally only use source/read modes and therefore the plugin is somewhat opinionated ;-) The work involved getting this to work in live preview mode is not a task I have the time to learn or implement. Anyone is welcome to fork the repository and make any changes they wish.

2. The CSS conflicts may be able to be fixed, but again, I don't use the code styler plugin. If one was to try and solve the CSS conflicts, I would look into using the CSS :not() selector to try and exclude those from being processed. Would take some trial-n-error but I do believe it is possible.

Hope this helps.

[Aetherinox]

Thanks for the reply.

So the modified main.js ended up making it to where only the original blur works now and the other two are revealed.

I'm going to load this up on my test vault and go peel through the CSS to see what is going on.

---

Edit: I was able to personally create an override rule in a loaded CSS file using :not and came up with

.code-styler .cm-s-obsidian span.cm-inline-code, .code-styler .markdown-rendered :not(pre) > code:not(.blur-brick):not(.blur-bone)

which gives me:

But that was in the developer console. I need to figure a way to add the rule on top of the Code Styler guy using !important for everything. So I've got to override his override. If I get lazy and just open his stylesheet and replace his original with my edited one, it works great. Everything reveals properly.