feat: customize font size

site/app/live-editor.tsx

@@ -69,6 +69,7 @@ export function LiveEditor({
         className="editor"
         title={title}
         controls={controls}
+        fontSize={'14px'}
         lineNumbers={lineNumbers}
         onChange={(text) => setCode(text)}
       />

site/app/styles.css

@@ -10,6 +10,7 @@
   --sh-property: #7be5f2;
   --codice-control-color: #8d8989;
   --codice-caret-color: #d5efea;
+  --codice-font-size: 14px;
 }
 
 * {
@@ -79,6 +80,9 @@ input[type=radio] {
 .section {
   margin: 4rem 0;
 }
+.section h2 {
+  margin: 0;
+}
 
 /* Code Example */
 .code-example [data-codice-code] {
@@ -92,15 +96,14 @@ input[type=radio] {
 }
 
 .code-example pre code {
-  font-size: 1rem;
   line-height: 1.5;
 }
 
 .code-example__item {
   padding: 1rem;
   background-color: #3d3d3d;
   border-radius: 0.5rem;
-  margin: 3rem 0;
+  margin: 2rem 0;
   border: 1px solid rgba(163, 169, 165, 0.2);
 }
 .code-example__item__title {

src/code/code.tsx

@@ -1,5 +1,5 @@
 import { tokenize, generate } from 'sugar-high'
-import { baseCss, headerCss, lineNumbersCss } from './css'
+import { baseCss, headerCss, lineNumbersCss, fontCss } from './css'
 import * as presets from 'sugar-high/presets'
 import { useMemo } from 'react'
 
@@ -126,22 +126,24 @@ export function Code({
   children: code,
   title,
   controls,
+  fontSize,
+  highlightLines,
   preformatted = true,
   lineNumbers = false,
-  highlightLines,
   asMarkup = false,
   ...props
 }: {
   children: string
   /** Whether to use a preformatted block <pre><code> */
   preformatted?: boolean
+  fontSize?: number
+  highlightLines?: ([number, number] | number)[]
   title?: string
   controls?: boolean
   lineNumbers?: boolean
-  highlightLines?: ([number, number] | number)[]
   asMarkup?: boolean
 } & React.HTMLAttributes<HTMLDivElement>) {
-  const css = baseCss + (lineNumbers ? lineNumbersCss : '')
+  const css = baseCss + (lineNumbers ? lineNumbersCss : '') + fontCss(fontSize)
   const lineElements = useMemo(() => 
     asMarkup 
       ? code

src/code/css.ts

@@ -1,5 +1,5 @@
-const C = `[data-codice-code]`
-const H = `[data-codice-header]`
+const C = `:scope [data-codice-code]`
+const H = `:scope [data-codice-header]`
 
 export const baseCss = `\
 ${C} {
@@ -63,21 +63,22 @@ ${H} [data-codice-control] {
 `
 
 export const lineNumbersCss = `\
-@scope {
-  code { 
-    counter-reset: codice-code-line-number; 
-    padding-left
-  }
-  [data-codice-code-line-number] {
-    counter-increment: codice-code-line-number 1;
-    content: counter(codice-code-line-number);
-    display: inline-block;
-    min-width: 24px;
-    margin-left: -40px;
-    margin-right: 16px;
-    text-align: right;
-    user-select: none;
-    color: var(--codice-code-line-number-color);
-  }
+:scope code {
+  counter-reset: codice-code-line-number;
 }
+:scope [data-codice-code-line-number] {
+  counter-increment: codice-code-line-number 1;
+  content: counter(codice-code-line-number);
+  display: inline-block;
+  min-width: 24px;
+  margin-left: -40px;
+  margin-right: 16px;
+  text-align: right;
+  user-select: none;
+  color: var(--codice-code-line-number-color);
+}
+`
+
+export const fontCss = (fontSize: number | undefined) => `\
+:scope { font-size: ${fontSize || 'inherit'}; }
 `

src/editor/css.ts

@@ -1,16 +1,17 @@
-const R = '[data-codice="editor"]'
+const R = ':scope'
 export const css = `\
+${R} {
+  --codice-text-color: transparent;
+  --codice-background-color: transparent;
+  --codice-caret-color: inherit;
+}
 ${R} {
   position: relative;
   overflow-y: scroll;
   display: flex;
   flex-direction: column;
   justify-content: stretch;
-  scrollbar-width: none;
-
-  --codice-text-color: transparent;
-  --codice-background-color: transparent;
-  --codice-caret-color: inherit;
+  scrollbar-width: none;  
 }
 ${R} code,
 ${R} textarea {
@@ -19,8 +20,8 @@ ${R} textarea {
   overflow-wrap: break-word;
   scrollbar-width: none;
   padding: 24px 16px;
-  font-size: 16px;
   line-height: 20px;
+  font-size: var(--codice-font-size);
   caret-color: var(--codice-caret-color);
   border: none;
   outline: none;
@@ -51,7 +52,7 @@ ${R} textarea {
   height: 100%;
   overflow: hidden;
 }
-${R}[data-codice-line-numbers="true"] textarea {
+${R} [data-codice-line-numbers="true"] textarea {
   padding-left: 55px;
 }
 `

src/editor/editor.tsx

@@ -26,12 +26,14 @@ const Editor = forwardRef(function EditorComponent(
     value = '',
     controls,
     lineNumbers,
+    fontSize,
     onChange = () => {},
   }: {
     title?: string
     value?: string
     controls?: boolean
     lineNumbers?: boolean
+    fontSize?: number
     onChange?: (code: string) => void
   } & React.HTMLAttributes<HTMLDivElement>,
   ref: React.Ref<HTMLDivElement>
@@ -65,6 +67,7 @@ const Editor = forwardRef(function EditorComponent(
           title={null}
           controls={false}
           lineNumbers={lineNumbers}
+          fontSize={fontSize}
         >
           {code}
         </Code>

src/editor/index.tsx

@@ -1,11 +1,20 @@
 import { Editor as EditorClient } from './editor'
 import { css } from './css'
 
-export type EditorProps = React.HTMLAttributes<HTMLDivElement> & Parameters<typeof EditorClient>[0]
+export type EditorProps = React.HTMLAttributes<HTMLDivElement> 
+  & Parameters<typeof EditorClient>[0]
 
 export function Editor(props: EditorProps) {
-  const { title, value, onChange, controls = true, lineNumbers = true, ...restProps } = props
-  const editorProps = { title, value, onChange, controls, lineNumbers }
+  const { 
+    title, 
+    value, 
+    onChange, 
+    controls = true, 
+    lineNumbers = true,
+    fontSize,
+    ...restProps
+  } = props
+  const editorProps = { title, value, onChange, controls, lineNumbers, fontSize }
 
   return (
     <div 
@@ -17,7 +26,9 @@ export function Editor(props: EditorProps) {
       data-codice-controls={!!controls}
       data-codice-line-numbers={!!lineNumbers}
     >
-      <style data-codice-style>{css}</style>
+      <style data-codice-style>
+        {css}
+      </style>
       <EditorClient {...editorProps} />
     </div>
   )