fix[docs/learn]: correct vertical alignment issue in schema example

json-schema-org · Jan 12, 2025 · a709388 · a709388
1 parent 4fe7488
commit a709388
Showing 1 changed file with 14 additions and 23 deletions.
diff --git a/components/StyledMarkdown.tsx b/components/StyledMarkdown.tsx
@@ -307,34 +307,25 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
               }
 
               return (
-                <div className='overflow-x-auto flex-basis-0 max-w-full min-w-0 shrink lg:max-w-[800px] xl:max-w-[900px]'>
-                  {/* definitely not the best way to prevent overflowing. found no better way that worked */}
+                <div className='overflow-x-auto rounded-lg bg-gray-800 text-white'>
                   <Highlight
-                    language={language}
-                    wrapLines={true}
-                    wrapLongLines={true}
-                    customStyle={{
-                      borderRadius: 10,
-                      paddingTop: 15,
-                      paddingBottom: 10,
-                      paddingLeft: 10,
-                      marginBottom: 20,
-                      maxWidth: '100%',
-                    }}
-                    lineNumberStyle={{
-                      marginRight: 10,
-                    }}
+                    language={language.replace('language-', '')}
                     style={atomOneDark}
                     showLineNumbers
-                    startingLineNumber={1}
-                    lineProps={() => {
-                      const isHighlighted = false;
-                      return {
-                        className: `${isHighlighted ? 'bg-code-editor-dark-highlight block ml-10 w-full' : ''} pr-8`,
-                      };
+                    lineNumberStyle={{
+                      color: '#888',
+                      fontSize: '12px',
+                      paddingRight: '10px',
+                    }}
+                    customStyle={{
+                      padding: '12px',
+                      fontFamily: 'monospace',
+                      fontSize: '14px',
                     }}
                     codeTagProps={{
-                      className: 'mr-8',
+                      style: {
+                        fontFamily: 'monospace',
+                      },
                     }}
                   >
                     {code}