Skip to content

style: custom scrollbars #427

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 19, 2023
Merged

style: custom scrollbars #427

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
61efab6
style: custom overlay scrollbars
rafegoldberg Apr 19, 2023
c062c16
docs: update editor examples
rafegoldberg Apr 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 46 additions & 2 deletions public/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,46 @@ const exampleJson = `{
}
`;

const exampleMarkdown = `# Custom Scrollbars

This is a piece of text that creates scrollbars

Lorem ipsum dolor sit amet, turpis nec facilisis neque vestibulum adipiscing, magna nunc est luctus orci a,
aliquam duis ad volutpat nostra. Vestibulum ultricies suspendisse commodo volutpat pede sed. Bibendum odio
dignissim, ad vitae mollis ac sed nibh quis, suspendisse diam, risus quas blandit phasellus luctus nec,
integer nunc vitae posuere scelerisque. Lobortis quam porta conubia nulla. Et nisl ac, imperdiet vitae ac.
Parturient sit. Et vestibulum euismod, rutrum nunc libero mauris purus convallis. Cum id adipiscing et eget
pretium rutrum, ultrices sapien magnis fringilla sit lorem, eu vitae scelerisque ipsum aliquet, magna sed
fusce vel.

Lectus ultricies libero dolor convallis, sed etiam vel hendrerit egestas viverra, at urna mauris, eget
vulputate dolor voluptatem, nulla eget sollicitudin. Sed tincidunt, elit sociis. Mattis mi tortor dui id
sodales mi, maecenas nam fringilla risus turpis mauris praesent, imperdiet maecenas ultrices nonummy tellus
quis est. Scelerisque nec pharetra quis varius fringilla. Varius vestibulum non dictum pharetra, tincidunt in
vestibulum iaculis molestie, id condimentum blandit elit urna magna pulvinar, quam suspendisse pellentesque
donec. Vel amet ad ac. Nec aut viverra, morbi mi neque massa, turpis enim proin. Tellus eu, fermentum velit
est convallis aliquam velit, rutrum in diam lacus, praesent tempor pellentesque dictum semper augue. Felis
explicabo massa amet lectus phasellus dolor. Ut lorem quis arcu neque felis ultricies, senectus vitae
curabitur sed pellentesque et, id sed risus in sed ac accumsan, blandit arcu quam duis nunc.

Sed leo sollicitudin odio vitae, purus sit egestas, justo eros inceptos auctor fermentum lectus. Ligula luctus
turpis, quod massa vitae elementum orci, nullam fringilla elit tortor. Justo ante tempor amet quam posuere
volutpat. Facilisis pede erat ut hac ultrices ipsum, wisi duis sit metus. Dolor vitae est sed sed vitae. Sed
eu ligula, morbi vestibulum nunc nibh velit ut taciti, ligula elit semper sagittis in, auctor arcu vel eget.
Mauris at vitae nec suspendisse et, aenean proin blandit suscipit. Morbi quam, dolor ultricies. Viverra
tempus. Suspendisse sit dapibus, ac fuga aenean, magna nisl nonummy augue posuere, dictum ut fuga velit
parturient augue interdum, mattis sit tellus.

Vehicula commodo tempus curabitur eros, lacinia erat vulputate lorem vel fermentum donec, lectus sed conubia
id pellentesque. Vel senectus donec pede aliquet dolor sit, nec vivamus justo placerat interdum maecenas,
sodales euismod. Quis netus sapien amet, vestibulum quam nec amet lacinia, quis aliquet, tempor vivamus tellus
enim, suscipit quis eleifend. Amet class phasellus orci pretium, risus in nulla. Neque sit ullamcorper,
ultricies platea id nec suspendisse ac. Et elementum. Dictum nam, ut dui fermentum egestas facilisis elit
augue, adipiscing donec ipsum erat nam pellentesque convallis, vestibulum vestibulum risus id nulla ut mauris,
curabitur aute aptent. Ultrices orci wisi dui ipsum praesent, pharetra felis eu quis. Est fringilla etiam,
maxime sem dapibus et eget, mi enim dignissim nec pretium, augue vehicula, volutpat proin. Et occaecati
lobortis viverra, cum in sed, vivamus tellus. Libero at malesuada est vivamus leo tortor.`;

ReactDOM.render(
<div style={{ margin: '20px' }}>
<h1>Core Syntax Highlighter</h1>
Expand Down Expand Up @@ -103,10 +143,14 @@ ReactDOM.render(
<hr />
<h1>Code Editor</h1>
<h2>Dark Theme</h2>
<pre id="hub-reference">{syntaxHighlighter(exampleCode, 'curl', { editable: true, dark: true })}</pre>
<pre id="hub-reference">
{syntaxHighlighter(exampleMarkdown, 'md', { scrollbarStyle: 'overlay', editable: true, dark: true })}
</pre>

<h2>Light Theme</h2>
<pre id="hub-reference">{syntaxHighlighter(exampleCode, 'curl', { editable: true, dark: false })}</pre>
<pre id="hub-reference">
{syntaxHighlighter(exampleMarkdown, 'md', { scrollbarStyle: 'overlay', editable: true, dark: false })}
</pre>

<hr />
<h1>Code Folding</h1>
Expand Down
4 changes: 3 additions & 1 deletion src/codeMirror/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import CodeMirror from 'codemirror';
import 'codemirror/addon/fold/brace-fold';
import 'codemirror/addon/fold/foldgutter';
import 'codemirror/addon/runmode/runmode';
import 'codemirror/addon/scroll/simplescrollbars';
import 'codemirror/addon/scroll/simplescrollbars.css';
import 'codemirror/mode/meta';
import PropTypes from 'prop-types';
import React from 'react';
Expand Down Expand Up @@ -195,7 +197,7 @@ const ReadmeCodeMirror = (code, lang, opts = { tokenizeVariables: false, highlig
const mode = getMode(lang);
const output = [];

const [codeWithoutVars, reinsertVariables] = extractVariables(code, opts);
const [codeWithoutVars, reinsertVariables] = extractVariables(code, { scrollbarStyle: 'overlay', ...opts });

let curStyle = null;
let accum = '';
Expand Down
14 changes: 14 additions & 0 deletions src/codeMirror/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,20 @@ $lightHighlight: rgba($lightColor, 0.1);
}
}

// Custom scrollbar styles
// see: https://codemirror.net/5/demo/simplescrollbars.html
.CodeMirror {
&-scrollbar-filler {
display: none !important;
}
&-overlayscroll {
&-horizontal div,
&-vertical div {
background: rgba(#cacaca, 0.5) !important;
}
}
}

.cm-linerow {
position: relative;
text-indent: $gutterWidth + 4px;
Expand Down