feat(rehype-highlight-lines): Themeing and overflow fix
This commit is contained in:
Joost De Cock
parent
aac5156c9d
commit
1fae0bc3d8
9 changed files with 139 additions and 118 deletions
|
|
@ -99,7 +99,16 @@ export default (userOptions = {}) => {
|
|||
? options[`${variant}Class`]
|
||||
: [options[`${variant}Class`]],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'div',
|
||||
properties: {
|
||||
className: ['code-section-inner'],
|
||||
},
|
||||
children: [...Object.values(children)],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
if (!options.swallow) parent[i].children.push(curNode)
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@ const Example = ({ app, draft, settings, xray = false }) => {
|
|||
gist._state.xray = { enabled: true }
|
||||
gist.margin = 20
|
||||
}
|
||||
console.log(draft.draft, draft.sample, settings)
|
||||
if (!draft.sample) return null
|
||||
const patternProps = settings.sample
|
||||
? draft.sample().getRenderProps()
|
||||
|
|
@ -72,7 +71,11 @@ const buildExample = (children, settings = { margin: 5 }, tutorial = false, pape
|
|||
code = code.split(')')
|
||||
code = code[0] + ') => ' + code.slice(1).join(')')
|
||||
}
|
||||
try {
|
||||
draft = eval(code)
|
||||
} catch (err) {
|
||||
console.log(err, code)
|
||||
}
|
||||
const part = {
|
||||
draft: draft,
|
||||
measurements: tutorial ? [] : ['head'],
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ const mdxLoader = async (language, site, slug, jargon) => {
|
|||
[
|
||||
rehypeHighlightLines,
|
||||
{
|
||||
highlightClass: ['highlight-lines', 'bg-yellow-300', 'bg-opacity-5', 'border-l-4'],
|
||||
highlightClass: ['highlight-lines', 'border-l-4'],
|
||||
strikeoutClass: [
|
||||
'strikeout-lines',
|
||||
'bg-orange-300',
|
||||
|
|
|
|||
|
|
@ -37,9 +37,15 @@ div.hljs > pre > code {
|
|||
*/
|
||||
div.hljs > pre > code section {
|
||||
margin: 0 -1rem;
|
||||
padding: 0.25rem 1rem 0.25rem calc(1rem - 4px);
|
||||
padding: 0 1rem 0 calc(1rem - 4px);
|
||||
border-left: 0.35rem solid transparent;
|
||||
border-color: rgb(130, 203, 21);
|
||||
background-color: var(--code-background-highlight-color);
|
||||
}
|
||||
div.hljs > pre > code section > div.code-section-inner {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.25rem 0.25rem 0;
|
||||
background-color: var(--code-background-highlight-color);
|
||||
}
|
||||
div.hljs > pre > code section.strikeout-lines {
|
||||
border-color: rgb(255, 75, 57);
|
||||
|
|
|
|||
|
|
@ -3,8 +3,6 @@
|
|||
@tailwind utilities;
|
||||
|
||||
@import './code.css';
|
||||
/* import for dot graphs */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Montserrat+Alternates:ital,wght@1,900&display=swap');
|
||||
|
||||
@layer components {
|
||||
/* Applied styles for common HTML tags */
|
||||
|
|
|
|||
|
|
@ -1,33 +1,34 @@
|
|||
const colors = require('tailwindcss/colors')
|
||||
|
||||
module.exports = {
|
||||
'fontFamily': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
|
||||
fontFamily:
|
||||
'-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
|
||||
|
||||
'base-100': colors.neutral['900'],
|
||||
'base-200': colors.neutral['700'],
|
||||
'base-300': colors.neutral['600'],
|
||||
'base-content': colors.neutral['300'],
|
||||
|
||||
'primary': colors.violet['700'],
|
||||
primary: colors.violet['700'],
|
||||
'primary-focus': colors.violet['600'],
|
||||
'primary-content': colors.violet['50'],
|
||||
|
||||
'secondary': colors.sky['500'],
|
||||
secondary: colors.sky['500'],
|
||||
'secondary-focus': colors.sky['400'],
|
||||
'secondary-content': colors.sky['50'],
|
||||
|
||||
'accent': colors.pink['500'],
|
||||
accent: colors.pink['500'],
|
||||
'accent-focus': colors.pink['400'],
|
||||
'accent-content': colors.pink['50'],
|
||||
|
||||
'neutral': '#000000', // Dark as my soul
|
||||
neutral: '#000000', // Dark as my soul
|
||||
'neutral-focus': colors.neutral['800'],
|
||||
'neutral-content': colors.neutral['50'],
|
||||
|
||||
'info': colors.indigo['700'],
|
||||
'success': colors.green['700'],
|
||||
'warning': colors.orange['500'],
|
||||
'error': colors.red['700'],
|
||||
info: colors.indigo['700'],
|
||||
success: colors.green['700'],
|
||||
warning: colors.orange['500'],
|
||||
error: colors.red['700'],
|
||||
|
||||
'--btn-info-content': colors.neutral[50],
|
||||
'--btn-success-content': colors.neutral[50],
|
||||
|
|
@ -44,6 +45,7 @@ module.exports = {
|
|||
)`,
|
||||
|
||||
'--code-background-color': '#111',
|
||||
'--code-background-highlight-color': '#191919',
|
||||
'--code-border-color': colors.neutral['800'],
|
||||
'--code-color': colors.neutral['300'],
|
||||
'--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
|
||||
|
|
@ -60,7 +62,7 @@ module.exports = {
|
|||
'--code-color-string': colors.sky['300'],
|
||||
'--code-font-style-string': 'italic',
|
||||
'--code-color-variable': colors.indigo['300'],
|
||||
'--code-color-comment': colors.neutral['600'],
|
||||
'--code-color-comment': colors.neutral['400'],
|
||||
'--code-color-tag': colors.green['600'],
|
||||
'--code-color-property': colors.yellow['200'],
|
||||
'--code-font-weight-property': 'bold',
|
||||
|
|
|
|||
|
|
@ -3,33 +3,33 @@ const colors = require('tailwindcss/colors')
|
|||
const bg = '#002808'
|
||||
|
||||
module.exports = {
|
||||
'fontFamily': `ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;`,
|
||||
fontFamily: `ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;`,
|
||||
|
||||
'base-100': bg,
|
||||
'base-200': colors.lime['900'],
|
||||
'base-300': colors.lime['800'],
|
||||
'base-content': colors.lime['500'],
|
||||
|
||||
'primary': colors.lime['700'],
|
||||
primary: colors.lime['700'],
|
||||
'primary-focus': colors.lime['600'],
|
||||
'primary-content': colors.lime['50'],
|
||||
|
||||
'secondary': colors.lime['400'],
|
||||
secondary: colors.lime['400'],
|
||||
'secondary-focus': colors.lime['500'],
|
||||
'secondary-content': bg,
|
||||
|
||||
'accent': colors.lime['700'],
|
||||
accent: colors.lime['700'],
|
||||
'accent-focus': colors.lime['600'],
|
||||
'accent-content': colors.yellow['200'],
|
||||
|
||||
'neutral': '#001c06', // Even darker
|
||||
neutral: '#001c06', // Even darker
|
||||
'neutral-focus': colors.lime['600'],
|
||||
'neutral-content': colors.lime['200'],
|
||||
|
||||
'info': colors.lime['700'],
|
||||
'success': colors.lime['700'],
|
||||
'warning': colors.lime['700'],
|
||||
'error': colors.lime['700'],
|
||||
info: colors.lime['700'],
|
||||
success: colors.lime['700'],
|
||||
warning: colors.lime['700'],
|
||||
error: colors.lime['700'],
|
||||
|
||||
'--btn-info-content': colors.teal[300],
|
||||
'--btn-success-content': colors.green[300],
|
||||
|
|
@ -44,6 +44,7 @@ module.exports = {
|
|||
)`,
|
||||
|
||||
'--code-background-color': '#002407',
|
||||
'--code-background-highlight-color': '#191919',
|
||||
'--code-border-color': colors.lime['900'],
|
||||
'--code-color': colors.lime['600'],
|
||||
'--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
|
||||
|
|
@ -60,7 +61,7 @@ module.exports = {
|
|||
'--code-color-string': colors.lime['200'],
|
||||
'--code-font-style-string': 'italic',
|
||||
'--code-color-variable': colors.lime['400'],
|
||||
'--code-color-comment': colors.lime['600'],
|
||||
'--code-color-comment': colors.lime['700'],
|
||||
'--code-color-tag': colors.lime['400'],
|
||||
'--code-color-property': colors.lime['200'],
|
||||
'--code-font-weight-property': 'bold',
|
||||
|
|
@ -106,12 +107,12 @@ module.exports = {
|
|||
'--pattern-text-4xl': '3rem',
|
||||
|
||||
'--pattern-scale': '1',
|
||||
'--pattern-stroke-xs': "0.2px",
|
||||
'--pattern-stroke-sm': "0.4px",
|
||||
'--pattern-stroke': "0.7px",
|
||||
'--pattern-stroke-lg': "1.3px",
|
||||
'--pattern-stroke-xl': "2px",
|
||||
'--pattern-stroke-2xl': "4px",
|
||||
'--pattern-stroke-3xl': "6px",
|
||||
'--pattern-stroke-4xl': "8px",
|
||||
'--pattern-stroke-xs': '0.2px',
|
||||
'--pattern-stroke-sm': '0.4px',
|
||||
'--pattern-stroke': '0.7px',
|
||||
'--pattern-stroke-lg': '1.3px',
|
||||
'--pattern-stroke-xl': '2px',
|
||||
'--pattern-stroke-2xl': '4px',
|
||||
'--pattern-stroke-3xl': '6px',
|
||||
'--pattern-stroke-4xl': '8px',
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,33 @@
|
|||
const colors = require('tailwindcss/colors')
|
||||
|
||||
module.exports = {
|
||||
'fontFamily': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
|
||||
fontFamily:
|
||||
'-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
|
||||
|
||||
'base-100': colors.fuchsia['50'],
|
||||
'base-200': colors.neutral['200'],
|
||||
'base-300': colors.neutral['400'],
|
||||
'base-content': colors.neutral['700'],
|
||||
|
||||
'primary': colors.sky['500'],
|
||||
primary: colors.sky['500'],
|
||||
'primary-focus': colors.sky['400'],
|
||||
'primary-content': colors.sky['50'],
|
||||
'secondary': colors.violet['500'],
|
||||
secondary: colors.violet['500'],
|
||||
'secondary-focus': colors.violet['400'],
|
||||
'secondary-content': colors.violet['50'],
|
||||
|
||||
'accent': colors.fuchsia['500'],
|
||||
accent: colors.fuchsia['500'],
|
||||
'accent-focus': colors.fuchsia['400'],
|
||||
'accent-content': colors.neutral['50'],
|
||||
|
||||
'neutral': colors.neutral['900'],
|
||||
neutral: colors.neutral['900'],
|
||||
'neutral-focus': colors.neutral['700'],
|
||||
'neutral-content': colors.yellow['50'],
|
||||
|
||||
'info': colors.pink['400'],
|
||||
'success': colors.green['600'],
|
||||
'warning': colors.amber['500'],
|
||||
'error': colors.red['600'],
|
||||
info: colors.pink['400'],
|
||||
success: colors.green['600'],
|
||||
warning: colors.amber['500'],
|
||||
error: colors.red['600'],
|
||||
|
||||
'--theme-gradient': `repeating-linear-gradient(
|
||||
90deg,
|
||||
|
|
@ -45,6 +46,7 @@ module.exports = {
|
|||
)`,
|
||||
|
||||
'--code-background-color': colors.neutral['800'],
|
||||
'--code-background-highlight-color': '#313131',
|
||||
'--code-border-color': colors.neutral['900'],
|
||||
'--code-color': colors.neutral['100'],
|
||||
'--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
|
||||
|
|
@ -108,13 +110,12 @@ module.exports = {
|
|||
'--pattern-text-4xl': '3rem',
|
||||
|
||||
'--pattern-scale': '1',
|
||||
'--pattern-stroke-xs': "0.2px",
|
||||
'--pattern-stroke-sm': "0.4px",
|
||||
'--pattern-stroke': "0.7px",
|
||||
'--pattern-stroke-lg': "1.3px",
|
||||
'--pattern-stroke-xl': "2px",
|
||||
'--pattern-stroke-2xl': "4px",
|
||||
'--pattern-stroke-3xl': "6px",
|
||||
'--pattern-stroke-4xl': "8px",
|
||||
'--pattern-stroke-xs': '0.2px',
|
||||
'--pattern-stroke-sm': '0.4px',
|
||||
'--pattern-stroke': '0.7px',
|
||||
'--pattern-stroke-lg': '1.3px',
|
||||
'--pattern-stroke-xl': '2px',
|
||||
'--pattern-stroke-2xl': '4px',
|
||||
'--pattern-stroke-3xl': '6px',
|
||||
'--pattern-stroke-4xl': '8px',
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,8 @@ module.exports = {
|
|||
* That means we're not loading any fonts in the browser,
|
||||
* but rather relying on what the user has available locally.
|
||||
*/
|
||||
'fontFamily': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
|
||||
fontFamily:
|
||||
'-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
|
||||
|
||||
/* COLORS
|
||||
*
|
||||
|
|
@ -47,14 +48,14 @@ module.exports = {
|
|||
'base-content': colors.neutral['700'],
|
||||
|
||||
// primary: The main brand color and color of the primary button
|
||||
'primary': colors.violet['500'],
|
||||
primary: colors.violet['500'],
|
||||
// primary-focus: The :hover color for the primary button
|
||||
'primary-focus': colors.violet['600'],
|
||||
// primary-content: The text color on a primary button
|
||||
'primary-content': colors.neutral['50'],
|
||||
|
||||
// secondary: The link color on default backgrounds (base-100)
|
||||
'secondary': colors.sky['500'],
|
||||
secondary: colors.sky['500'],
|
||||
// secondary-focus: The :hover link color for default backgrounds. Or:
|
||||
// secondary-focus: An alternative link color for on dark backgrounds
|
||||
'secondary-focus': colors.sky['400'],
|
||||
|
|
@ -63,7 +64,7 @@ module.exports = {
|
|||
|
||||
// accent: The accent color is used to highlight active things
|
||||
// Should be something is positive/neutral. Avoid red or orange.
|
||||
'accent': colors.pink['400'],
|
||||
accent: colors.pink['400'],
|
||||
// accent-focus: The :hover color for the accent button
|
||||
'accent-focus': colors.pink['300'],
|
||||
// accent-content: The text color for the accent button
|
||||
|
|
@ -71,7 +72,7 @@ module.exports = {
|
|||
|
||||
// neutral: Used as the background for the footer and navigation on desktop
|
||||
// Should always be dark
|
||||
'neutral': colors.neutral['900'],
|
||||
neutral: colors.neutral['900'],
|
||||
// neutral-focus: Typically a shade lighter than neutral
|
||||
'neutral-focus': colors.neutral['700'],
|
||||
// neutral-content: The text color on neutral backgrounds
|
||||
|
|
@ -79,23 +80,23 @@ module.exports = {
|
|||
|
||||
// info: Used rarely, can be another color best somewhat neutral looking
|
||||
// and should work with the default text color
|
||||
'info': colors.indigo['600'],
|
||||
info: colors.indigo['600'],
|
||||
// Text color on the info button
|
||||
'--btn-info-content': colors.neutral[50],
|
||||
// success: Used rarely, but if it is it's in notifications indicating success
|
||||
// Typically some shade of green
|
||||
'success': colors.green['600'],
|
||||
success: colors.green['600'],
|
||||
// Text color on the success button
|
||||
'--btn-success-content': colors.neutral[50],
|
||||
// warning: We don't do warnings, but this is used for the tabs under code blocks
|
||||
// and a couple of other UI elements.
|
||||
'warning': colors.orange['500'],
|
||||
warning: colors.orange['500'],
|
||||
// Text color on the warning button
|
||||
'--btn-warning-content': colors.neutral[50],
|
||||
// error: Used rarely, but if it is it's in notifications indicating success
|
||||
// or the danger button
|
||||
// Typically some shade of red
|
||||
'error': colors.red['600'],
|
||||
error: colors.red['600'],
|
||||
// Text color on the error button
|
||||
'--btn-error-content': colors.neutral[50],
|
||||
|
||||
|
|
@ -121,6 +122,7 @@ module.exports = {
|
|||
* The names should (hopefully) speak for themselves
|
||||
*/
|
||||
'--code-background-color': colors.neutral['800'],
|
||||
'--code-background-highlight-color': '#313131',
|
||||
'--code-border-color': colors.neutral['900'],
|
||||
'--code-color': colors.neutral['100'],
|
||||
'--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
|
||||
|
|
@ -236,38 +238,37 @@ module.exports = {
|
|||
// Pattern overal scale for strokes and text sizes
|
||||
'--pattern-scale': '1',
|
||||
// Pattern xs stroke width
|
||||
'--pattern-stroke-xs': "0.2px",
|
||||
'--pattern-stroke-xs': '0.2px',
|
||||
// Pattern sm stroke width
|
||||
'--pattern-stroke-sm': "0.4px",
|
||||
'--pattern-stroke-sm': '0.4px',
|
||||
// Pattern default stroke width
|
||||
'--pattern-stroke': "0.7px",
|
||||
'--pattern-stroke': '0.7px',
|
||||
// Pattern lg stroke width
|
||||
'--pattern-stroke-lg': "1.3px",
|
||||
'--pattern-stroke-lg': '1.3px',
|
||||
// Pattern xl stroke width
|
||||
'--pattern-stroke-xl': "2px",
|
||||
'--pattern-stroke-xl': '2px',
|
||||
// Pattern 2xl stroke width
|
||||
'--pattern-stroke-2xl': "4px",
|
||||
'--pattern-stroke-2xl': '4px',
|
||||
// Pattern 3xl stroke width
|
||||
'--pattern-stroke-3xl': "6px",
|
||||
'--pattern-stroke-3xl': '6px',
|
||||
// Pattern 4xl stroke width
|
||||
'--pattern-stroke-4xl': "8px",
|
||||
'--pattern-stroke-4xl': '8px',
|
||||
// Pattern 5xl stroke width
|
||||
'--pattern-stroke-5xl': "12px",
|
||||
'--pattern-stroke-5xl': '12px',
|
||||
// Pattern 6xl stroke width
|
||||
'--pattern-stroke-6xl': "16px",
|
||||
'--pattern-stroke-6xl': '16px',
|
||||
// Pattern 7xl stroke width
|
||||
'--pattern-stroke-7xl': "20px",
|
||||
'--pattern-stroke-7xl': '20px',
|
||||
|
||||
// Pattern sampling styles
|
||||
'--pattern-sample-1': colors.red["500"],
|
||||
'--pattern-sample-2': colors.orange["500"],
|
||||
'--pattern-sample-3': colors.yellow["500"],
|
||||
'--pattern-sample-4': colors.lime["500"],
|
||||
'--pattern-sample-5': colors.emerald["500"],
|
||||
'--pattern-sample-6': colors.cyan["500"],
|
||||
'--pattern-sample-7': colors.blue["500"],
|
||||
'--pattern-sample-8': colors.violet["500"],
|
||||
'--pattern-sample-9': colors.fuchsia["500"],
|
||||
'--pattern-sample-10': colors.rose["500"],
|
||||
|
||||
'--pattern-sample-1': colors.red['500'],
|
||||
'--pattern-sample-2': colors.orange['500'],
|
||||
'--pattern-sample-3': colors.yellow['500'],
|
||||
'--pattern-sample-4': colors.lime['500'],
|
||||
'--pattern-sample-5': colors.emerald['500'],
|
||||
'--pattern-sample-6': colors.cyan['500'],
|
||||
'--pattern-sample-7': colors.blue['500'],
|
||||
'--pattern-sample-8': colors.violet['500'],
|
||||
'--pattern-sample-9': colors.fuchsia['500'],
|
||||
'--pattern-sample-10': colors.rose['500'],
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue