Live preview: Better treatment of code blocks. Code Wrap, Horizontal Scroll and Smart Indent

Feature requests
,
62

This works in preview mode!
No more single line scrolling! :tada::tada::tada:

.markdown-rendered :not(.print) code,
body :not(.print) code {
  word-break: normal;
  word-wrap: break-word;
  white-space: pre;
}

Go thank this gapmiss :folded_hands::folded_hands::folded_hands:
forum.obsidian.md/t/horizontal-scrolling-in-the-code-block/55789/2

Editing mode
Editing mode1440×492 22.5 KB

Preview mode
Preview mode1466×418 13.2 KB

63

I like this! But is there any way to make the “copy code” button float above/anchor to the top right of the view, instead of getting dragged to the left as you scroll? See below:

screen
screen1031×434 23.7 KB

64

+1. it is really important for me.

65

you can use the css snippet to solve the problem:

.markdown-rendered :not(.print) code,
body :not(.print) code {
  word-break: normal;
  overflow-wrap: normal;
  white-space: pre;
}

.el-pre {
  position: relative;
}

.el-pre pre {
  overflow-x: auto;
  position: static;
}

.markdown-rendered button.copy-code-button {
  background-color: var(--code-background);
  border: 1px solid var(--code-border-color);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.theme-light .markdown-rendered button.copy-code-button:hover {
  background-color: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
}

.theme-dark .markdown-rendered button.copy-code-button:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}
67

Here we are 4 years later and it’s still not solved!
One of many Obsidian “Marie Antoinette” moments: “Let them eat cake.”