Is there a way to set up a one-click toggle in Obsidian to switch between rendering and not rendering ![[]], similar to switching between source mode and reading mode?

Help
1

Hello everyone! I frequently use ![[]] to embed large sections of content in my notes, but I’ve noticed that this makes my notes harder to read. I tried switching to source mode, which does achieve the desired effect, but it also prevents LaTeX equations and other elements from rendering properly.

So, does anyone have a solution they could recommend? I asked ChatGPT for help, and it suggested using Templater and CSS, with the setup shown below. This works well for shorter notes, where scrolling isn’t necessary, but if the page has a lot of content, I have to close and reopen it every time I toggle the setting. In these cases, some embeds render while others don’t. I also tried using a refresh command suggested by ChatGPT, but it didn’t resolve the issue.

ToggleEmbed.md

<%*
const embeds = this.app.workspace.activeLeaf.view.containerEl.querySelectorAll('.markdown-embed-content');
embeds.forEach(embed => {
    embed.classList.toggle('active');
});
%>

toggle-embed.css

/* 默认情况下隐藏引用内容 */
.toggle-embed {
    display: none;
}

/* 当 .show-embeds 类被添加时，显示引用内容 */
.show-embeds .toggle-embed {
    display: block;
}
2

If I understand correctly, you have notes with largish chunks of other notes embedded, and these embedded chunks sometimes get in your way, so you would like to be able hide them. Is this correct?

Three ideas come to mind:

  1. Don’t embed such large sections. Try to drill down to the essential part of the embedded note. You can isolate relevant parts of a note with headings, which can be targeted in links, e.g. ![[note#section]].
  2. Don’t embed. Use [[note#section]] instead of ![[note#section]], then rely on the hover preview editor to view the actual contents.
  3. Put the embedded sections under their own headings, since headings can be toggled. For example:
# embed - section from note
![[note#section]]

I would avoid complicating things beyond that, if possible.

1 Like
3

Thank you very much for your response! I’m currently doing it the way you suggested, but sometimes I have to embed large sections of content because they include numerous mathematical formulas and explanations. I’ve tried hover previews, but the effect is poor; sometimes I want them all to be displayed for reading instead of just one section.

So, I hope for a source mode that can properly display LaTeX formulas, or alternatively, a one-click option to hide ![[]] content without rendering it. :smiling_face:

4

Source mode is, by definition, a mode where the source is shown, i.e. text only and no rendering, so the probability that such a feature will be added is really 0.

You’ve described why hover preview doesn’t work for you, but what about using headings? It seems to me that a folded heading does exactly what you are looking for. Obsidian also lets you easily fold and unfold multiple headings at once.

The only other option that comes to mind would be to repurpose checkboxes. For example, add something like the following to your CSS snippets:

.collapse-embed .HyperMD-task-line[data-task="x"],
.collapse-embed .HyperMD-task-line[data-task=""] {
  text-decoration: none !important;
}

.collapse-embed .HyperMD-task-line[data-task="x"] {
  max-height: 10em;
  overflow: auto;
}

Then add “collapse-embed” to the cssclasses property of relevant notes. Now, whenever you add an embed after a checkbox, e.g. - [x] ![[note]], it will be collapsed when checked. You can also adjust the collapsed height using max-height, and set overflow: hidden; if you don’t want the scrolling behavior.

NOTE that the above CSS only works 100% in edit mode. For read mode you’ll have to figure out which additional CSS classes are necessary to get the same folding behavior.

5

Thank you very much for taking the time to reply. I am currently using the folding feature, including titles and lists, but it is still not enough, such as referencing previous assignments and questions. Because I frequently update my notes, they have become very bulky. The reason folding doesn’t solve the problem is that it also folds the text in the current notes, and some content cannot be fully summarized into titles or lists.

The only good solution I can think of at the moment is to have a switch that allows all the ![[]] to show or hide the referenced content.

6

Okay, I understand a little more now. My last solution above that uses CSS would do what you need. If you just want one toggle for all embedded notes then you probably don’t need to deal with checkboxes. Just add a class to your notes’ cssclasses property. Delete the class to unfold, add it again to fold.

7

Thank you very much for your method! It’s very clever! I’ll try using cssclass then. It seems neither I nor the AI thought of using this method. However, there’s an issue: if you switch between multiple desktops using Win+Tab and use multiple windows, modifying cssclass can be quite troublesome. :smiling_face_with_three_hearts: :smiling_face_with_three_hearts:

1 Like