fix line-height of code and clean up tabs

Author: davemooreuws

docs/index.mdx

@@ -22,9 +22,9 @@ Oh, and it supports basically any language, like JavaScript, TypeScript, Python,
   <LanguageSwitch />
 </div>
 
-<div className="max-w-xl w-full">
+<div className="w-full">
 
-<CodeSwitcher enableTransitions className="xl:max-h-[300px] w-full">
+<CodeSwitcher className="xl:max-h-[300px]">
 
 ```javascript !! title:services/api.js
 import { api } from '@nitric/sdk'

src/components/code/Code.tsx

@@ -1,16 +1,16 @@
-import { highlight, RawCode } from 'codehike/code'
+import { RawCode } from 'codehike/code'
 import Pre from './Pre'
 import CodeContainer from './CodeContainer'
-import CODE_THEME from './theme'
 import { meta } from './meta'
+import { highlight } from './highlight'
 
 export async function Code({
   codeblock,
 }: {
   codeblock: RawCode
   isPanel?: boolean
 }) {
-  const highlighted = await highlight(codeblock, CODE_THEME)
+  const highlighted = await highlight(codeblock)
 
   const { title } = meta(codeblock)
 

src/components/code/CodeSwitcher.tsx

@@ -1,9 +1,9 @@
 import React, { Suspense } from 'react'
-import { highlight, RawCode } from 'codehike/code'
+import { RawCode } from 'codehike/code'
 import CodeContainer from './CodeContainer'
 import { CodeSwitcherSelect } from './CodeSwitcherSelect'
-import CODE_THEME from './theme'
 import Pre, { HandlerProps } from './Pre'
+import { highlight } from './highlight'
 
 export async function CodeSwitcher({
   code,
@@ -14,7 +14,7 @@ export async function CodeSwitcher({
   className?: string
 } & HandlerProps) {
   const highlighted = await Promise.all(
-    code.map((codeblock) => highlight(codeblock, CODE_THEME)),
+    code.map((codeblock) => highlight(codeblock)),
   )
 
   return (

src/components/code/Pre.tsx

@@ -2,7 +2,6 @@ import { HighlightedCode, Pre as CodeHikePre } from 'codehike/code'
 import React from 'react'
 import { callout } from './annotations/callout'
 import { CopyButton } from './CopyButton'
-import { className } from './annotations/classname'
 import { fold } from './annotations/fold'
 import {
   collapse,
@@ -76,7 +75,7 @@ const Pre: React.FC<Props> = ({
         code={highlighted}
         handlers={handlers}
         className={cn(
-          'overflow-auto overscroll-x-contain p-4',
+          'overflow-auto overscroll-x-contain p-4 text-sm',
           showPanel && !title && 'pt-7', // add padding to ensure the code doesn't touch the top of the panel
           className,
         )}

src/components/code/annotations/collapse.tsx

@@ -27,10 +27,7 @@ export const collapse: AnnotationHandler = {
   },
   Block: ({ annotation, children }) => {
     return (
-      <Collapsible
-        className="-ml-[17px]"
-        defaultOpen={annotation.query !== 'collapsed'}
-      >
+      <Collapsible defaultOpen={annotation.query !== 'collapsed'}>
         {children}
       </Collapsible>
     )

src/components/code/highlight.ts

@@ -0,0 +1,12 @@
+import { highlight as codehikeHighlight, RawCode } from 'codehike/code'
+import CODE_THEME from './theme'
+
+const cleanCode = (code: RawCode) => {
+  // Replace tabs with two spaces
+  code.value = code.value.replace(/\t/g, '  ')
+
+  return code
+}
+
+export const highlight = (data: RawCode) =>
+  codehikeHighlight(cleanCode(data), CODE_THEME)