Better default styles

packages/mdx/src/client/annotations.tsx

@@ -1,5 +1,10 @@
 import React from "react"
 import { CodeAnnotation } from "@code-hike/smooth-code"
+import {
+  getColor,
+  transparent,
+  ColorName,
+} from "@code-hike/utils"
 
 export function Annotation() {
   return "error: code hike remark plugin not running or annotation isn't at the right place"
@@ -13,6 +18,62 @@ export const annotationsMap: Record<
   bg: Background,
   label: Label,
   link: CodeLink,
+  mark: Mark,
+}
+
+function Mark({
+  children,
+  data,
+  theme,
+}: {
+  data: any
+  children: React.ReactNode
+  theme: any
+}) {
+  const bg =
+    data && typeof data === "string"
+      ? data
+      : tryGuessColor(children) ||
+        transparent(
+          getColor(theme, ColorName.CodeForeground),
+          0.2
+        )
+
+  return (
+    <span
+      className="ch-code-mark-annotation"
+      style={{
+        background: bg,
+        borderRadius: "0.25rem",
+        padding: "0.2rem 0.15rem 0.1rem",
+        margin: "0 -0.15rem",
+      }}
+    >
+      {children}
+    </span>
+  )
+}
+
+function tryGuessColor(
+  children: React.ReactNode
+): string | undefined {
+  const child = React.Children.toArray(children)[0] as any
+
+  const grandChild = React.Children.toArray(
+    child?.props?.children || []
+  )[0] as any
+
+  const grandGrandChild = React.Children.toArray(
+    grandChild?.props?.children || []
+  )[0] as any
+
+  const { color } = grandGrandChild?.props?.style
+
+  if (color) {
+    return transparent(color as string, 0.2)
+  }
+
+  return undefined
 }
 
 function Box({

packages/mdx/src/client/code.tsx

@@ -29,19 +29,23 @@ export function InnerCode({
     !props.files[0].name
   ) {
     return (
-      <CodeSpring
-        className="ch-code"
-        config={props.codeConfig}
-        step={props.files[0]}
-      />
+      <div className="ch-codeblock not-prose">
+        <CodeSpring
+          className="ch-code"
+          config={props.codeConfig}
+          step={props.files[0]}
+        />
+      </div>
     )
   } else {
     const frameProps = {
       ...props?.frameProps,
       onTabClick,
     }
     return (
-      <EditorSpring {...props} frameProps={frameProps} />
+      <div className="ch-codegroup not-prose">
+        <EditorSpring {...props} frameProps={frameProps} />
+      </div>
     )
   }
 }

packages/mdx/src/client/inline-code.tsx

@@ -0,0 +1,41 @@
+import React from "react"
+import {
+  EditorTheme,
+  getColor,
+  transparent,
+  ColorName,
+} from "@code-hike/utils"
+
+export function InlineCode({
+  className,
+  codeConfig,
+  children,
+  ...rest
+}: {
+  className: string
+  children?: React.ReactNode
+  codeConfig: { theme: EditorTheme }
+}) {
+  const { theme } = codeConfig
+  return (
+    <span
+      className={
+        "ch-inline-code not-prose" +
+        (className ? " " + className : "")
+      }
+      {...rest}
+    >
+      <code
+        style={{
+          background: transparent(
+            getColor(theme, ColorName.CodeBackground),
+            0.9
+          ),
+          color: getColor(theme, ColorName.CodeForeground),
+        }}
+      >
+        {children}
+      </code>
+    </span>
+  )
+}

packages/mdx/src/client/preview.tsx

@@ -6,15 +6,57 @@ import {
   SandboxInfo,
 } from "@codesandbox/sandpack-client"
 import { EditorStep } from "@code-hike/mini-editor"
+import { EditorTheme } from "@code-hike/utils"
 
 export type PresetConfig = SandboxInfo
-
 export function Preview({
   className,
   files,
   presetConfig,
+  show,
+  children,
+  codeConfig,
+  style,
+  ...rest
 }: {
   className: string
+  files: EditorStep["files"]
+  presetConfig?: PresetConfig
+  show?: string
+  style?: React.CSSProperties
+  children?: React.ReactNode
+  codeConfig: { theme: EditorTheme }
+}) {
+  return (
+    <div
+      className={
+        "ch-preview" + (className ? " " + className : "")
+      }
+      style={style}
+    >
+      <MiniBrowser
+        loadUrl={show}
+        theme={codeConfig.theme}
+        {...rest}
+        children={
+          presetConfig ? (
+            <SandpackPreview
+              files={files}
+              presetConfig={presetConfig}
+            />
+          ) : (
+            children
+          )
+        }
+      />
+    </div>
+  )
+}
+
+function SandpackPreview({
+  files,
+  presetConfig,
+}: {
   files: EditorStep["files"]
   presetConfig: PresetConfig
 }) {
@@ -45,11 +87,7 @@ export function Preview({
     }
   }, [files])
 
-  return (
-    <MiniBrowser className={className}>
-      <iframe ref={iframeRef} />
-    </MiniBrowser>
-  )
+  return <iframe ref={iframeRef} />
 }
 
 function mergeFiles(

packages/mdx/src/client/scrollycoding.scss

@@ -49,22 +49,26 @@
   .ch-scrollycoding-sticker {
     height: 80vh;
     gap: 0.5rem;
-  }
 
-  .ch-scrollycoding-sticker .ch-editor-frame,
-  .ch-scrollycoding-sticker .ch-code {
-    flex: 1;
+    .ch-codeblock,
+    .ch-codegroup {
+      flex: 1;
+    }
   }
 
   .ch-scrollycoding-preview {
     height: 280px;
   }
 }
 
-.ch-scrollycoding-sticker .ch-editor-frame,
-.ch-scrollycoding-sticker .ch-code {
-  width: 100%;
-  min-width: 100%;
-  min-height: 200px;
-  max-height: 80vh;
+.ch-scrollycoding-sticker {
+  .ch-codeblock,
+  .ch-codegroup {
+    width: 100%;
+    min-width: 100%;
+    min-height: 200px;
+    max-height: 80vh;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
 }

packages/mdx/src/client/scrollycoding.tsx

@@ -80,6 +80,7 @@ export function Scrollycoding({
             className="ch-scrollycoding-preview"
             files={tab.files}
             presetConfig={presetConfig}
+            codeConfig={codeConfig}
           />
         )}
       </div>

packages/mdx/src/client/slideshow.scss

@@ -10,9 +10,11 @@
   aspect-ratio: 16 / 9;
 }
 
-.ch-slideshow-slide .ch-editor-frame,
-.ch-slideshow-slide .ch-code {
+.ch-slideshow-slide .ch-codegroup,
+.ch-slideshow-slide .ch-codeblock {
   flex: 2;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 .ch-slideshow-preview {

packages/mdx/src/client/slideshow.tsx

@@ -60,6 +60,7 @@ export function Slideshow({
             className="ch-slideshow-preview"
             files={tab.files}
             presetConfig={presetConfig}
+            codeConfig={codeConfig}
           />
         )}
       </div>

packages/mdx/src/client/spotlight.scss

@@ -41,12 +41,14 @@
   max-height: 80vh;
 }
 
-.ch-spotlight-sticker .ch-editor-frame,
-.ch-spotlight-sticker .ch-code {
+.ch-spotlight-sticker .ch-codegroup,
+.ch-spotlight-sticker .ch-codeblock {
   width: 100%;
   min-width: 100%;
   min-height: Min(100%, 80vh);
   max-height: 80vh;
+  margin-top: 0;
+  margin-bottom: 0;
   flex: 1;
 }
 
@@ -56,8 +58,8 @@
     gap: 0.5rem;
   }
 
-  .ch-spotlight-sticker .ch-editor-frame,
-  .ch-spotlight-sticker .ch-code {
+  .ch-spotlight-sticker .ch-codegroup,
+  .ch-spotlight-sticker .ch-codeblock {
     min-height: 0;
     flex: 1;
   }

packages/mdx/src/client/spotlight.tsx

@@ -79,6 +79,7 @@ export function Spotlight({
             className="ch-spotlight-preview"
             files={tab.files}
             presetConfig={presetConfig}
+            codeConfig={codeConfig}
           />
         )}
       </div>

packages/mdx/src/components.tsx

@@ -11,6 +11,8 @@ import {
   annotationsMap,
   Annotation,
 } from "./client/annotations"
+import { Preview } from "./client/preview"
+import { InlineCode } from "./client/inline-code"
 
 export const CH = {
   Code,
@@ -19,7 +21,9 @@ export const CH = {
   SectionCode,
   Spotlight,
   Scrollycoding,
+  Preview,
   annotations: annotationsMap,
   Annotation,
   Slideshow,
+  InlineCode,
 }

packages/mdx/src/index.scss

@@ -4,6 +4,29 @@
 @import "./client/scrollycoding.scss";
 @import "./client/slideshow.scss";
 
-.ch-code {
+.ch-codeblock,
+.ch-codegroup,
+.ch-preview {
   border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
+    0 8px 16px -8px rgba(0, 0, 0, 0.3),
+    0 -6px 16px -6px rgba(0, 0, 0, 0.025);
+
+  & > * {
+    height: 100%;
+  }
+}
+
+.ch-codeblock,
+.ch-codegroup {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+
+.ch-inline-code > code {
+  padding: 0.2em 0.4em;
+  margin: 0.1em -0.1em;
+  border-radius: 0.25em;
+  font-size: 0.9em;
 }

packages/mdx/src/plugin.ts

@@ -8,6 +8,8 @@ import visit from "unist-util-visit"
 import { transformSlideshows } from "./plugin/slideshow"
 import { valueToEstree } from "./plugin/to-estree"
 import { CH_CODE_CONFIG_VAR_NAME } from "./plugin/unist-utils"
+import { transformPreviews } from "./plugin/preview"
+import { transformInlineCodes } from "./plugin/inline-code"
 
 type CodeHikeConfig = {
   theme: any
@@ -35,6 +37,8 @@ export function remarkCodeHike(config: CodeHikeConfig) {
     }
 
     try {
+      await transformInlineCodes(tree)
+      await transformPreviews(tree)
       await transformScrollycodings(tree, config)
       await transformSpotlights(tree, config)
       await transformSlideshows(tree, config)