Differences in code blocks: Border Width and the Scrollbar

[Phroneris]

Description

In the preview provided by this extension, borders and scrollbars of code blocks are different from those on the actual GitHub.

GitHub's Behavior

Rendering:

.very-long-content {
  content: "very long content very long content very long content very long content very long content very long content very long content very long content very long content very long content";
}

Screenshot:

Extension's Behavior

Screenshot:

Difference:

• One-pixel wide border
• Scrollbar without buttons at both ends
• Scrollbar hidden under the bottom rounded corners

While the detailed design of the scrollbar is also up to the browser, the border is clearly different at least.

Specs

• Windows 10 Home 64-bit 22H2
• VS Code 1.82.0
• bierner.github-markdown-preview@0.3.0
• bierner.markdown-preview-github-styles@2.0.2

[jjspace]

The border color is showing up because you have the widgets.border color defined in your settings or the theme you are using for VSCode. I just opened a PR to stop using that https://github.com/mjbvz/vscode-github-markdown-preview-style/pull/116

The scrollbar looks different because VSCode has created a custom one which is also being used inside the markdown preview. There is no way to override or revert a custom scrollbar so unless someone wants to re-implement one that looks close to the default browser one I'm not sure that's something we can address.

[Phroneris]

Congrats on the PR being merged 🎉