- {/* Header with Language Icon and Copy Button */}
-
-
-
- {languageIcon}
-
-
- {language || "Code"}
-
-
-
-
-
- {/* Code Display */}
-
-
- );
-};
-
-export default CodeBlock;
diff --git a/src/src/style/globals.css b/src/src/style/globals.css
index dea244f..de2d5f5 100644
--- a/src/src/style/globals.css
+++ b/src/src/style/globals.css
@@ -27,3 +27,38 @@
body {
font-family: "ComicRegular";
}
+
+code[data-line-numbers] {
+ counter-reset: line;
+}
+
+code[data-line-numbers] > [data-line]::before {
+ counter-increment: line;
+ content: counter(line);
+
+ /* Other styling */
+ display: inline-block;
+ width: 0.75rem;
+ margin-right: 2rem;
+ text-align: right;
+ color: gray;
+}
+
+
+code[data-line-numbers-max-digits="2"] > [data-line]::before {
+ width: 1.25rem;
+}
+
+code[data-line-numbers-max-digits="3"] > [data-line]::before {
+ width: 1.75rem;
+}
+
+code[data-line-numbers-max-digits="4"] > [data-line]::before {
+ width: 2.25rem;
+}
+
+code {
+ overflow-x: scroll !important;
+ max-width: calc(82vw - 2rem) !important;
+ width: 100% !important;
+}
diff --git a/src/tailwind.config.cjs b/src/tailwind.config.cjs
index 8896cde..179d5ce 100644
--- a/src/tailwind.config.cjs
+++ b/src/tailwind.config.cjs
@@ -96,6 +96,56 @@ module.exports = {
transition: "all 0.2s ease-in-out",
},
+ // Code
+ 'code:not([data-language])': {
+ color: theme('colors.purple.bright'),
+ backgroundColor: '#282828',
+ padding: '0',
+ borderRadius: '0.25rem',
+ fontFamily: 'Comic Code, monospace',
+ fontWeight: '400',
+ fontSize: 'inherit', // Match the parent text size
+ '&::before': { content: 'none' },
+ '&::after': { content: 'none' },
+ },
+
+ 'pre': {
+ backgroundColor: '#282828',
+ color: theme("colors.foreground"),
+ borderRadius: '0.5rem',
+ overflow: 'visible', // This allows the copy button to be positioned outside
+ position: 'relative', // For the copy button positioning
+ marginTop: '1.5rem', // Space for the copy button and language label
+ fontSize: 'inherit', // Match the parent font size
+ },
+
+ 'pre code': {
+ display: 'block',
+ fontFamily: 'Comic Code, monospace',
+ fontSize: '1em', // This will inherit from the prose-lg setting
+ padding: '0',
+ overflow: 'auto', // Enable horizontal scrolling
+ whiteSpace: 'pre',
+ '&::before': { content: 'none' },
+ '&::after': { content: 'none' },
+ },
+
+
+ '[data-rehype-pretty-code-fragment]:nth-of-type(2) pre': {
+ '[data-line]::before': {
+ content: 'counter(line)',
+ counterIncrement: 'line',
+ display: 'inline-block',
+ width: '1rem',
+ marginRight: '1rem',
+ textAlign: 'right',
+ color: '#86e1fc',
+ },
+ '[data-highlighted-line]::before': {
+ color: '#86e1fc',
+ },
+ },
+
// Bold
strong: {
color: theme("colors.orange.bright"),
@@ -123,54 +173,6 @@ module.exports = {
},
},
- // Code
- 'code:not([data-language])': {
- color: theme('colors.purple.bright'),
- backgroundColor: '#282828',
- padding: '0.2em 0.4em',
- borderRadius: '0.25rem',
- fontFamily: 'Comic Code, monospace',
- fontWeight: '400',
- fontSize: 'inherit', // Match the parent text size
- '&::before': { content: 'none' },
- '&::after': { content: 'none' },
- },
-
- 'pre': {
- backgroundColor: '#282828',
- color: theme("colors.foreground"),
- borderRadius: '0.5rem',
- overflow: 'visible', // This allows the copy button to be positioned outside
- position: 'relative', // For the copy button positioning
- marginTop: '1.5rem', // Space for the copy button and language label
- fontSize: 'inherit', // Match the parent font size
- },
-
- 'pre code': {
- display: 'block',
- fontFamily: 'Comic Code, monospace',
- fontSize: '1em', // This will inherit from the prose-lg setting
- padding: '1.25rem',
- overflow: 'auto', // Enable horizontal scrolling
- whiteSpace: 'pre',
- '&::before': { content: 'none' },
- '&::after': { content: 'none' },
- },
-
- '.highlighted': {
- backgroundColor: theme('colors.foreground/5'),
- paddingLeft: '1rem',
- paddingRight: '1rem',
- marginLeft: '-1rem',
- marginRight: '-1rem',
- },
-
- '.word': {
- backgroundColor: theme('colors.foreground/20'),
- padding: '0.2em',
- borderRadius: '0.25rem',
- },
-
// Horizontal rules
hr: {
borderColor: theme("colors.foreground"),