:root { /* Do not remove this line */ /*▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ BBStylish – Attractive Markdown Preview CSS for BBEdit Made by Ryan Dotson – rd@nostodnayr.net Version 1 14 October 2019 • · ¶ · • BBStylish is a stylesheet for BBEdit’s Preview window that offers attractive defaults, but can be customised without knowing CSS. ·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•· FILE DIRECTORY ·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•· · 0. Instructions for use · · 1. Fonts · · 2. Text Zoom · · 3. Colours · · 4. Link Underlining · · 5. Line Height / Spacing · · 6. Text Width · · 7. Margin / Centring · · 8. Header and Footer Space · ·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•· ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼*/ /* 0. I N S T R U C T I O N S F O R U S E ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ INSTALLATION ------------ Install the file in the ‘Preview CSS’ folder of your BBEdit Application Support folder. (It’s easily opened from the menu bar: BBEdit › Folders › Preview CSS.) If you want all Markdown previews to use this style automatically, then keep this file’s name as it is: DefaultCSS_Markdown.css ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ EDITING ------- Obviously the best way to edit this file is using BBEdit itself. You can get to it any time using the Folders menu, as detailed above. If you’ve got a Preview window open, you can also open this file from the ‘CSS:’ pop-up menu by holding down the option (⌥) key when you choose this file from the menu. ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ HOW THE SETTINGS WORK --------------------- You can customise this file to better suit your preferences. Out of necessity, it requires some precision, but I’ve tried to make it approachable if you’re not familiar or comfortable with CSS. Explanations and examples are given for each of the ‘settings’. The setting (variable) is preceded by two hyphens and ends with a colon, like so: --text-font: Your setting goes after the colon, followed by a *semicolon*. Thus a full setting line looks like this: --text-font: "New York"; This bears repeating: ░▒▓█ The line must end with a semicolon. █▓▒░ Otherwise, spaces and tabs are ignored, except between quotation marks. ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ‘HOT’ UPDATING -------------- You can get an (almost) live preview of your settings by keeping a BBEdit Preview window open as you edit this file. When the file is saved, the Preview window will refresh automatically, showing the updated settings. This way you can easily confirm or undo any changes you make. ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ TROUBLESHOOTING --------------- If something doesn’t look as you expect, first check for misplaced spaces, semicolons, quotation marks and other punctuation. In almost every case, these will result in unexpected behaviour. If necessary, you can download a fresh copy of this file from: ▴▾▴▾▴▾▴▾▴▾▴▾▴▾▴▾▴▾▴▾▴▾▴▾▴▾▴▾▴▾▴▾▴▾▴▾▴▾▴▾▴▾▴▾▴▾▴▾▴▾▴▾▴▾▴▾▴▾*/ /* 1. F O N T S ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ You can customise the typeface/font used for the preview by changing the values here. Apple’s default system font, San Francisco, can be invoked using a special syntax: -apple-system Any font on your Mac can be used when previewing in BBEdit. Enter its name surrounded by quotation marks: "Gill Sans" In some cases you may need to specify the weight (e.g. book, regular, bold) in addition to the typeface’s name. Try it without first, though. You can specify a fallback font if your first choice isn’t available for some reason, like you’re on a different Mac than usual. If you haven’t installed Apple’s code font, SF Mono, then the Preview will skip over it and use Monaco instead. */ --text-font: -apple-system; --code-font: "SF Mono", "Monaco"; /* 2. T E X T Z O O M ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ Text zoom is a percentage of the default size, similar to the BBEdit ‘Text Zoom’ feature. Because some ‘code’ fonts can appear larger than other text, its zoom can be set separately. You do not need to enter the % sign for these settings. Just enter a number. */ --text-zoom: 120; --code-text-zoom: 85; /* 3. C O L O U R C U S T O M I S A T I O N ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ There are four colours that can be customised using these settings. They are: - text: Colour for ‘body’ text. - text-header: Colour for h1..6 header text. - text-code: Colour for ‘code’ text. Some prefer this to be a lighter colour. - background: Colour for the page background. - link: Colour for links. - link-hover: Colour for when the pointer is hovering over a link. There is no colour for visited links because BBEdit doesn’t ‘know about’ what links have been visited in Safari or other browsers. To change these colours, it’s convenient to use the colour picker in BBEdit. Select the colour code you want to change (e.g. #000000), then open the colour picker palette by choosing: Window → Palettes → Colours When you click on a new colour it should replace what’s already selected. */ /*──────────────────● light ●──────────────────*/ --light-mode-text: #333333; --light-mode-headers: #000000; --light-mode-code: #222222; --light-mode-background: #f8f8f8; --light-mode-link: #45448F; --light-mode-link-hover: #6867AA; /*───────────────────● dark ●──────────────────*/ --dark-mode-text: #D6D6D6; --dark-mode-headers: #D6D6D6; --dark-mode-code: #D6D6D6; --dark-mode-background: #1E1E1E; --dark-mode-link: #9493C8; --dark-mode-link-hover: #6867AA; /* 4. L I N K U N D E R L I N I N G ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ You can add or remove link underlining by specifying: underline to show it, or to hide it: none By default, underlines are hidden, so the text feels less interrupted. */ --link-underline: none; /* When the pointer is hovering over a link, the underline is shown. */ --link-underline-hover: underline; /* 5. L I N E H E I G H T / S P A C I N G ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ The line height effectively sets how much space comes between each line. For example, you could change this setting to 2 to make the text double-spaced. */ --line-height: 1.55; /* 6. T E X T W I D T H ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ The text-width and max-width settings control how wide the column of text will appear in the Preview window. These settings have been slightly overwrought in the interest of making the system more flexible. Ideally, the defaults, perhaps with minor adjustment, will serve you well. The two settings work in tandem. For narrow windows, the text-width setting of 80% wins, keeping the lines of text at a comfortably readable length. ╔═════════════════════════════════════╗ ║ ●●● Narrow Width Preview ║ ╠═════════════════════════════════════╣ ║ ░░░░░░░░░░░░░░░░░░░░░░░░░░░ ║ ║ ░░░░░░░░░░░░░░░░░░░░░░░░░░░ ║ ║ ░░░░░░░░░░░░80%░░░░░░░░░░░░ ║ ║ ░░░░░░░░░░░░░░░░░░░░░░░░░░░ ║ ║ ░░░░░░░░░░░░░░░░░░░░░░░░░░░ ║ ╚═════════════════════════════════════╝ This 80% is of the window’s width. If the window were exceptionally wide, though, using this setting alone could result in a very long, hard to read, line of text. ╔═════════════════════════════════════════════╗ ║ ●●● Wide Width Preview ║ ╠═════════════════════════════════════════════╣ ║ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ║ ║ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ║ ║ ░░░░░░░░░░░░░░░░80%░░░░░░░░░░░░░░░░ ║ ║ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ║ ║ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ║ ╚═════════════════════════════════════════════╝ For that case, the max-width setting steps in to hem in the line length. Again, in order to produce a text that’s comfortably readable. ╔══════════════════════════════════════════════╗ ║ ●●● Wide Width Preview ║ ╠══════════════════════════════════════════════╣ ║ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ║ ║ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ║ ║ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ║ ║ ░░░░░░░Max-restricted░░░░░░░ ║ ║ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ║ ║ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ║ ║ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ║ ╚══════════════════════════════════════════════╝ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ /* The text-width is a percentage of the Preview window’s width. Enter a number – no % sign is needed. */ --text-width: 80; /* The line-length will restrict the width specified above and is an *approximate* maximum number of characters that should appear on one line. Depending on the font and text zoom factor, this number may become completely disconnected from the number of characters per line. */ --line-length: 62; /* 7. M A R G I N / C E N T R I N G ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ The default settings centre the text column by setting the left and right margin to `auto`. If you would prefer the text be left-justified, you can change this to 0. */ --margin: auto; /* The code indentation is an additional margin added to code blocks. If you don’t want it, change it to 0. */ --code-indent: 2; /* 8. H E A D E R & F O O T E R S P A C E ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ To give the text a bit of breathing room at the top and bottom of the window, this file adds some padding there. If your preview window is close to the bottom of your screen, you may appreciate having a little extra space there. This setting can be adjusted using a plain number, positive or negative, to increase or decrease the amount of space, respectively. */ --header-space: 0; --footer-space: 1.5; /*░░▒▒▓▓███████████████████████████████████████████▓▓▒▒░░*/ /*░░▒▒▓▓██████████▓▒░ End of Settings ░▒▓██████████▓▓▒▒░░*/ /*░░▒▒▓▓███████████████████████████████████████████▓▓▒▒░░*/ } /* :root */ /* Now, to do something with all those variables. */ /* I’ll use the line-height as vertical spacing, so rather than fight the system, reset it and help keep things consistent. */ *, body { margin-top: 0; margin-bottom: 0; } /* then make the default spacing between elements equal to the line-height, in rem. */ * + * { margin-top: calc(var(--line-height) * 1rem); } /* lists don’t need the vertical spacing */ li + li, li ul, li ol { margin-top: 0; } /* nor paragraphs coming after lower headings */ h3 + p, h4 + p, h5 + p, h6 + p { margin-top: 0; } /* and headings get a little extra */ h1, h2, h3, h4, h5, h6 { margin-top: calc(var(--line-height) * 2rem); color: var(--light-mode-headers); } /* unless two big ones are touching */ h1 + h2, h2 + h3, h1 + h3 { margin-top: calc(var(--line-height) * 1rem); } body { font-family: var(--text-font); font-size: calc(var(--text-zoom) * 1%); font-weight: var(--text-weight); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: var(--line-height); overflow-wrap: break-word; margin-left: var(--margin); margin-right: var(--margin); /* add the input, converted to rem, to my default */ margin-top: calc( (var(--line-height) * 2.5rem) + (var(--header-space) * 1rem) ); margin-bottom: calc( (var(--line-height) * 3rem) + (var(--footer-space) * 1rem) ); /* convert input to percentage */ width: calc(var(--text-width) * 1%); /* tried to be clever and make the max-width more precise. 0.5em works moderately well so that if --max-width is 55, a line is approximately 55 characters long. */ max-width: calc(var(--line-length) * 0.5em); color: var(--light-mode-text); background-color: var(--light-mode-background); } blockquote { font-size: 90%; line-height: calc(var(--line-height) * 0.9); /* margin-left: calc(var(--blockquote-indent) * 1rem); */ /* margin-right: calc(var(--blockquote-indent) * 1rem); */ } a { text-decoration: var(--link-underline); color: var(--light-mode-link); } a:hover { text-decoration: var(--link-underline-hover); color: var(--light-mode-link-hover); } pre, code { font-family: var(--code-font); font-size: calc(var(--code-text-zoom) * 1%); color: var(--light-mode-code); } pre { margin-left: calc(var(--code-indent) * 1rem); margin-right: calc(var(--code-indent) * 1rem); } img { max-width: 100%; } @media (prefers-color-scheme: dark) { body { color: var(--dark-mode-text); background-color: var(--dark-mode-background); -webkit-font-smoothing: subpixel-antialiased; } h1, h2, h3, h4, h5, h6 { color: var(--dark-mode-headers); } a { color: var(--dark-mode-link); } a:hover { color: var(--dark-mode-link-hover); } pre, code { color: var(--dark-mode-code); } } .post-navigation { display: flex; flex-direction: column; gap: calc(var(--line-height) * 0.5rem); margin-top: calc(var(--line-height) * 2rem); padding-top: calc(var(--line-height) * 1rem); border-top: 1px solid var(--light-mode-text); opacity: 0.3; width: 100%; } .prev-post, .next-post { text-decoration: none; padding: calc(var(--line-height) * 0.5rem) calc(var(--line-height) * 1rem); border: 1px solid var(--light-mode-text); border-radius: 4px; background-color: var(--light-mode-background); color: var(--light-mode-text); transition: all 0.2s ease; text-align: center; display: block; width: 100%; box-sizing: border-box; font-size: 80%; opacity: 0.8; } .prev-post:hover, .next-post:hover { background-color: var(--light-mode-link); color: var(--light-mode-background); border-color: var(--light-mode-link); opacity: 1; text-decoration: none; } /* For wider screens, show side-by-side */ @media (min-width: 600px) { .post-navigation { flex-direction: row; justify-content: space-between; align-items: stretch; } .prev-post, .next-post { width: 48%; flex: 1; } .prev-post:only-child, .next-post:only-child { width: 60%; margin: 0 auto; } } /* Dark mode support */ @media (prefers-color-scheme: dark) { .post-navigation { border-top-color: var(--dark-mode-text); } .prev-post, .next-post { border-color: var(--dark-mode-text); background-color: var(--dark-mode-background); color: var(--dark-mode-text); } .prev-post:hover, .next-post:hover { background-color: var(--dark-mode-link); color: var(--dark-mode-background); border-color: var(--dark-mode-link); } }