Plugin: whitespace #

Showing whitespace (control characters) #

Show Whitespace (CM6) #

This is now the only plugin I install for this purpose.

Repo: ebullient/obsidian-show-whitespace-cm6

Pro: Shows spaces (␣) very well
Cons: Showing line breaks is meh; The tab icon is kind of ugly

Settings:

Suppress plugin styles: True
Always show blockquote markers: (any)
Show all whitespace characters in code blocks: True
Show consecutive whitespace: True
Show all whitespace characters: True
Outline list markers: (any)

/* space */
.cm-line .cm-highlightSpace::before {
  color: var(--text-muted);
  content: attr(data-display);
  opacity: 0.5;
  pointer-events: none;
  position: absolute;
}

/* space in indent */
.cm-indent .cm-highlightSpace::before {
  content: none;
}

/* trailing space */
.cm-line .cm-trailingSpace {
  background: transparent;
}
.cm-line .cm-trailing-space-new-line>.cm-trailingSpace>.cm-highlightSpace::before {
  content: none;
}
.cm-trailing-space-new-line::after {
  color: var(--text-muted);
  content: '↲';
  font-weight: normal;
  opacity: 0.5;
  pointer-events: none;
  position: unset;
  white-space: pre;
}

/* line break */
.cm-line br {
  content: "&nbsp;";
  display: inline-block;
}
.cm-line br::after,
.cm-line:not(:has(br)):not(:has(.cm-trailing-space-new-line)):not(.HyperMD-list-line)::after {
  color: var(--text-muted);
  content: '¬';
  font-weight: normal;
  opacity: 0.5;
  padding-inline-start: 2px;
  pointer-events: none;
  white-space: pre;
}

/* tab */
.cm-line .cm-highlightTab {
  background-image: url('data:image/svg+xml,<svg height="20" width="40" xmlns="http://www.w3.org/2000/svg"><text x="0" y="15" fill="grey" font-size="12px">%E2%87%A5</text></svg>');
  background-position: left center;
  display: inline-block;
  opacity: 0.5;
  tab-size: 2;
  width: 2ch;
}

Show Whitespace #

After several updates, obsidian-show-whitespace-cm6 is already useful enough to completely replace this plugin as of its current state. I only include the following for reference.

Repo: deathau/cm-show-whitespace-obsidian

Reference: Core styles of this plugin, obtained from inspection

Source: deathau/cm-show-whitespace-obsidian/styles.scss

body.plugin-cm-show-whitespace .cm-whitespace::before,
body.plugin-cm-show-whitespace .cm-tab::before,
body.plugin-cm-show-whitespace .CodeMirror-code > div > pre > span > :last-child:after,
body.plugin-cm-show-whitespace .CodeMirror-line > span > :last-child::after,
body.plugin-cm-show-whitespace [class*=cm-trailing-space] + [class*=cm-trailing-space]:last-child::after {
    pointer-events: none;
    color: var(--text-faint);
    font-weight: normal;
    opacity: 0.5;
}

body.plugin-cm-show-whitespace {
    --spaceChar: "·";
    --trailingSpaceChar: "·";
    --singleSpaceChar: var(--spaceChar);
    --tabChar: "→";
    --newlineChar: "¬";
    --strictLineBreakChar: var(--newlineChar);
}

body.plugin-cm-show-whitespace.plugin-cm-show-whitespace-show-strict-line-break {
    --strictLineBreakChar: "↲";
}

Because this plugin has been unmaintained for a while, a patch is needed to make everything look consistent. Add a CSS file with the following contents: (the <br> style came from here)

body.plugin-cm-show-whitespace [class*=cm-trailing-space]::before,
body.plugin-cm-show-whitespace [class*=cm-trailing-space]::after {
  color: var(--text-muted);
}

.cm-line br {
  content: "&nbsp;";
  display: inline-block;
}

.cm-line br::after,
.cm-line:not(:has(br)):not(:has(.cm-trailing-space-new-line))::after {
  content: var(--newlineChar);
  white-space: pre;
  pointer-events: none;
  color: var(--text-muted);
  font-weight: normal;
  opacity: 0.5;
  padding-inline-start: 2px;
}

Control Characters #

Repo: joethei/obsidian-control-characters

When I was looking for an alternative of cm-show-whitespace-obsidian, I found this plugin which also integrates with mgmeyers/obsidian-style-settings to make customising possible without fiddling with CSS files. However, I did not like the default SVGs, and could not bother with finding new SVGs right now, so I am still using the old plugin.