uiwjs / react-codemirror

CodeMirror 6 component for React. @codemirror https://uiwjs.github.io/react-codemirror/
https://uiwjs.github.io/react-codemirror/
MIT License
1.65k stars 132 forks source link

Change font size #428

Closed sam-rez closed 1 year ago

sam-rez commented 1 year ago

Is there a way setting to change font size? I'm on version 4.15.1

jaywcjlove commented 1 year ago

@sam-rez https://codesandbox.io/embed/react-codemirror-example-codemirror-6-https-github-com-uiwjs-react-codemirror-issues-428-tfoeku?fontsize=14&hidenavigation=1&theme=dark

import React from "react";
import CodeMirror from "@uiw/react-codemirror";
import { EditorView } from "@codemirror/view";
import { javascript } from "@codemirror/lang-javascript";

const fontSize = EditorView.baseTheme({
  "&": {
    backgroundColor: "#fff",
    fontSize: "34px"
  }
});

export default function App() {
  const onChange = React.useCallback((value, viewUpdate) => {
    console.log("value:", value);
  }, []);
  return (
    <div>
      <CodeMirror
        value="console.log('hello world!');"
        height="200px"
        theme="dark"
        extensions={[fontSize, javascript({ jsx: true })]}
        onChange={onChange}
      />
      <CodeMirror
        value="console.log('hello world!');"
        height="200px"
        extensions={[javascript({ jsx: true })]}
        onChange={(value, viewUpdate) => {
          console.log("value:", value);
        }}
      />
    </div>
  );
}
sam-rez commented 1 year ago

Is this recommended over adding CSS class?

jaywcjlove commented 1 year ago

@sam-rez https://codemirror.net/examples/styling/