✨ Question: How to hide the line break signs?

[merlinuwe]

🔖 Feature description

Thanks for your great plugin.

How can I hide the character for the line break at the end of the line and between paragraphs?

✔️ Solution

❓ Alternatives

📝 Additional Context

SYSTEM INFO:
Obsidian version: v1.6.7
Installer version: v1.6.7
Operating system: Windows 10 Home 10.0.19045
Login status: not logged in
Insider build toggle: off
Live preview: off
Base theme: dark
Community theme: MagicUser v20.8.0
Snippets enabled: 43
Restricted mode: off
Plugins installed: 161
Plugins enabled: 67

[merlinuwe]

I tried a little bit with your styles.css.
How can I supress the line breaks and the single spaces?
How can I color the double spaces?

[ebullient]

Make sure you've updated the plugin and have checked settings and what they do (toggle them on and off, if you have an editor open in the background, you should see the changes).

I've just updated, and will shortly release, a small modification to styles. Your snippet should be able to redefine the following:

body {
  --line-end: '¬';
  --line-break: '↲';
}

If you want to remove the line endings, change that to an empty value ('')

[merlinuwe]

Thanks for the new release and this code snippet, but your code snippet with empty values ('') (or some of mine) seems to slow down considerately editing in Obsidian - not always reproducable.

This is my css code so far. can you please have a look at it? (Perhaps, you can use this for a documentation.)

/*
ToDo: 
Nicht in Tabellen
Nicht am Anfang von Code
Nicht zu Beginn in YAML

*/


/* Überall */
/* Einzelnes Leerzeichen, überall */
.cm-line .cm-highlightSpace[data-display="·"]  {
    background-color: lime;
    background-color: transparent;
}


/* Doppeltes Leerzeichen */
.cm-line .cm-highlightSpace[data-display="··"]:not(:first-child)  {
    background-color: rgba(255, 145, 0, 0.6);
    background-color: rgba(255, 0, 0, 0.3);


}


/* Dreifache Leerzeichen */
.cm-line .cm-highlightSpace[data-display="···"]:not(:first-child)  {
    background-color: rgba(255, 0, 255, 1);
    background-color: rgba(255, 145, 0, 0.6);
    background-color: rgba(255, 0, 0, 0.3);
}


/* Vierfache Leerzeichen */
.cm-line .cm-highlightSpace[data-display="····"]:not(:first-child)  {
    background-color: purple !important;
    background-color: rgba(255, 145, 0, 0.6) !important;
    background-color: rgba(255, 0, 0, 0.3) !important;
}


/* Fünffache und mehr Leerzeichen */

.cm-line .cm-highlightSpace[data-display^="····"]:not(:first-child)  {
background-color: rgba(255, 0, 0, 0.3) !important;
}





/* Gezielt */

/* Einzelne Leerzeichen innerhalb von internen Links */
.cm-line .cm-hmd-internal-link .cm-highlightSpace[data-display="·"]  {
    /* background-color: transparent !important; */

}

/* Mehr als zwei Leerzeichen innerhalb von internen Links */
.cm-line .cm-hmd-internal-link .cm-highlightSpace[data-display^="··"]  {
    background-color: red !important;
    border-radius: 5px;
}


/* Optionale Stile für den gesamten internen Link */
.cm-line .cm-hmd-internal-link  {
    text-decoration: none;
    border-bottom: 2px solid blue;
}


/* Stil für die Link-Klammern */
.cm-line .cm-formatting-link  {
    background-color: rgba(0, 128, 255, 0.3);
}


/* _Setzt_ die Zeilenumbrüche */

body {
  --line-end: '¬';
  --line-break: '↲';
}


/* _Entfernt_ die Zeilenumbrüche */

body {
  --line-end: '';
  --line-break: '';
}

Some other things I found:

Is it possible to avoid the css here?

And at the beginning of code?

And in tables?

[ebullient]

This plugin always shows leading whitespace.

For most indentation, it's an offset of 4 (that's how CodeMirror works, and I'm using the data values they define).

No leading indent is required for lists in YAML headers, you could just remove the leading whitespace (still valid syntax):

tags:
- tag

Or, you could try an additional rule using .cm-hmd-frontmatter, like this:

.markdown-source-view.mod-cm6 .cm-line .cm-hmd-frontmatter .cm-indent-spacing .cm-highlightSpace:before {
  content: ""
}

Leading/trailing whitespace is generally what I want to see, which is why the plugin exists.

[merlinuwe]

For me, this seems to be the solution:

/* Verhindere Formatierung in Markdown-Tabellen */
.cm-line:not(.HyperMD-table-row) {
    --line-end: none;
    --line-break: none;
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Leerzeichen - nicht in Tabellen anwenden */
.cm-line:not(.HyperMD-table-row) .cm-highlightSpace[data-display="·"],
.cm-line:not(.HyperMD-table-row) .cm-hmd-internal-link .cm-highlightSpace[data-display="·"] {
    background-color: transparent !important;
}

.cm-line:not(.HyperMD-table-row) .cm-highlightSpace[data-display="··"]:not(:first-child) {
    background-color: rgba(255, 0, 0, 0.3);
}

.cm-line:not(.HyperMD-table-row) .cm-highlightSpace[data-display="···"]:not(:first-child),
.cm-line:not(.HyperMD-table-row) .cm-highlightSpace[data-display="····"]:not(:first-child),
.cm-line:not(.HyperMD-table-row) .cm-highlightSpace[data-display^="····"]:not(:first-child) {
    background-color: rgba(255, 0, 0, 0.3) !important;
}

/* Interne Links und Klammern - nicht in Tabellen anwenden */
.cm-line:not(.HyperMD-table-row) .cm-hmd-internal-link {
    text-decoration: none;
    border-bottom: 1px solid #00A9DD;
}

.cm-line:not(.HyperMD-table-row) .cm-hmd-internal-link .cm-highlightSpace[data-display^="··"] {
    background-color: rgba(255, 0, 0, 0.3) !important;
    border-radius: 5px;
}

/* Klammernpaare um wiki-Links */
/*
.cm-line:not(.HyperMD-table-row) .cm-formatting-link {
    background-color: rgba(0, 128, 255, 0.3);
}
*/

(You can use this as an example or use it in any way.)

Thanks a lot for your help.

[ebullient]

I've redone the settings panel, and added a few more toggles for frontmatter and codeblocks... but I think you should keep doing what you're doing, if it works for you. ;)